WO2017036309A1

WO2017036309A1 - Page rendering method, device and apparatus

Info

Publication number: WO2017036309A1
Application number: PCT/CN2016/095857
Authority: WO
Inventors: 朱盛家
Original assignee: 阿里巴巴集团控股有限公司; 朱盛家
Priority date: 2015-08-31
Filing date: 2016-08-18
Publication date: 2017-03-09
Also published as: CN106484383B; CN106484383A

Abstract

A page rendering method, device and apparatus. The method is applied to a client device, and comprises: upon visiting an HTML page via a browser, traversing DOM nodes in each HTML module in the HTML page (101); when the traversal is at a target DOM node in a current target HTML module, requesting, in parallel and according to defined attribute information in the target DOM node, a server for multiple target resources of the target HTML module (102); and rendering the target HTML module according to a relationship between the target resources (103). In an embodiment, the speed of resource acquisition is increased by requesting, in parallel, all resources of an HTML module via predetermined attribute information of DOM nodes during rendering of each HTML module of an HTML page. In addition, after all resources are acquired, these resources can be automatically loaded, thereby reducing resource loading time, and improving the rendering speed of an HTML page as a whole.

Description

Page rendering method, device and device

Technical field

The present application relates to the field of network communication technologies, and in particular, to a page rendering method, apparatus, and device.

Background technique

Page rendering is the process by which the client browser displays HTML (Hyper Text Markup Language) code in a browser window according to predefined rules. When the client browser renders the HTML page, it needs to obtain various resources for rendering the page from the server, and implement the HTML page rendering by loading the acquired resources. In the related art, the HTML document framework can be divided into multiple HTML modules according to different functions. When rendering the HTML page portion corresponding to any HTML module, the client browser sequentially requests each server different HTML module in a serial manner. Type resources, and after requesting each type of resource, load these resources by manually calling JavaScript to complete the rendering of the HTML page part.

However, the above page rendering process requires a serial request for each HTML module's resources, so the resource acquisition speed is slow, and since the resource is loaded by manually calling the JavaScript method, the resource loading time is increased, and the above results in the HTML page. The overall rendering speed is slower.

Summary of the invention

The application provides a page rendering method, device and device to solve the problem that the overall speed of the existing page rendering is slow.

According to a first aspect of the embodiments of the present application, a page rendering method is provided, where the method is applied to a client device, including:

When accessing an HTML page through a browser, traversing a file object model DOM node of each HTML module of the HTML page;

When traversing to the target DOM node of the current target HTML module, according to the target Attribute information defined in the DOM node, requesting, in parallel, a plurality of target resources of the target HTML module to the server;

Rendering the target HTML module according to a relationship between the plurality of target resources.

According to a second aspect of the embodiments of the present application, there is provided a page rendering apparatus, the apparatus being applied to a client device, the apparatus comprising:

a traversing unit for traversing a file object model DOM node of each HTML module of the HTML page when accessing the HTML page through the browser;

a requesting unit, configured to, when traversing to a target DOM node of the current target HTML module, request a plurality of target resources of the target HTML module in parallel according to the attribute information defined in the target DOM node;

a rendering unit, configured to render the target HTML module according to a relationship between the plurality of target resources.

According to a third aspect of the embodiments of the present application, a client device is provided, including:

a processor; a memory for storing the processor executable instructions;

Wherein the processor is configured to:

When traversing to the target DOM node of the current target HTML module, requesting, according to the attribute information defined in the target DOM node, multiple target resources of the target HTML module to the server in parallel;

When the HTML page is accessed by using the embodiment of the present application, when traversing to the target DOM node of any target HTML module of the HTML page, the target of the target HTML module may be requested in parallel according to the attribute information defined in the target DOM node to the server. Resources and render the target HTML module based on the relationship between multiple target resources. Since the embodiment of the present application requests all the resources of the HTML module in parallel through the attribute information of the predefined DOM node when the HTML module is rendered, the resource acquisition speed is faster, and the automatic acquisition can automatically be performed after all the resources are acquired. Loading these resources saves resource load time, which improves the rendering speed of HTML pages as a whole.

The above general description and the following detailed description are intended to be illustrative and not restrictive.

DRAWINGS

The drawings herein are incorporated in and constitute a part of the specification,

1 is a flow chart of an embodiment of a page rendering method of the present application;

2 is a schematic diagram of a scenario for performing page rendering by applying an embodiment of the present application;

3 is a flow chart of another embodiment of a page rendering method of the present application;

4 is a hardware structural diagram of a client device where a page rendering device of the present application is located;

FIG. 5 is a block diagram of an embodiment of a page rendering apparatus of the present application; FIG.

6 is a block diagram of another embodiment of a page rendering apparatus of the present application.

detailed description

The terminology used in the present application is for the purpose of describing particular embodiments, and is not intended to be limiting. The singular forms "a", "the" and "the" It should also be understood that the term "and/or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.

It should be understood that although the terms first, second, third, etc. may be used to describe various information in this application, such information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, the first information may also be referred to as the second information without departing from the scope of the present application. Similarly, the second information may also be referred to as the first information. Depending on the context, the word "if" as used herein may be interpreted as "when" or "when" or "in response to a determination."

Referring to FIG. 1 , which is a flowchart of an embodiment of a page rendering method of the present application, which may be Applied to the client device, including the following steps:

Step 101: When accessing the HTML page through the browser, traverse the DOM node of each HTML module of the HTML page.

In this embodiment, when the user launches the browser on the client device and accesses the HTML page through the browser, the HTML page may be first divided into multiple HTML modules. For example, the HTML page may be divided into different functions according to different functions. Multiple parent HTML modules. Further, for any parent HTML module, the parent HTML module can also be divided into multiple child HTML modules. The HTML module of the HTML page may be divided according to different functions of the HTML page. For example, the image display area, the video display area, and the text display area on the HTML page may be divided into different HTML modules, and further, It is also possible to divide the text content fixed area and the text content change area in the text display area into different HTML modules.

For each HTML module that is divided, the DOM node of the HTML module can be defined by the WEB native layout, the DOM node is used to mark the area of the corresponding HTML module in the HTML page, and the attribute information can be added on the DOM node, the attribute The information includes the resource path of multiple resources of the HTML module, such as the address or port of the storage resource on the server.

Based on the division of the HTML pages, each HTML page contains a plurality of HTML modules, at which point the client device begins to traverse the DOM nodes of each HTML module, performing the same operations for each DOM node client device traversed. Therefore, for convenience of description, the currently traversed HTML module is referred to as a target HTML module, and the DOM node of the target HTML module is referred to as a target DOM node.

Step 102: When traversing to the target DOM node of the current target HTML module, request multiple target resources of the target HTML module to the server in parallel according to the attribute information defined in the target DOM node.

In this step, when traversing to the target DOM node of the current target HTML module, the attribute information of the target DOM node may be read, the resource path of the plurality of target resources of the target HTML module is obtained, and then the resources of each target resource are obtained. The path sends a resource request for obtaining these target resources in parallel to the server by calling JavaScript. Resources can include: HTML Files, CSS (Cascading Style Sheets) files, JS (JavaScript) files, JSON (JavaScript Object Notation, JS Object Markup) data, etc.

Step 103: Render the target HTML module according to the relationship between the multiple target resources.

After the multiple resource requests are sent to the server in parallel to request multiple target resources, in this step, a request status may be set for each resource request, and the request status is used to mark whether the corresponding target resource has been acquired. When it is determined according to the set request status that all the target resources have been acquired, the target resources may be sequentially loaded according to the dependencies between the target resources, the target HTML module is synthesized, and finally the synthesized HTML module is added to the target DOM. In the node, thus completing the rendering of the target HTML module. It can be seen that when the DOM nodes of all the HTML modules are traversed and the rendering of all the HTML modules is completed, the rendering of the entire HTML page can be completed.

The loading process when the target resources are sequentially loaded according to the dependency relationship between the target resources is consistent with the prior art. For example, when the target resource includes an HTML file, a CSS file, a JS file, and JSON data, the HTML file is firstly used according to the HTML file. The HTML document framework is loaded, and then the HEML document framework is modified by the JS file. Finally, the HTML document framework is further modified by the CSS file and the JSON data, thereby rendering the HTML page portion corresponding to the target HTML module.

It can be seen from the above embodiment that in the embodiment, when each HTML module is rendered, all the resources of the HTML module are requested in parallel through the attribute information of the predefined DOM node, so the resource acquisition speed is faster, and after all resources are acquired. These resources can be loaded automatically, thus saving resource load time and thus improving the rendering speed of the HTML page as a whole.

2 is a schematic diagram of a scenario for implementing page rendering in the application of the embodiment of the present application. FIG. 2 is an example of rendering an HTML page of an OPOA (One Page One Application).

FIG. 2 includes a client device side for loading an HTML page, generally referred to as a mobile phone, a tablet, a PC, and the like configured with a browser; and a server side providing various resources for loading an HTML page, the server side You can deploy a distributed server, for example, CDN (Content Delivery Network, Content Distribution Network) server.

In this embodiment, OPOA refers to a WEB page is an application. When the OPOA is first loaded, all HTML documents are transmitted to the WEB browser. When the user accesses a separate HTML page in the OPOA, the HTML page will be in the current WEB page. load. As shown in FIG. 2, assuming that an OPOA includes n HTML pages, the rendering process of each HTML page can be implemented by using the solution provided by the embodiment of the present application. Taking the HTML page 2 shown in FIG. 2 as an example, the HTML page 2 is divided into m HTML modules, and the resources of each HTML module are stored on the server side, and the rendering process of each HTML module is consistent to the HTML module 2 For example, when acquiring the resources of the HTML module 2, the client device sends the resource request to the server in parallel, and after obtaining all the resources including the HTML file, the JS file, the CSS file, and the JSON data, the dependence between the resources is utilized. The relationship is rendered out of the corresponding portion of the HTML page 2 corresponding to the HTML module 2. The page rendering process of the present application will be described in detail below through the embodiment shown in FIG. 3 in conjunction with the scenario diagram shown in FIG. 2.

Referring to FIG. 3, it is a flowchart of another embodiment of a page rendering method of the present application. The embodiment may be applied to a client device, including the following steps:

Step 301: When the HTML page is accessed through the browser, the HTML page is divided into a plurality of HTML modules.

In the embodiment of the present application, when the user starts the browser on the client device and accesses the HTML page through the browser, the HTML page may be first divided into multiple HTML modules. For example, the HTML page may be divided into different functions according to different functions. For multiple parent HTML modules, further, for any parent HTML module, the parent HTML module can also be divided into multiple child HTML modules. As shown in FIG. 2, the HTML page 2 is divided into m HTML modules, which may include a parent HTML module, and/or a sub-HTML module.

In this embodiment, when the HTML module of the HTML page is divided, the HTML page may be divided according to different functions of the HTML page. For example, the image display area, the video display area, and the text display area on the HTML page may be divided into different HTML modules. Further, the text content fixed area and the text content change area in the text display area may be divided into different HTML module; additionally, for the OPOA shown in FIG. 2, different HTML pages may contain partially identical page content, for example, when rendering HTML page 1, divide HTML page 1 into several HTML modules, if HTML page 2 is The divided HTML module is the same as the page content of an HTML module divided in the HTML page 1. When the HTML page 2 is rendered, only the HTML module except the HTML module can be rendered, thereby further saving the HTML page. The rendering time and rendering resources of 2 are not limited in this embodiment of the present application.

Step 302: Define attribute information of the DOM node of each HTML module through the WEB native layout.

Native development generally refers to the development of a native development language. The native development language is the programming language used to develop the entire system. DOM is a document model described in an object-oriented manner, and is also a tree representation of the data and structure on the page. In this way, the DOM defines the objects needed to represent and modify the document, the behavior and properties of the object, and the relationships between the objects.

In this embodiment, after the HTML page is divided into multiple HTML modules, for each HTML module, the DOM node of the HTML module may be defined by the WEB native layout, and the DOM node is used to mark the corresponding HTML module in the HTML page. An area, and may add attribute information on the DOM node, where the attribute information includes resource paths of multiple resources of the HTML module, such as an address or a port of the storage resource on the server; further, the HTML module may be defined on the DOM node. Other information such as name. As can be seen from FIG. 2, for the HTML module 2 of the HTML page 2, attribute information can be added to the DOM node defined for the HTML module 2, and the attribute information includes the HTML file, the JS file, the CSS file, and the JSON of the HTML module 2. The resource path where the data is stored on the server side.

Step 303: Traverse the DOM node of each HTML module of the HTML module.

Based on the division of the HTML pages, each HTML page contains a plurality of HTML modules, at which point the client device begins to traverse the DOM nodes of each HTML module, performing the same operations for each DOM node client device traversed. Therefore, for the convenience of description, the HTML module currently traversed is referred to as the target HTML module, and the DOM section of the target HTML module is referred to. The point is called the target DOM node.

Step 304: When traversing to the target DOM node of the current target HTML module, the attribute information of the target DOM node is read, and the resource paths of the plurality of target resources of the target HTML module are obtained.

Taking the HTML module 2 in FIG. 2 as an example of the HTML module, assuming that the DOM node of the HTML module 2 is currently traversed, the attribute information of the DOM node defined in step 302 can be read, and the HTML file of the HTML module 2 and the JS are obtained. Resource paths for files, CSS files, and JSON data.

Step 305: Send a resource request for acquiring the target resource to the server in parallel by calling JavaScript according to the resource path of each target resource.

In this embodiment, a high-level scripting language that can be directly interpreted by a browser can be utilized. When an HTML page is rendered in a browser, for example, the advanced scripting language can be JavaScript, and the JavaScript is an object- and event-driven and relatively secure. Client scripting language.

After the resource path of the HTML file, the JS file, the CSS file, and the JSON data of the HTML module 2 is obtained, the client device may concurrently send the resource request of the HTML file and the resource of the JS file according to the resource path. Requests, resource requests for CSS files, and resource requests for JSON data.

Step 306: Set a request status for each resource request, and the request status is used to mark whether the corresponding target resource has been acquired.

After sending multiple resource requests to the server in parallel to request multiple target resources, in this step, a request status may be set for each resource request, and the request status is used to mark whether the corresponding target resource has been obtained, for example, when If a target resource is not obtained, the request status of the target resource is “waiting”. When a target resource has been acquired, the request status of the target resource is “completed”.

Step 307: When it is determined that all the target resources are acquired according to the set request status, the target HTML modules are synthesized after sequentially loading the target resources according to the dependency relationship between the target resources.

Still taking the HTML module 2 in FIG. 2 as an example, when the resource request of the set HTML file, the resource request of the JS file, the resource request of the CSS file, and the resource request of the JSON data The status is "completed", and it can be determined that all resources of the HTML module 2 are obtained.

In this step, the process of loading the HTML module 2 according to the dependency relationship between the resources is consistent with the prior art, and may include: first loading the HTML document frame of the HTML module 2 according to the HTML file, and then modifying the HEML document frame through the JS file. Finally, the HTML document framework is further modified by the CSS file and the JSON data, thereby rendering the HTML page portion corresponding to the target HTML module.

Step 308: Add the target HTML module to the target DOM node to complete rendering of the target HTML module.

Step 309: Determine whether the DOM node of all the HTML modules is traversed. If yes, execute step 310; otherwise, return to step 303.

Step 310: Determine to complete the rendering of the HTML page and end the current process.

After performing the foregoing steps 303 to 309 through the loop, after traversing the DOM nodes of all the HTML modules and completing the rendering of all the HTML modules, the complete HTML page can be loaded on the browser.

Corresponding to the embodiment of the present page rendering method, the present application also provides an embodiment of a page rendering device and a client device.

Embodiments of the present page rendering apparatus can be applied to various client devices on which a browser is installed, for example, the client device can include a mobile phone, a tablet, a PC, and the like. The device embodiment may be implemented by software, or may be implemented by hardware or a combination of hardware and software. Taking the software implementation as an example, as a logical device, the processor of the client device in which it is located reads the corresponding computer program instructions in the non-volatile memory into the memory. At the hardware level, as shown in FIG. 4, a hardware structure diagram of the client device where the page rendering device is located, except for the processor, memory, network interface, and non-volatile storage shown in FIG. In addition to the device, the client device where the device is located in the embodiment may also include other hardware according to the actual function of the device, which is not shown in FIG. 4 .

Referring to FIG. 5, it is a block diagram of an embodiment of a page rendering apparatus of the present application:

The apparatus includes a traversal unit 510, a request unit 520, and a rendering unit 530.

The traversing unit 510 is configured to traverse the file object model DOM node of each HTML module of the HTML page when accessing the HTML page through the browser;

The requesting unit 520 is configured to, when traversing to the target DOM node of the current target HTML module, request the plurality of target resources of the target HTML module in parallel according to the attribute information defined in the target DOM node;

The rendering unit 530 is configured to render the target HTML module according to the relationship between the multiple target resources.

Referring to FIG. 6, a block diagram of another embodiment of the page rendering apparatus of the present application is as follows:

The apparatus includes a dividing unit 610, a defining unit 620, a traversing unit 630, a requesting unit 640, a rendering unit 650, and a judging unit 660 and a determining unit 670.

The dividing unit 610 is configured to divide the HTML page into multiple HTML modules.

The defining unit 620 is configured to define attribute information of a DOM node of each HTML module by using a WEB native layout, where the DOM node is used to mark an area of the HTML module in the HTML page, where the attribute information includes multiple HTML modules. Resource path of resources;

The traversing unit 630 is configured to traverse the file object model DOM node of each HTML module of the HTML page when accessing the HTML page through the browser;

The requesting unit 640 is configured to, when traversing to the target DOM node of the current target HTML module, request the plurality of target resources of the target HTML module in parallel according to the attribute information defined in the target DOM node;

a rendering unit 650, configured to render the target HTML module according to a relationship between the plurality of target resources;

The determining unit 660 is configured to determine whether the DOM node of all the HTML modules is traversed;

The determining unit 670 is configured to: if the DOM node of all the HTML modules is traversed, the determination is completed. Rendering of the HTML page.

In an optional implementation, the request unit 640 can include (not shown in FIG. 6):

An information reading subunit, configured to read attribute information of the target DOM node, and obtain a resource path of multiple target resources of the target HTML module;

The request sending subunit is configured to send, according to the resource path of each target resource, a resource request for acquiring the target resource to the server in parallel by calling JavaScript.

In another optional implementation, the rendering unit 650 can include (not shown in FIG. 6):

a status setting subunit, configured to set a request status for each resource request, where the request status is used to mark whether a corresponding target resource has been acquired;

a module synthesizing subunit, configured to: when the target resources are acquired according to the set request status, sequentially load the target resource according to the dependency relationship between the target resources, and synthesize the target HTML module;

And a module adding unit, configured to add the HTML module to the target DOM node to complete rendering of the target HTML module.

In another optional implementation, each HTML module of the HTML page includes:

a plurality of parent HTML modules divided by the HTML page; and/or,

Multiple sub-HTML modules that are partitioned into any parent HTML module.

The implementation process of the function and the function of each unit in the foregoing device is specifically described in the implementation process of the corresponding steps in the foregoing method, and details are not described herein again.

For the device embodiment, since it basically corresponds to the method embodiment, reference may be made to the partial description of the method embodiment. The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separate, and the components displayed as units may or may not be physical units, ie may be located A place, or it can be distributed to multiple network units. Some or all of the modules may be selected according to actual needs to achieve the objectives of the present application. Those of ordinary skill in the art are not creative In the case of labor, it can be understood and implemented.

It can be seen from the above embodiment that when each HTML module is rendered by applying the embodiment of the present application, all the resources of the HTML module are requested in parallel through the attribute information of the predefined DOM node, so the resource acquisition speed is faster, and all resources are acquired. These resources can be loaded automatically later, thus saving resource load time and thus improving the rendering speed of the HTML page as a whole.

Other embodiments of the present application will be readily apparent to those skilled in the <RTIgt; The application is intended to cover any variations, uses, or adaptations of the application, which are in accordance with the general principles of the application and include common general knowledge or common technical means in the art that are not disclosed herein. . The specification and examples are to be regarded as illustrative only,

It is to be understood that the invention is not limited to the details of the details and The scope of the present application is limited only by the accompanying claims.

Claims

A page rendering method, wherein the method is applied to a client device, including:

When accessing the hypertext markup language HTML page through the browser, traversing the file object model DOM node of each HTML module of the HTML page;

When traversing to the target DOM node of the current target HTML module, requesting, according to the attribute information defined in the target DOM node, multiple target resources of the target HTML module to the server in parallel;

Rendering the target HTML module according to a relationship between the plurality of target resources.
The method according to claim 1, wherein before the traversing the DOM node of each HTML module of the HTML page, the method further comprises:

Dividing the HTML page into a plurality of HTML modules;

The attribute information of the DOM node of each HTML module is defined by a WEB native layout, and the DOM node is used to mark an area of the HTML module in the HTML page, where the attribute information includes a resource path of a plurality of resources of the HTML module.
The method according to claim 2, wherein the requesting, in the target DOM node, the plurality of target resources of the target HTML module in parallel according to the attribute information defined in the target DOM node comprises:

Reading attribute information of the target DOM node to obtain resource paths of multiple target resources of the target HTML module;

According to the resource path of each target resource, a resource request for acquiring the target resource is sent in parallel to the server by calling JavaScript.
The method according to claim 3, wherein the rendering the target HTML module according to the relationship between the plurality of target resources comprises:

Setting a request status for each resource request, the request status is used to mark whether a corresponding target resource has been acquired;

When it is determined that all the target resources are acquired according to the set request status, the target HTML modules are synthesized after sequentially loading the target resources according to the dependency relationship between the target resources;

Adding the target HTML module to the target DOM node to complete rendering of the target HTML module.
The method of claim 1 further comprising:

Determine whether to traverse the DOM nodes of all HTML modules;

If the DOM nodes of all HTML modules are traversed, it is determined that the rendering of the HTML page is completed.
The method according to any one of claims 1 to 5, wherein each HTML module of the HTML page comprises:

a plurality of parent HTML modules divided by the HTML page; and/or,

Multiple sub-HTML modules that are partitioned into any parent HTML module.
The method according to any one of claims 1 to 5, wherein the resources of the HTML module comprise: an HTML file, a cascading style sheet CSS file, a JS file, and an object tag JSON data.
A page rendering apparatus, wherein the apparatus is applied to a client device, the apparatus comprising:

a traversing unit for traversing a file object model DOM node of each HTML module of the HTML page when accessing the HTML page through the browser;

a requesting unit, configured to, when traversing to a target DOM node of the current target HTML module, request a plurality of target resources of the target HTML module in parallel according to the attribute information defined in the target DOM node;

a rendering unit, configured to render the target HTML module according to a relationship between the plurality of target resources.
The device according to claim 8, wherein the device further comprises:

a dividing unit, configured to divide the HTML page into multiple HTML modules;

Define a unit for defining the DOM node of each HTML module through the WEB native layout Attribute information, the DOM node is used to mark an area of the HTML module in the HTML page, and the attribute information includes resource paths of multiple resources of the HTML module.
The device according to claim 9, wherein the requesting unit comprises:

An information reading subunit, configured to read attribute information of the target DOM node, and obtain a resource path of multiple target resources of the target HTML module;

The request sending subunit is configured to send, according to the resource path of each target resource, a resource request for acquiring the target resource to the server in parallel by calling JavaScript.
The apparatus according to claim 10, wherein the rendering unit comprises:

a status setting subunit, configured to set a request status for each resource request, where the request status is used to mark whether a corresponding target resource has been acquired;

a module synthesizing subunit, configured to: when the target resources are acquired according to the set request status, sequentially load the target resource according to the dependency relationship between the target resources, and synthesize the target HTML module;

a module adding unit, configured to add the target HTML module to the target DOM node to complete rendering of the target HTML module.
The device according to claim 8, wherein the device further comprises:

a determining unit, configured to determine whether to traverse the DOM node of all HTML modules;

A determining unit is configured to complete rendering of the HTML page if the DOM node of all HTML modules is traversed.
The device according to any one of claims 8 to 12, wherein each HTML module of the HTML page comprises:

a plurality of parent HTML modules divided by the HTML page; and/or,

Multiple sub-HTML modules that are partitioned into any parent HTML module.
A client device, comprising:

a processor; a memory for storing the processor executable instructions;

Wherein the processor is configured to:

Traversing each HTML of the HTML page when accessing the HTML page through a browser The file object model DOM node of the module;

When traversing to the target DOM node of the current target HTML module, requesting, according to the attribute information defined in the target DOM node, multiple target resources of the target HTML module to the server in parallel;

Rendering the target HTML module according to a relationship between the plurality of target resources.