CN115168774A

CN115168774A - Webpage rendering method and system, electronic equipment and computer readable storage medium

Info

Publication number: CN115168774A
Application number: CN202210899027.3A
Authority: CN
Inventors: 孙凤超
Original assignee: Inspur Jinan data Technology Co ltd
Current assignee: Inspur Jinan data Technology Co ltd
Priority date: 2022-07-28
Filing date: 2022-07-28
Publication date: 2022-10-11

Abstract

The application discloses a webpage rendering method, a webpage rendering system, electronic equipment and a computer readable storage medium, and relates to the technical field of webpage application, wherein the webpage rendering method comprises the following steps: when a page updating request is received, acquiring an HTLM file corresponding to the page updating request, and generating a basic DOM tree based on the HTLM file; executing processing operation through a DOM rendering component in the JS script, wherein the processing operation comprises the following steps: generating a first virtual DOM tree based on the HTLM file, and executing DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree; rendering the second virtual DOM tree to the basic DOM tree to obtain a DOM tree; and generating a rendering tree based on the DOM tree, and drawing the rendering tree on the page corresponding to the page updating request. According to the method and the device, the interface rendering efficiency can be prevented from being improved, the problem that the browser rendering is blocked due to the complex interface elements is reduced, and the front-end user experience is improved.

Description

Webpage rendering method and system, electronic equipment and computer readable storage medium

Technical Field

The present application relates to the field of web page applications, and in particular, to a web page rendering method, a web page rendering system, an electronic device, and a computer-readable storage medium.

Background

With the continuous development of networks, various web page displays are in endless numbers. The rich and colorful page elements enrich the experience of people in browsing the webpage and bring huge pressure to the browser in rendering the page. When the number of page elements becomes larger and the page style becomes richer, due to the limitation of a browser rendering DOM (Document Object Model) mechanism, a JS (JavaScript, a lightweight, interpreted, or just-in-time compiled programming language) script is required to adjust the DOM structure, and each adjustment of the DOM causes redrawing and reflowing, thereby affecting the browser rendering performance. In addition, with the popularization of dynamic websites, the interactivity of the web pages is improved, so that developers need to frequently use JS scripts to adjust the DOM structure, frequent redrawing and backflow can be caused, and the rendering pressure of the browser is further aggravated.

Therefore, how to provide a solution to the above technical problems is a problem that needs to be solved by those skilled in the art.

Disclosure of Invention

The application aims to provide a webpage rendering method, a webpage rendering system, electronic equipment and a computer-readable storage medium, which can avoid improving interface rendering efficiency, reduce the problem of browser rendering blockage caused by complex interface elements and improve front-end user experience.

In order to solve the technical problem, the present application provides a web page rendering method, which is applied to a browser, and the web page rendering method includes:

when a page updating request is received, acquiring an HTLM (hypertext markup language) file corresponding to the page updating request, and generating a basic DOM (document object model) tree based on the HTLM file;

executing a processing operation through a DOM rendering component in the JS script, wherein the processing operation comprises: generating a first virtual DOM tree based on the HTLM file, and executing DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree;

rendering the second virtual DOM tree to the basic DOM tree to obtain a DOM tree;

and generating a rendering tree based on the DOM tree, and drawing the rendering tree to a page corresponding to the page updating request.

Optionally, the process of executing the DOM operation in the JS script on the first virtual DOM tree includes:

analyzing the initial DOM operation in the JS script;

and modifying the operation object of each initial DOM operation into the first virtual DOM tree to obtain a target DOM operation corresponding to the initial DOM operation, so that the target DOM operation is executed on the first virtual DOM tree when the JS script is executed.

Optionally, the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding to the initial DOM operation one to one.

Optionally, the executing, to the first virtual DOM tree, the DOM operation in the JS script, and the process of obtaining the second virtual DOM tree includes:

and executing all DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree.

Optionally, the process of executing the processing operation through the DOM rendering component in the JS script includes:

and when the page updating request is received, loading a DOM rendering component in the JS script so as to execute processing operation through the DOM rendering component.

Optionally, the process of generating a rendering tree based on the DOM tree includes:

and adjusting the DOM tree according to a preset rule corresponding to the page updating request to obtain a rendering tree.

Optionally, the webpage rendering method further includes:

when the page updating request is received, obtaining a CSS file corresponding to the page updating request, and generating the CSS rule tree based on the CSS file;

the process of adjusting the DOM tree according to the preset rule corresponding to the page updating request to obtain the rendering tree comprises the following steps:

and adjusting the DOM tree based on the CSS rule tree to generate a rendering tree.

In order to solve the above technical problem, the present application further provides a web page rendering system, which is applied to a browser, and the web page rendering system includes:

the system comprises a first processing module, a second processing module and a third processing module, wherein the first processing module is used for acquiring an HTLM (hypertext markup language) file corresponding to a page updating request when the page updating request is received, and generating a basic DOM (document object model) tree based on the HTLM file;

a second processing module, configured to perform a processing operation through a DOM rendering component in the JS script, where the processing operation includes: generating a first virtual DOM tree based on the HTLM file, and executing DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree;

the third processing module is used for rendering the second virtual DOM tree to the basic DOM tree to obtain a DOM tree;

and the display module is used for generating a rendering tree based on the DOM tree and drawing the rendering tree to a page corresponding to the page updating request.

In order to solve the above technical problem, the present application further provides an electronic device, including:

a memory for storing a computer program;

a processor for implementing the steps of the web page rendering method as claimed in any one of the above when the computer program is executed.

To solve the above technical problem, the present application further provides a computer-readable storage medium having a computer program stored thereon, where the computer program is executed by a processor to implement the steps of the web page rendering method according to any one of the above.

The application provides a webpage rendering method, when a browser receives a webpage updating request, an HTLM file corresponding to the webpage updating request is obtained firstly, a basic DOM tree is generated, then a DOM rendering component in a JS script generates a virtual DOM tree based on the HTLM file obtained by the browser, the operation of the JS script on the basic DOM tree is transferred to the virtual DOM tree to be executed through the DOM rendering component, the virtual DOM tree is only of a data structure, so that the operation of the JS script on the virtual DOM tree does not involve redrawing and backflow, the virtual DOM tree is treated to be completed, the operation is rendered on the basic DOM tree to obtain a rendering tree, the rendering tree is drawn on a page, and the page rendering is completed. By the aid of the method and the device, redrawing and backflow caused by frequent operation of the basic DOM tree by the JS script are avoided, interface rendering efficiency is greatly improved, the problem of unsmooth rendering of the browser due to the fact that interface elements are complex and lead to is reduced to the greatest extent, and front-end user experience is improved. The application also provides a webpage rendering system, electronic equipment and a computer readable storage medium, which have the same beneficial effects as the webpage rendering method.

Drawings

In order to more clearly illustrate the embodiments of the present application, the drawings required for the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained by those skilled in the art without inventive effort.

Fig. 1 is a flowchart illustrating steps of a web page rendering method according to the present application;

FIG. 2 is a flow chart of another web page rendering method provided in the present application;

fig. 3 is a schematic structural diagram of a web page rendering system provided in the present application.

Detailed Description

The core of the application is to provide a webpage rendering method, a webpage rendering system, electronic equipment and a computer-readable storage medium, which can avoid improving interface rendering efficiency, reduce the problem of browser rendering blockage caused by complex interface elements, and improve front-end user experience.

In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

Referring to fig. 1, fig. 1 is a flowchart illustrating steps of a web page rendering method implemented by a browser end according to the present application, where the web page rendering method includes:

s101: when a page updating request is received, acquiring an HTLM (hypertext markup language) file corresponding to the page updating request, and generating a basic DOM (document object model) tree based on the HTLM file;

the page update request may be generated by a user clicking a URL (Uniform Resource Locator) on a current page, may be generated by the user inputting an address corresponding to a certain page in an address bar of a browser, and may also be generated by reaching a certain trigger condition, where the trigger condition includes, but is not limited to, reaching a preset page update time.

Specifically, after receiving a page update request, the browser acquires an HTLM (hypertext markup language) file corresponding to the page update request, and then parses the HTLM file, thereby constructing a basic DOM tree, wherein the basic DOM tree expresses the HTLM file in a tree structure, the end point of each branch of the tree is a node, and each node includes an object. The DOM links pages with scripts or programming languages, and the structure, style, or content of a node can be changed by methods provided by the DOM.

S102: executing processing operation through a DOM rendering component in the JS script, wherein the processing operation comprises the following steps: generating a first virtual DOM tree based on the HTLM file, and executing DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree;

specifically, in the prior art, the basic DOM tree is operated through the JS script, but redrawing and backflow can be caused by each operation, and in order to avoid frequently operating the basic DOM tree, a DOM rendering component is added in the JS script in advance. When the browser needs to update the page, the virtual DOM tree is generated through the DOM rendering component in the JS script, so that the JS script operates the virtual DOM tree and does not directly operate the basic DOM tree.

As an alternative embodiment, the process of performing the processing operation by the DOM rendering component in the JS script includes:

Specifically, the DOM rendering component is added to a first JS file in the JS script, when the webpage updating operation needs to be executed, the JS script in the webpage updating request is loaded, so that the DOM rendering component is loaded firstly, the DOM rendering component comprises a DOM constructing module, a virtual DOM module and a drawing module, in the loading process of the DOM rendering component, the DOM constructing module acquires an HTLM file, the HTLM file is the HTLM file acquired by a browser, the DOM constructing module generates a first virtual DOM tree based on the HTLM file, the virtual DOM module receives DOM operation in the JS script, and performs related processing on the DOM operation, so that when the JS script is normally executed, the DOM operation in the JS script is executed on the first virtual DOM tree, and the basic DOM tree is not operated, and therefore execution efficiency is improved. It can be understood that the JS script executes DOM operations on the first virtual DOM tree, that is, adjusts the structure of the first virtual DOM tree, to obtain the second virtual DOM tree, and in consideration of the fact that there may be a plurality of methods for operating DOM trees in the JS script, that is, a plurality of DOM operations, the drawing module outputs the obtained second virtual DOM tree according to a preset rule, the second virtual DOM tree may be a virtual DOM tree obtained after n DOM operations have been executed on the first virtual DOM tree, and n is an integer greater than 1.

S103: rendering the second virtual DOM tree to the basic DOM tree to obtain a DOM tree;

s104: and generating a rendering tree based on the DOM tree, and drawing the rendering tree on the page corresponding to the page updating request.

Specifically, on the virtual DOM tree of second was played up basic DOM tree, just need carry out a small amount of operations to basic DOM tree in this step, reduced the number of times of redrawing and backward flow, very big promotion interface rendering efficiency, then based on DOM tree generation render tree to on drawing the page that corresponds, accomplish the page and play up, can be at utmost reduce because the complicated browser that leads to of interface element plays up the card and pause the problem, promote front end user experience.

It can be seen that, in this embodiment, when a page update request is received, first, an HTLM file corresponding to the page update request is obtained, a basic DOM tree is generated, then, a DOM rendering component in the JS script generates a virtual DOM tree based on the HTLM file obtained by the browser, and an operation that the JS script needs to operate the basic DOM tree is transferred to the virtual DOM tree by the DOM rendering component to be executed. According to the embodiment, redrawing and backflow caused by frequent operation of the basic DOM tree by the JS script are avoided, the interface rendering efficiency is greatly improved, the problem of unsmooth rendering of the browser due to the fact that interface elements are complex is reduced to the greatest extent, and the front-end user experience is improved.

On the basis of the above-described embodiment:

as an alternative embodiment, the process of executing the DOM operation in the JS script on the first virtual DOM tree includes:

analyzing an initial DOM operation in the JS script;

and modifying the operation object of each initial DOM operation into a first virtual DOM tree to obtain a target DOM operation corresponding to the initial DOM operation, so that when the JS script is executed, the target DOM operation is executed on the first virtual DOM tree.

Specifically, the virtual DOM module in the DOM rendering component receives initial DOM operation in the JS script, and rewrite each initial DOM operation, modify the operation object corresponding to each initial DOM operation into a first virtual DOM tree, so that the operation on the basic DOM tree is executed on the virtual DOM tree, prevent the JS script from directly operating the basic DOM tree on the browser, because the virtual DOM tree is only a data structure and does not relate to drawing, therefore, the execution efficiency is higher, and thus, a layer of virtual DOM is added between the JS script and an actual DOM layer for isolation, thereby avoiding redrawing and backflow caused by frequent operation of the basic DOM tree by the JS script, greatly improving the interface rendering efficiency, reducing the problem of browser rendering card pause caused by the complexity of interface elements to the maximum extent, and improving the front-end user experience.

As an alternative embodiment, the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding to the initial DOM operation.

Specifically, when the rewriting operation is executed, the operation names of the initial DOM operation and the rewritten target DOM operation are guaranteed to be the same, namely, the DOM rewriting method is guaranteed to be consistent in name, when the JS script is normally executed, if the operation names are consistent, the latest version with the same name, namely the latest DOM operation, namely the rewritten target DOM operation, can be executed, so that the operation on the basic DOM tree is executed on the virtual DOM tree, the redrawing and the backflow caused by the fact that the JS script frequently operates the basic DOM tree are avoided, and the interface rendering efficiency is greatly improved.

As an alternative embodiment, the process of executing a DOM operation in the JS script on the first virtual DOM tree to obtain the second virtual DOM tree includes:

Specifically, in order to further reduce the operation to basic DOM tree, can be after having executed all DOM operations that need to be executed to first virtual DOM tree, the virtual DOM tree that obtains is rendered to basic DOM tree, adopt the scheme of this embodiment, only need carry out once operation to basic DOM tree, also only need accomplish once redrawing and backward flow, very big promotion interface rendering efficiency, especially there is very big promotion to interface rendering performance under the big data volume, the browser that furthest's reduction leads to because interface element is complicated renders the card problem, promote front end user experience.

As an alternative embodiment, the process of generating the rendering tree based on the DOM tree includes:

As an optional embodiment, the method for rendering a web page further includes:

when a page updating request is received, obtaining a CSS file corresponding to the page updating request, and generating a CSS rule tree based on the CSS file;

Specifically, considering that different pages have further limitations on the tag style, font, and the like of data, after receiving a page update request, the browser acquires a CSS file corresponding to the page update request, and generates a CSS rule tree based on the CSS file, where the CSS rule tree is also a data structure, and adjusts the DOM number again according to the CSS rule tree, for example, adjusts the font, tag style, color, and the like of the DOM tree, thereby obtaining a render tree, and draws the render tree on the page to complete page rendering.

Referring to fig. 2, as a preferred embodiment, the webpage rendering process includes:

when a browser receives a page updating request, the browser obtains an HTML file and a CSS file corresponding to the page updating request, the browser generates a basic DOM tree based on the HTML file, generates a CSS rule tree based on the CSS file, loads a DOM rendering component, a DOM constructing module in the component reads the HTML file to generate a virtual DOM tree, and the virtual DOM module rewrites a method for operating the DOM to prevent a JS script from directly operating the basic DOM tree on the browser and normally execute the JS script.

To sum up, this application has packaged a DOM and has played up the subassembly, plays up the subassembly through this DOM, and the use JS script adjustment interface that front end developer can be convenient shows and needn't worry redrawing and backward flow that frequent operation DOM arouses, and efficiency is played up to very big promotion interface. The interface rendering performance under large data volume is greatly improved. The problem of browser rendering blocking caused by complex interface elements is reduced to the maximum extent, and front-end user experience is improved.

Referring to fig. 3, fig. 3 is a schematic structural diagram of a web page rendering system applied to a browser, the web page rendering system including:

the first processing module 1 is used for acquiring an HTLM (hypertext markup language) file corresponding to a page updating request when the page updating request is received, and generating a basic DOM (document object model) tree based on the HTLM file;

a second processing module 2, configured to execute a processing operation through the DOM rendering component in the JS script, where the processing operation includes: generating a first virtual DOM tree based on the HTLM file, and executing DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree;

the third processing module 3 is used for rendering the second virtual DOM tree to the basic DOM tree to obtain a DOM tree;

and the display module 4 is used for generating a rendering tree based on the DOM tree and drawing the rendering tree to a page corresponding to the page updating request.

The page update request may be generated by a user clicking a URL on a current page, may be generated by the user inputting an address corresponding to a certain page in an address bar of a browser, and may also be generated by reaching a certain trigger condition, where the trigger condition includes, but is not limited to, reaching a preset page update time.

Specifically, after receiving the page update request, the first processing module 1 obtains an HTLM (hypertext markup language) file corresponding to the page update request, and then parses the HTLM file, thereby constructing a basic DOM tree, where the basic DOM tree expresses the HTLM file in a tree structure, an end point of each branch of the tree is a node, and each node includes an object. The DOM links pages with scripts or programming languages, and the structure, style, or content of a node can be changed by methods provided by the DOM.

Specifically, in the prior art, the basic DOM tree is operated through the JS script, but redrawing and backflow can be caused by each operation, and in order to avoid frequently operating the basic DOM tree, a DOM rendering component is added in the JS script in advance. When the browser needs to update the page, the second processing module 2 generates the virtual DOM tree through the DOM rendering component in the JS script, so that the JS script operates the virtual DOM tree, and does not directly operate the basic DOM tree.

Specifically, the third processing device renders the second virtual DOM tree onto the basic DOM tree, performs a small amount of operations on the basic DOM tree, reduces the times of redrawing and reflowing, greatly improves the interface rendering efficiency, generates a rendering tree based on the DOM tree, and renders the rendering tree onto a corresponding page to complete page rendering.

It can be seen that, in this embodiment, when a page update request is received, first, an HTLM file corresponding to the page update request is obtained, a basic DOM tree is generated, then, a DOM rendering component in the JS script generates a virtual DOM tree based on the HTLM file obtained by the browser, and an operation that the JS script needs to operate the basic DOM tree is transferred to the virtual DOM tree by the DOM rendering component to be executed. According to the embodiment, redrawing and backflow caused by frequent operation of the basic DOM tree by the JS script are avoided, the interface rendering efficiency is greatly improved, the problem of unsmooth rendering of the browser due to the complex interface elements is reduced to the greatest extent, and the front-end user experience is improved.

analyzing an initial DOM operation in the JS script;

Specifically, the DOM rendering component receives initial DOM operations in the JS script, rewrites each initial DOM operation, modifies an operation object corresponding to each initial DOM operation into a first virtual DOM tree, executes the operations on the basic DOM tree, and prevents the JS script from directly operating the basic DOM tree on the browser.

As an alternative embodiment, the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding to the initial DOM operation one by one.

Specifically, when the rewriting operation is executed, the operation names of the initial DOM operation and the rewritten target DOM operation are ensured to be the same, namely, the method for rewriting the operation DOM is ensured to be consistent in name, and when the JS script is normally executed, if the names are consistent, the latest version with the same name, namely the latest DOM operation, namely, the rewritten target DOM operation is executed, so that the operation on the basic DOM tree is executed on the virtual DOM tree.

In order to further reduce the operation to the basic DOM tree, can be after having executed all DOM operations that need to be executed to first virtual DOM tree, the virtual DOM tree that obtains is rendered to basic DOM tree, adopt the scheme of this embodiment, only need carry out once operation to basic DOM tree, also only need accomplish once and redraw and backward flow, very big promotion interface rendering efficiency, especially have very big promotion to the interface rendering performance under the big data bulk, the browser that furthest reduction leads to because interface element is complicated renders the card and pause problem, promote front end user experience.

As an optional embodiment, the web page rendering system further comprises:

the fourth processing module is used for acquiring a CSS file corresponding to the page updating request when the page updating request is received, and generating a CSS rule tree based on the CSS file;

Specifically, in consideration of the fact that different pages have further limitations on the tag style, the font and the like of data, after the browser receives the page update request, the fourth processing module obtains the CSS file corresponding to the page update request, and generates the CSS rule tree based on the CSS file, where the CSS rule tree is also a data structure, and adjusts the DOM number again according to the CSS rule tree, for example, adjusts the font, the tag style, the color and the like of the DOM tree, so as to obtain the render tree.

In another aspect, the present application further provides an electronic device, including:

a memory for storing a computer program;

a processor for implementing the steps of the web page rendering method as described in any one of the above embodiments when executing the computer program.

Specifically, the memory includes a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and computer readable instructions, and the internal memory provides an environment for the operating system and the computer readable instructions in the non-volatile storage medium to run. The processor provides computing and control capabilities for the electronic device, and when executing the computer program stored in the memory, may perform the steps of: when a page updating request is received, acquiring an HTLM (hypertext markup language) file corresponding to the page updating request, and generating a basic DOM (document object model) tree based on the HTLM file; executing processing operation through a DOM rendering component in the JS script, wherein the processing operation comprises the following steps: generating a first virtual DOM tree based on the HTLM file, and executing DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree; rendering the second virtual DOM tree to the basic DOM tree to obtain a DOM tree; and generating a rendering tree based on the DOM tree, and drawing the rendering tree on the page corresponding to the page updating request.

As an alternative embodiment, when the processor executes the computer subprogram stored in the memory, the following steps may be implemented: analyzing the initial DOM operation in the JS script; and modifying the operation object of each initial DOM operation into a first virtual DOM tree, and obtaining a target DOM operation corresponding to the initial DOM operation, so that when the JS script is executed, the target DOM operation is executed on the first virtual DOM tree.

As an alternative embodiment, the processor, when executing the computer subroutine stored in the memory, may perform the following steps: analyzing an initial DOM operation in the JS script; modifying the operation object of each initial DOM operation into a first virtual DOM tree to obtain a target DOM operation corresponding to the initial DOM operation, so that when the JS script is executed, the target DOM operation is executed on the first virtual DOM tree; the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding to the initial DOM operation one by one.

As an alternative embodiment, the processor, when executing the computer subroutine stored in the memory, may perform the following steps: and executing all DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree.

As an alternative embodiment, the processor, when executing the computer subroutine stored in the memory, may perform the following steps: and when the page updating request is received, loading the DOM rendering component in the JS script so as to execute the processing operation through the DOM rendering component.

As an alternative embodiment, when the processor executes the computer subprogram stored in the memory, the following steps may be implemented: and adjusting the DOM tree according to a preset rule corresponding to the page updating request to obtain a rendering tree.

As an alternative embodiment, when the processor executes the computer subprogram stored in the memory, the following steps may be implemented: when a page updating request is received, obtaining a CSS file corresponding to the page updating request, and generating a CSS rule tree based on the CSS file; and adjusting the DOM tree based on the CSS rule tree to generate a rendering tree.

On the basis of the above embodiment, as a preferred embodiment, the electronic device further includes:

and the input interface is connected with the processor and used for acquiring computer programs, parameters and instructions imported from the outside and storing the computer programs, the parameters and the instructions into the memory under the control of the processor. The input interface may be coupled to an input device for receiving parameters or instructions manually entered by a user. The input device can be a touch layer covered on a display screen, and can also be a key, a track ball or a touch pad arranged on a terminal shell.

And the display unit is connected with the processor and is used for displaying the data sent by the processor. The display unit can be a liquid crystal display screen or an electronic ink display screen.

And the network port is connected with the processor and is used for carrying out communication connection with each external terminal device. The communication technology adopted by the communication connection can be a wired communication technology or a wireless communication technology, such as a mobile high definition link (MHL) technology, a Universal Serial Bus (USB), a High Definition Multimedia Interface (HDMI), a wireless fidelity (WiFi), a bluetooth communication technology, a low power consumption bluetooth communication technology, an ieee802.11 s-based communication technology, and the like.

In another aspect, the present application further provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, implements the steps of the webpage rendering method as described in any one of the above embodiments.

Specifically, the computer-readable storage medium may include: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk. The storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of: when a page updating request is received, acquiring an HTLM (hypertext markup language) file corresponding to the page updating request, and generating a basic DOM (document object model) tree based on the HTLM file; executing processing operation through a DOM rendering component in the JS script, wherein the processing operation comprises the following steps: generating a first virtual DOM tree based on the HTLM file, and executing DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree; rendering the second virtual DOM tree to the basic DOM tree to obtain a DOM tree; and generating a rendering tree based on the DOM tree, and drawing the rendering tree on the page corresponding to the page updating request.

As an alternative embodiment, when executed by a processor, a computer subroutine stored in a computer readable storage medium may specifically implement the steps of: analyzing the initial DOM operation in the JS script; and modifying the operation object of each initial DOM operation into a first virtual DOM tree to obtain a target DOM operation corresponding to the initial DOM operation, so that when the JS script is executed, the target DOM operation is executed on the first virtual DOM tree.

As an alternative embodiment, when executed by a processor, a computer subroutine stored in a computer readable storage medium may specifically implement the following steps: analyzing the initial DOM operation in the JS script; modifying the operation object of each initial DOM operation into a first virtual DOM tree to obtain a target DOM operation corresponding to the initial DOM operation, so that when the JS script is executed, the target DOM operation is executed on the first virtual DOM tree; the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding to the initial DOM operation one by one.

As an alternative embodiment, when executed by a processor, a computer subroutine stored in a computer readable storage medium may specifically implement the following steps: and executing all DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree.

As an alternative embodiment, when executed by a processor, a computer subroutine stored in a computer readable storage medium may specifically implement the following steps: and when the page updating request is received, loading the DOM rendering component in the JS script so as to execute the processing operation through the DOM rendering component.

As an alternative embodiment, when executed by a processor, a computer subroutine stored in a computer readable storage medium may specifically implement the following steps: and adjusting the DOM tree according to a preset rule corresponding to the page updating request to obtain a rendering tree.

As an alternative embodiment, when executed by a processor, a computer subroutine stored in a computer readable storage medium may specifically implement the following steps: when a page updating request is received, acquiring a CSS file corresponding to the page updating request, and generating a CSS rule tree based on the CSS file; and adjusting the DOM tree based on the CSS rule tree to generate a rendering tree.

It is further noted that, in the present specification, relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrases "comprising a," "8230," "8230," or "comprising" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the application. Thus, the present application is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A webpage rendering method is applied to a browser and comprises the following steps:

2. The webpage rendering method according to claim 1, wherein the process of executing the DOM operation in the JS script on the first virtual DOM tree comprises:

analyzing the initial DOM operation in the JS script;

3. The web page rendering method according to claim 2, wherein the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding to the initial DOM operation.

4. The webpage rendering method according to claim 1, wherein the step of executing the DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree comprises:

5. The web page rendering method according to claim 1, wherein the process of performing the processing operation by the DOM rendering component in the JS script comprises:

6. The web page rendering method according to any one of claims 1 to 5, wherein the process of generating the rendering tree based on the DOM tree comprises:

7. The web page rendering method of claim 6, further comprising:

8. A web page rendering system applied to a browser, the web page rendering system comprising:

the system comprises a first processing module, a second processing module and a third processing module, wherein the first processing module is used for acquiring an HTLM (hypertext markup language) file corresponding to a page updating request when receiving the page updating request and generating a basic DOM (document object model) based on the HTLM file;

9. An electronic device, comprising:

a memory for storing a computer program;

a processor for implementing the steps of the web page rendering method of any one of claims 1-7 when executing the computer program.

10. A computer-readable storage medium, characterized in that the computer-readable storage medium has stored thereon a computer program which, when being executed by a processor, carries out the steps of the web page rendering method according to any one of claims 1 to 7.