CN114237744A - 组件懒加载方法、系统、设备及存储介质 - Google Patents
组件懒加载方法、系统、设备及存储介质 Download PDFInfo
- Publication number
- CN114237744A CN114237744A CN202111537718.0A CN202111537718A CN114237744A CN 114237744 A CN114237744 A CN 114237744A CN 202111537718 A CN202111537718 A CN 202111537718A CN 114237744 A CN114237744 A CN 114237744A
- Authority
- CN
- China
- Prior art keywords
- component
- screen
- page
- components
- user terminal
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 50
- 238000009877 rendering Methods 0.000 claims abstract description 62
- 230000000712 assembly Effects 0.000 claims description 5
- 238000000429 assembly Methods 0.000 claims description 5
- 238000000034 method Methods 0.000 abstract description 9
- 238000010586 diagram Methods 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 3
- 230000009193 crawling Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/951—Indexing; Web crawling techniques
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种组件懒加载方法、系统、设备及存储介质，该方法包括：页面组件搭建完成后，获取页面中所有组件的高度信息；接收到用户终端的页面获取请求；根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件；渲染所述首屏组件的框架和内容，并渲染所述非首屏组件的框架；将渲染后的页面发送至所述用户终端，所述用户终端配置为显示所述页面的首屏。本发明通过对非首屏组件进行懒加载，提升了页面服务端渲染和客户端首屏显示的性能。
Description
技术领域
本发明涉及数据处理技术领域，尤其涉及一种组件懒加载方法、系统、设备及存储介质。
背景技术
在现有的服务端渲染框架下，服务端和客户端都是一次性渲染所有的组件，当页面组件数量较多时，需要渲染较多的DOM(Document Object Model，文档对象模型)节点，会使服务端渲染和客户端首屏显示的性能下降。
发明内容
针对现有技术中的问题，本发明的目的在于提供一种组件懒加载方法、系统、设备及存储介质，提升页面服务端渲染和客户端首屏显示的性能。
本发明实施例提供一种组件懒加载方法，包括如下步骤：
页面组件搭建完成后，获取页面中所有组件的高度信息；
接收到用户终端的页面获取请求；
根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件；
渲染所述首屏组件的框架和内容，并渲染所述非首屏组件的框架；
将渲染后的页面发送至所述用户终端，所述用户终端配置为显示所述页面的首屏。
在一些实施例中，所述获取页面中所有组件的高度信息，包括如下步骤：
调用爬虫服务，爬取页面中所有组件的高度信息。
在一些实施例中，所述根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件，包括如下步骤：
获取各个所述组件的排列顺序；
获取所述页面的首屏的高度信息；
基于各个所述组件的排列顺序、高度信息和所述页面的首屏的高度信息，确定各个所述组件是否在首屏显示；
将在首屏显示的组件作为首屏组件，将不在首屏显示的组件作为非首屏组件。
在一些实施例中，所述将渲染后的页面发送至用户终端之后，还包括如下步骤：
接收到所述用户终端的页面上滑请求；
确定页面下滑后，显示于所述用户终端的非首屏组件；
渲染确定的非首屏组件的内容。
在一些实施例中，渲染所述非首屏组件的框架，包括：根据所述非首屏组件的高度信息，渲染相应高度的非首屏组件的框架。
在一些实施例中，获取所述页面的首屏的高度信息，包括如下步骤：
获取所述用户终端的浏览器类型；
根据所述浏览器类型确定所述页面的首屏的高度。
在一些实施例中，获取各个所述组件的排列顺序，包括如下步骤：
获取所述用户终端所对应的用户信息；
根据所述用户信息确定用户的组件偏好信息；
根据所述用户的组件偏好信息确定组件的排列顺序。
本发明实施例还提供一种组件懒加载系统，用于实现所述的组件懒加载方法，所述系统包括：
高度获取模块，用于在页面组件搭建完成后，获取页面中所有组件的高度信息；
请求接收模块，用于接收到用户终端的页面获取请求；
页面渲染模块，用于根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件，渲染所述首屏组件的框架和内容，并渲染所述非首屏组件的框架；
页面发送模块，用于将渲染后的页面发送至所述用户终端，所述用户终端配置为显示所述页面的首屏。
本发明实施例还提供一种组件懒加载设备，包括：
处理器；
存储器，其中存储有所述处理器的可执行指令；
其中，所述处理器配置为经由执行所述可执行指令来执行所述的组件懒加载方法的步骤。
本发明实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被处理器执行时实现所述的组件懒加载方法的步骤。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
本发明的组件懒加载方法、系统、设备及存储介质具有如下有益效果：
本发明首先在页面组件搭建完成后，获取到所有组件的高度信息，并且在接收到用户终端的页面获取请求时对页面进行渲染，在对页面进行渲染之前，首先将组件区分为首屏显示的首屏组件和不在首屏显示的非首屏组件。然后对于首屏组件，渲染其框架和内容，而对于非首屏组件，只渲染框架，不渲染内容，渲染完成后，返回到用户终端。因此，本发明通过对首屏组件进行加载，而对非首屏组件进行懒加载，提升了页面服务端渲染和客户端首屏显示的性能。
附图说明
通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显。
图1是本发明一实施例的组件懒加载方法的流程图；
图2是本发明一实施例的将所有组件区分为首屏组件和非首屏组件的流程图；
图3是本发明一实施例的接收到页面上滑请求后的操作流程图；
图4是本发明一实施例的组件懒加载系统的结构示意图；
图5是本发明一实施例的组件懒加载设备的结构示意图；
图6是本发明一实施例的计算机可读存储介质的结构示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。
此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
附图中所示的流程图仅是示例性说明，不是必须包括所有的步骤。例如，有的步骤还可以分解，而有的步骤可以合并或部分合并，因此，实际执行的顺序有可能根据实际情况改变。
如图1所示，本发明实施例提供一种组件懒加载方法，包括如下步骤：
S100：页面组件搭建完成后，获取页面中所有组件的高度信息；
S200：接收到用户终端的页面获取请求；
S300：根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件；
S400：渲染所述首屏组件的框架和内容，并渲染所述非首屏组件的框架；其中，首屏组件的框架高度对应于该组件的高度，非首屏组件的框架高度也对应于该组件的高度；
S500：将渲染后的页面发送至所述用户终端，所述用户终端配置为显示所述页面的首屏。
本发明的组件懒加载方法中，首先通过步骤S100在页面组件搭建完成后，获取到所有组件的高度信息，并且在通过步骤S200接收到用户终端的页面获取请求时对页面进行渲染，在对页面进行渲染之前，首先通过步骤S300将组件区分为首屏显示的首屏组件和不在首屏显示的非首屏组件。然后通过步骤S400对于首屏组件，渲染其框架和内容，而对于非首屏组件，只渲染框架，不渲染内容，渲染完成后，通过步骤S500返回到用户终端。因此，本发明通过对首屏组件进行加载，而对非首屏组件进行懒加载，提升了页面服务端渲染和客户端首屏显示的性能。懒加载(Load On Demand)是一种独特而又强大的数据获取方法，它能够在用户滚动页面的时候自动获取更多的数据，而新得到的数据不会影响原有数据的显示，同时最大程度上减少服务器端的资源耗用。
该实施例中，页面中的组件可以是React组件，React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建用户界面(UI)。所述组件懒加载方法可以部署于页面渲染服务器中，在接收到用户终端请求时，需要进行渲染时执行本发明的组件懒加载方法，提高页面渲染和返回到用户终端的速度。所述用户终端可以是用户所使用的可以请求网页和获取网页的终端设备，例如手机、平板电脑、笔记本电脑等，其上安装有可以提供网页服务的客户端。
在该实施例中，所述步骤S100中，页面组件搭建完成后并且在后台保存页面后，获取页面中所有组件的高度信息。具体地，所述获取页面中所有组件的高度信息包括：调用爬虫服务，爬取页面中所有组件的高度信息，所述高度信息即为各个组件在页面中显示的高度值，例如可以以占用的区域的像素行数表示。
如图2所示，在该实施例中，所述步骤S300：根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件，包括如下步骤：
S210：获取各个所述组件的排列顺序，各个组件的排列顺序可以以各个组件的排列顺位号来表示，排列顺位号越小的组件，排列越靠前；
S220：获取所述页面的首屏的高度信息，该高度信息即为页面的首屏的高度值，例如可以以首屏的像素行数来表示；
S230：基于各个所述组件的排列顺序、高度信息和所述页面的首屏的高度信息，确定各个所述组件是否在首屏显示；
具体地，基于所述页面的首屏的高度来依次判断各个组件是否可以放置于首屏，判断时按照组件的排列顺序从前到后依次来进行判断，在判断一个组件无法放置于首屏时，该组件以及其后续排列的所有组件都无法显示于首屏；
S240：将在首屏显示的组件作为首屏组件，将不在首屏显示的组件作为非首屏组件。
因此，该实施例中，结合各个所述组件的排列顺序、高度信息和所述页面的首屏的高度信息来划分首屏组件和非首屏组件，为后续渲染时的区别性渲染做准备。
在该实施例中，所述步骤S400中，渲染所述非首屏组件的框架，包括：根据所述非首屏组件的高度信息，渲染相应高度的非首屏组件的框架。
在该实施例中，由于在首屏显示时只渲染了非首屏组件的框架，在用户上滑页面时，还需要根据用户的滑动操作实时渲染需要显示的非首屏组件的内容，以不影响用户的正常使用。具体地，如图3所示，所述步骤S500：将渲染后的页面发送至用户终端之后，还包括如下步骤：
S610：接收到所述用户终端的页面上滑请求；
S620：确定页面下滑后，显示于所述用户终端的非首屏组件；
S630：渲染确定的非首屏组件的内容。
因此，该实施例的组件懒加载方法在首屏显示时只渲染非首屏组件的框架，而在需要显示该非首屏组件时实时渲染该组件的内容，既提高了首屏渲染的速度，也不影响页面的正常显示。
在该实施例中，所述步骤S220中，获取所述页面的首屏的高度信息，包括如下步骤：
获取所述用户终端的浏览器类型，例如，浏览器类型可以包括竖屏显示类型或横屏显示类型，在竖屏显示和横屏显示时首屏高度是不同的，或者浏览器类型可以包括手机端浏览器、平板端浏览器或者电脑端浏览器等；
根据所述浏览器类型确定所述页面的首屏的高度，具体地，可以预先存储不同的浏览器类型与首屏高度之间的映射关系表，在确定浏览器类型后，进行查表得到对应的首屏高度。
在该实施例中，所述首屏中能够放置哪些组件，需要结合组件的排列顺序和高度来进行判断。具体地，对于不同的用户，其对应的组件的排列顺序可能是不一样的。具体地，用户对应的组件的排列顺序可以根据用户的偏好习惯数据来确定。在该实施例中，所述步骤S210中，获取各个所述组件的排列顺序，包括如下步骤：
获取所述用户终端所对应的用户信息，用户信息例如可以是用户ID、用户名、用户手机号等标识用户身份的信息，在用户使用用户终端的客户端时，可以首先请用户输入用户名来进行登录，也可以自动获取用户终端所对应的本机号码；
根据所述用户信息确定用户的组件偏好信息，具体地，可以预存用户信息与用户组件偏好信息的对应关系，根据用户查询查询其对应的组件偏好信息；
根据所述用户的组件偏好信息确定组件的排列顺序。
该组件偏好信息可以是以用户对各个类型的组件的权重的形式来存储。即所述组件偏好信息包括各个类型的组件的偏好权重值。根据所述用户的组件偏好信息确定组件的排列顺序，包括如下步骤：
获取所述页面中各个组件的预设默认权重值；
确定所述页面中各个组件的类型，根据所述用户的组件偏好信息确定各个组件的偏好权重值；
将所述页面中各个组件的预设默认权重值与偏好权重值相乘或相加，得到所述页面中各个组件的排序权重值；
根据所述页面中各个组件的排序权重值从大到小对所述组件进行排序。
其中，所述预设默认权重值为默认值，在无法获取到用户信息，或者无法获取到用户的组件偏好信息时，则基于该预设默认权重值从大到小对组件进行排序。
如图4所示，本发明实施例还提供一种组件懒加载系统，用于实现所述的组件懒加载方法，所述系统包括：
高度获取模块M100，用于在页面组件搭建完成后，获取页面中所有组件的高度信息；
请求接收模块M200，用于接收到用户终端的页面获取请求；
页面渲染模块M300，用于根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件，渲染所述首屏组件的框架和内容，并渲染所述非首屏组件的框架；
页面发送模块M400，用于将渲染后的页面发送至所述用户终端，所述用户终端配置为显示所述页面的首屏。
本发明的组件懒加载系统中，首先通过高度获取模块M100在页面组件搭建完成后，获取到所有组件的高度信息，并且在通过请求接收模块M200接收到用户终端的页面获取请求时对页面进行渲染，在对页面进行渲染之前，首先通过页面渲染模块M300将组件区分为首屏显示的首屏组件和不在首屏显示的非首屏组件。然后对于首屏组件，渲染其框架和内容，而对于非首屏组件，只渲染框架，不渲染内容，渲染完成后，通过页面发送模块M400返回到用户终端。因此，本发明通过对首屏组件进行加载，而对非首屏组件进行懒加载，提升了页面服务端渲染和客户端首屏显示的性能。所述组件懒加载系统可以部署于页面渲染服务器中，在接收到用户终端请求时，需要进行渲染时执行本发明的组件懒加载系统，提高页面渲染和返回到用户终端的速度。所述用户终端可以是用户所使用的可以请求网页和获取网页的终端设备，例如手机、平板电脑、笔记本电脑等，其上安装有可以提供网页服务的客户端。
在该实施例中，所述高度获取模块M100获取页面中所有组件的高度信息，包括：调用爬虫服务，爬取页面中所有组件的高度信息，所述高度信息即为各个组件在页面中显示的高度值，例如可以以占用的区域的像素行数表示。
在该实施例中，所述页面渲染模块M300根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件包括：获取各个所述组件的排列顺序，各个组件的排列顺序可以以各个组件的排列顺位号来表示，排列顺位号越小的组件，排列越靠前；获取所述页面的首屏的高度信息，该高度信息即为页面的首屏的高度值，例如可以以首屏的像素行数来表示；基于各个所述组件的排列顺序、高度信息和所述页面的首屏的高度信息，确定各个所述组件是否在首屏显示；将在首屏显示的组件作为首屏组件，将不在首屏显示的组件作为非首屏组件。
因此，该实施例中，所述页面渲染模块M300结合各个所述组件的排列顺序、高度信息和所述页面的首屏的高度信息来划分首屏组件和非首屏组件，为后续渲染时的区别性渲染做准备。
在该实施例中，所述页面渲染模块M300渲染所述非首屏组件的框架，包括：根据所述非首屏组件的高度信息，渲染相应高度的非首屏组件的框架。同样地，在渲染首屏组件时，首屏组件的框架也是对应于首屏组件高度的框架。
在该实施例中，所述组件懒加载系统还包括组件加载模块，用于在所述页面发送模块M400将渲染后的页面发送至用户终端之后，且接收到所述用户终端的页面上滑请求时，确定页面下滑后，显示于所述用户终端的非首屏组件，并渲染确定的非首屏组件的内容。
因此，该实施例的组件懒加载系统在首屏显示时只渲染非首屏组件的框架，而在需要显示该非首屏组件时实时渲染该组件的内容，既提高了首屏渲染的速度，也不影响页面的正常显示。
本发明实施例还提供一种组件懒加载设备，包括处理器；存储器，其中存储有所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行所述的组件懒加载方法的步骤。
所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“平台”。
下面参照图5来描述根据本发明的这种实施方式的电子设备600。图5显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图5所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630、显示单元640等。
其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述组件懒加载方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图1中所示的步骤。
所述存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。
所述存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
所述组件懒加载设备中，所述存储器中的程序被处理器执行时实现所述的组件懒加载方法的步骤，因此，所述设备也可以获得上述组件懒加载方法的技术效果。
本发明实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被处理器执行时实现所述的组件懒加载方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上执行时，所述程序代码用于使所述终端设备执行本说明书上述组件懒加载方法部分中描述的根据本发明各种示例性实施方式的步骤。
参考图6所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上执行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
所述计算机存储介质中的程序被处理器执行时实现所述的组件懒加载方法的步骤，因此，所述计算机存储介质也可以获得上述组件懒加载方法的技术效果。
以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。
Claims (10)
1.一种组件懒加载方法，其特征在于，包括如下步骤：
页面组件搭建完成后，获取页面中所有组件的高度信息；
接收到用户终端的页面获取请求；
根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件；
渲染所述首屏组件的框架和内容，并渲染所述非首屏组件的框架；
将渲染后的页面发送至所述用户终端，所述用户终端配置为显示所述页面的首屏。
2.根据权利要求1所述的组件懒加载方法，其特征在于，所述获取页面中所有组件的高度信息，包括如下步骤：
调用爬虫服务，爬取页面中所有组件的高度信息。
3.根据权利要求1所述的组件懒加载方法，其特征在于，所述根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件，包括如下步骤：
获取各个所述组件的排列顺序；
获取所述页面的首屏的高度信息；
基于各个所述组件的排列顺序、高度信息和所述页面的首屏的高度信息，确定各个所述组件是否在首屏显示；
将在首屏显示的组件作为首屏组件，将不在首屏显示的组件作为非首屏组件。
4.根据权利要求1所述的组件懒加载方法，其特征在于，所述将渲染后的页面发送至用户终端之后，还包括如下步骤：
接收到所述用户终端的页面上滑请求；
确定页面下滑后，显示于所述用户终端的非首屏组件；
渲染确定的非首屏组件的内容。
5.根据权利要求1所述的组件懒加载方法，其特征在于，渲染所述非首屏组件的框架，包括：根据所述非首屏组件的高度信息，渲染相应高度的非首屏组件的框架。
6.根据权利要求3所述的组件懒加载方法，其特征在于，获取所述页面的首屏的高度信息，包括如下步骤：
获取所述用户终端的浏览器类型；
根据所述浏览器类型确定所述页面的首屏的高度。
7.根据权利要求3所述的组件懒加载方法，其特征在于，获取各个所述组件的排列顺序，包括如下步骤：
获取所述用户终端所对应的用户信息；
根据所述用户信息确定用户的组件偏好信息；
根据所述用户的组件偏好信息确定组件的排列顺序。
8.一种组件懒加载系统，其特征在于，用于实现权利要求1至7中任一项所述的组件懒加载方法，所述系统包括：
高度获取模块，用于在页面组件搭建完成后，获取页面中所有组件的高度信息；
请求接收模块，用于接收到用户终端的页面获取请求；
页面渲染模块，用于根据各个所述组件的高度信息将所有组件区分为首屏组件和非首屏组件，渲染所述首屏组件的框架和内容，并渲染所述非首屏组件的框架；
页面发送模块，用于将渲染后的页面发送至所述用户终端，所述用户终端配置为显示所述页面的首屏。
9.一种组件懒加载设备，其特征在于，包括：
处理器；
存储器，其中存储有所述处理器的可执行指令；
其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1至7中任一项所述的组件懒加载方法的步骤。
10.一种计算机可读存储介质，用于存储程序，其特征在于，所述程序被处理器执行时实现权利要求1至7中任一项所述的组件懒加载方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111537718.0A CN114237744A (zh) | 2021-12-15 | 2021-12-15 | 组件懒加载方法、系统、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111537718.0A CN114237744A (zh) | 2021-12-15 | 2021-12-15 | 组件懒加载方法、系统、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114237744A true CN114237744A (zh) | 2022-03-25 |
Family
ID=80756641
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111537718.0A Pending CN114237744A (zh) | 2021-12-15 | 2021-12-15 | 组件懒加载方法、系统、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114237744A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114840793A (zh) * | 2022-03-31 | 2022-08-02 | 阿里巴巴（中国）有限公司 | 动态页面展示方法、装置及电子设备 |
| CN114840162A (zh) * | 2022-05-10 | 2022-08-02 | 北京字跳网络技术有限公司 | 首屏页面呈现方法、装置、电子设备和存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130019159A1 (en) * | 2011-07-14 | 2013-01-17 | Google Inc. | Mobile web browser for pre-loading web pages |
| CN111339455A (zh) * | 2018-12-18 | 2020-06-26 | 阿里巴巴集团控股有限公司 | 浏览器应用加载页面首屏的方法和装置 |
| CN112100543A (zh) * | 2020-08-31 | 2020-12-18 | 东软集团股份有限公司 | 渲染网页的方法、装置、存储介质及电子设备和服务器 |
| CN112256363A (zh) * | 2020-09-21 | 2021-01-22 | 北京三快在线科技有限公司 | 应用页面渲染方法、装置、电子设备 |
-
2021
- 2021-12-15 CN CN202111537718.0A patent/CN114237744A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130019159A1 (en) * | 2011-07-14 | 2013-01-17 | Google Inc. | Mobile web browser for pre-loading web pages |
| CN111339455A (zh) * | 2018-12-18 | 2020-06-26 | 阿里巴巴集团控股有限公司 | 浏览器应用加载页面首屏的方法和装置 |
| CN112100543A (zh) * | 2020-08-31 | 2020-12-18 | 东软集团股份有限公司 | 渲染网页的方法、装置、存储介质及电子设备和服务器 |
| CN112256363A (zh) * | 2020-09-21 | 2021-01-22 | 北京三快在线科技有限公司 | 应用页面渲染方法、装置、电子设备 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114840793A (zh) * | 2022-03-31 | 2022-08-02 | 阿里巴巴（中国）有限公司 | 动态页面展示方法、装置及电子设备 |
| CN114840162A (zh) * | 2022-05-10 | 2022-08-02 | 北京字跳网络技术有限公司 | 首屏页面呈现方法、装置、电子设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11017152B2 (en) | Optimizing loading of web page based on aggregated user preferences for web page elements of web page | |
| CN114237744A (zh) | 组件懒加载方法、系统、设备及存储介质 | |
| KR20140078676A (ko) | 웹 페이지의 맞춤 최적화 기법 | |
| CN109684008B (zh) | 卡片渲染方法、装置、终端及计算机可读存储介质 | |
| CN112395027B (zh) | 微件界面生成方法、装置、存储介质与电子设备 | |
| CN110688096B (zh) | 包含插件的应用程序的构建方法、装置、介质及电子设备 | |
| CN110275727B (zh) | 移动端应用程序动态更新方法、系统、设备及存储介质 | |
| CN106528587A (zh) | 复合网页系统中页面的展示方法和装置 | |
| CN112612546A (zh) | 页面加载方法、装置、电子设备和存储介质 | |
| CN104573023B (zh) | 一种网页图片检查方法、装置及计算设备 | |
| CN110647327A (zh) | 基于卡片的用户界面动态控制的方法和装置 | |
| CN112905603A (zh) | 页面节点显示方法、系统、设备及存储介质 | |
| CN111460286B (zh) | 信息推荐方法、装置、电子设备及介质 | |
| KR20150078033A (ko) | 응용 프로그램을 실행하는 전자 장치 및 방법 | |
| CN112818267A (zh) | 数据处理方法、装置、计算机可读存储介质及电子设备 | |
| CN113805997B (zh) | 信息显示方法、装置、电子设备和存储介质 | |
| CN112100553B (zh) | 一种网页页面配置方法、装置、电子设备及存储介质 | |
| CN112073505B (zh) | 在云服务器上进行卸载的方法、控制装置、存储介质 | |
| CN113141613B (zh) | 一种通信渠道检测方法、装置和电子设备 | |
| CN111988405B (zh) | 负载均衡装置的报文重写方法及负载均衡装置 | |
| US7664768B2 (en) | Preserving user code in OTT-generated classes | |
| CN114048048A (zh) | 信息分享方法、装置、电子设备及存储介质 | |
| CN107045549B (zh) | 一种电子书页数获取方法和装置 | |
| CN113221097A (zh) | 一种代码执行方法、装置、电子终端及存储介质 | |
| CN109740076A (zh) | 网页显示方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |