Web page rendering method, system, electronic device and computer-readable storage medium

Abstract

This application discloses a webpage rendering method, system, electronic device, and computer-readable storage medium, relating to the field of webpage application technology. The webpage rendering method includes: upon receiving a page update request, obtaining an HTLM file corresponding to the page update request, and generating a basic DOM tree based on the HTLM file; performing processing operations through a DOM rendering component in a JS script, the processing operations including: generating a first virtual DOM tree based on the HTLM file, performing DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree; rendering the second virtual DOM tree onto the basic DOM tree to obtain a DOM tree; generating a rendering tree based on the DOM tree, and drawing the rendering tree onto the page corresponding to the page update request. This application can improve interface rendering efficiency, reduce browser rendering lag caused by complex interface elements, and enhance the front-end user experience.

Description

Technical Field

[0001] The present application relates to the field of web page application technology, and in particular to a web page rendering method, system, electronic device, and computer-readable storage medium. Background Art

[0002] With the continuous development of the Internet, a variety of web page displays have emerged one after another. While the colorful page elements enrich people's web browsing experience, they also put tremendous pressure on the browser to render the page. When the number of page elements becomes larger and larger and the page styles become richer and richer, due to the limitations of the browser's rendering DOM (Document Object Model) mechanism, it is necessary to use JS (JavaScript, a lightweight, interpreted or just-in-time compiled programming language with function priority) scripts to adjust the DOM structure. Each adjustment to the DOM will cause redrawing and reflow, thereby affecting the browser rendering performance. In addition, with the popularization of dynamic websites, the interactivity of web pages has been improved, requiring developers to frequently use JS scripts to adjust the DOM structure, which will lead to frequent redrawing and reflow, further exacerbating the browser's rendering pressure.

[0003] Therefore, how to provide a solution to the above technical problems is a problem that those skilled in the art need to solve at present. Summary of the Invention

[0004] The purpose of this application is to provide a web page rendering method, system, electronic device and computer-readable storage medium, which can avoid improving interface rendering efficiency, reduce browser rendering jams caused by complex interface elements, and improve front-end user experience.

[0005] To solve the above technical problems, the present application provides a web page rendering method, which is applied to a browser. The web page rendering method includes:

[0006] When a page update request is received, the HTML file corresponding to the page update request is obtained, and a basic DOM tree is generated based on the HTML file;

[0007] Executing a processing operation through a DOM rendering component in a JS script, the processing operation comprising: generating a first virtual DOM tree based on the HTLM file, and executing the DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree;

[0008] Rendering the second virtual DOM tree onto the basic DOM tree to obtain a DOM tree;

[0009] A rendering tree is generated based on the DOM tree, and the rendering tree is drawn on the page corresponding to the page update request.

[0010] Optionally, the process of performing the DOM operation in the JS script on the first virtual DOM tree includes:

[0011] Parsing the initial DOM operations in the JS script;

[0012] The operation object of each of the initial DOM operations is modified to the first virtual DOM tree, and a target DOM operation corresponding to the initial DOM operation is obtained, so that the target DOM operation is performed on the first virtual DOM tree when the JS script is executed.

[0013] Optionally, the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding thereto.

[0014] Optionally, the process of performing the DOM operation in the JS script on the first virtual DOM tree to obtain the second virtual DOM tree includes:

[0015] All the DOM operations in the JS script are executed on the first virtual DOM tree to obtain a second virtual DOM tree.

[0016] Optionally, the process of performing the processing operation through the DOM rendering component in the JS script includes:

[0017] When the page update request is received, the DOM rendering component in the JS script is loaded so that the processing operation is performed through the DOM rendering component.

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

[0019] The DOM tree is adjusted according to a preset rule corresponding to the page update request to obtain a rendering tree.

[0020] Optionally, the webpage rendering method further includes:

[0021] When receiving the page update request, obtaining a CSS file corresponding to the page update request, and generating the CSS rule tree based on the CSS file;

[0022] The process of adjusting the DOM tree according to the preset rules corresponding to the page update request to obtain a rendering tree includes:

[0023] The DOM tree is adjusted based on the CSS rule tree to generate a rendering tree.

[0024] To solve the above technical problems, the present application further provides a web page rendering system, which is applied to a browser and includes:

[0025] A first processing module is configured to, upon receiving a page update request, obtain an HTLM file corresponding to the page update request and generate a basic DOM tree based on the HTLM file;

[0026] a second processing module, configured to perform a processing operation through a DOM rendering component in a JS script, the processing operation comprising: generating a first virtual DOM tree based on the HTLM file, and performing the DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree;

[0027] A third processing module is configured to render the second virtual DOM tree onto the basic DOM tree to obtain a DOM tree;

[0028] A display module is configured to generate a rendering tree based on the DOM tree, and draw the rendering tree onto a page corresponding to the page update request.

[0029] To solve the above technical problems, the present application further provides an electronic device, comprising:

[0030] memory for storing computer programs;

[0031] A processor is configured to implement the steps of any one of the webpage rendering methods described above when executing the computer program.

[0032] To solve the above technical problems, the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the web page rendering method as described in any one of the above are implemented.

[0033] The present application provides a web page rendering method. When a browser receives a page update request, it first obtains the HTLM file corresponding to the page update request and generates a basic DOM tree. Then, a virtual DOM tree is generated based on the HTLM file obtained by the browser through the DOM rendering component in the JS script, and the operations that the JS script needs to perform on the basic DOM tree are transferred to the virtual DOM tree through the DOM rendering component. Since the virtual DOM tree is only a data structure, the operations of the JS script on the virtual DOM tree do not involve redrawing and reflow. After the processing of the virtual DOM tree is completed, it is rendered to the basic DOM tree to obtain a rendering tree, and drawn onto the page to complete the page rendering. The present application avoids the redrawing and reflow caused by the frequent operation of the basic DOM tree by the JS script, greatly improves the interface rendering efficiency, minimizes the browser rendering jamming problem caused by the complexity of the interface elements, and improves the front-end user experience. The present application also provides a web page rendering system, an electronic device, and a computer-readable storage medium, which have the same beneficial effects as the above-mentioned web page rendering method. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] In order to more clearly illustrate the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0035] Figure 1 A flowchart of the steps of a web page rendering method provided in this application;

[0036] Figure 2 A flowchart of another web page rendering method provided by this application;

[0037] Figure 3 This is a structural diagram of a web page rendering system provided by this application. DETAILED DESCRIPTION

[0038] The core of this application is to provide a web page rendering method, system, electronic device and computer-readable storage medium, which can avoid improving interface rendering efficiency, reduce browser rendering jams caused by complex interface elements, and improve front-end user experience.

[0039] To make the purpose, technical solutions, and advantages of the embodiments of this application more clear, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the described embodiments are part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0040] Please refer to Figure 1 , Figure 1 This is a flowchart of the steps of a web page rendering method implemented by a browser provided in this application, which includes:

[0041] S101: When a page update request is received, the HTML file corresponding to the page update request is obtained, and a basic DOM tree is generated based on the HTML file;

[0042] Among them, the page update request can be generated by the user clicking the URL (Uniform Resource Locator) on the current page, or by the user entering the address corresponding to a certain page in the address bar of the browser, or by meeting a certain trigger condition, which includes but is not limited to reaching a preset page update time.

[0043] Specifically, after receiving a page update request, the browser retrieves the corresponding HTML file and then parses it to construct a basic DOM tree. The basic DOM tree represents the HTML file as a tree structure, with each branch of the tree ending in a node, and each node contains an object. The DOM links the page to scripts or programming languages, allowing you to change the structure, style, or content of nodes using methods provided by the DOM.

[0044] S102: Executing a processing operation through a DOM rendering component in a JS script, the processing operation including: generating a first virtual DOM tree based on an HTML file, and executing a DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree;

[0045] Specifically, considering that the existing technology uses JS scripts to operate the basic DOM tree, but each operation will cause redrawing and reflow, in order to avoid frequent operations on the basic DOM tree, this application pre-adds a DOM rendering component to the JS script. When the browser needs to update the page, the DOM rendering component in the JS script generates a virtual DOM tree, so that the JS script can operate on the virtual DOM tree instead of directly operating the basic DOM tree. Since the virtual DOM tree is just a data structure and does not involve drawing, it has high execution efficiency.

[0046] As an optional embodiment, the process of performing the processing operation through the DOM rendering component in the JS script includes:

[0047] When a page update request is received, the DOM rendering component in the JS script is loaded so that processing operations can be performed through the DOM rendering component.

[0048] Specifically, a DOM rendering component is added to the first JS file in a JS script. When a page update operation is required, the JS script in the page update request is loaded to first load the DOM rendering component. The DOM rendering component includes a DOM construction module, a virtual DOM module, and a drawing module. During the DOM rendering component loading process, the DOM construction module obtains an HTLM file, which is the HTLM file obtained by the browser. The DOM construction module generates a first virtual DOM tree based on the HTLM file. The virtual DOM module receives DOM operations in the JS script and performs relevant processing on the DOM operations. When the JS script is normally executed, the DOM operations in the JS script are performed on the first virtual DOM tree instead of the base DOM tree, thereby improving execution efficiency. It is understood that the JS script performs DOM operations on the first virtual DOM tree, that is, adjusts the structure of the first virtual DOM tree, to obtain a second virtual DOM tree. Considering that the JS script may contain multiple methods for operating the DOM tree, that is, multiple DOM operations, the drawing module outputs the obtained second virtual DOM tree according to preset rules. The second virtual DOM tree can be a virtual DOM tree obtained after performing n DOM operations on the first virtual DOM tree, where n is an integer greater than 1.

[0049] S103: Render the second virtual DOM tree onto the basic DOM tree to obtain a DOM tree;

[0050] S104: Generate a rendering tree based on the DOM tree, and draw the rendering tree on the page corresponding to the page update request.

[0051] Specifically, the second virtual DOM tree is rendered onto the basic DOM tree. In this step, only a small amount of operation is required on the basic DOM tree, which reduces the number of redraws and reflows, greatly improving the interface rendering efficiency. Then, a rendering tree is generated based on the DOM tree and drawn onto the corresponding page to complete the page rendering. This can minimize the browser rendering jamming caused by complex interface elements and improve the front-end user experience.

[0052] It can be seen that in this embodiment, when a page update request is received, the HTLM file corresponding to the page update request is first obtained and a basic DOM tree is generated. Then, a virtual DOM tree is generated based on the HTLM file obtained by the browser through the DOM rendering component in the JS script, and the operations that the JS script needs to perform on the basic DOM tree are transferred to the virtual DOM tree through the DOM rendering component for execution. Since the virtual DOM tree is just a data structure, the JS script's operations on the virtual DOM tree do not involve redrawing and reflow. After the virtual DOM tree is processed, it is rendered to the basic DOM tree to obtain a rendering tree, which is then drawn onto the page to complete page rendering. This embodiment avoids the redrawing and reflow caused by the JS script frequently operating the basic DOM tree, greatly improves the interface rendering efficiency, minimizes the browser rendering jamming problem caused by the complexity of the interface elements, and improves the front-end user experience.

[0053] Based on the above embodiment:

[0054] As an optional embodiment, the process of executing the DOM operation in the JS script on the first virtual DOM tree includes:

[0055] Parse the initial DOM operations in the JS script;

[0056] The operation object of each initial DOM operation is modified to the first virtual DOM tree, and a target DOM operation corresponding to the initial DOM operation is obtained, so that the target DOM operation is performed on the first virtual DOM tree when the JS script is executed.

[0057] Specifically, the virtual DOM module in the DOM rendering component receives the initial DOM operations in the JS script and rewrites each initial DOM operation to modify the operation object corresponding to each initial DOM operation to the first virtual DOM tree, so that the operations on the basic DOM tree can be performed on the virtual DOM tree, preventing the JS script from directly operating the basic DOM tree on the browser. Since the virtual DOM tree is only a data structure and does not involve drawing, the execution efficiency is relatively high. In this way, a layer of virtual DOM is added between the JS script and the actual DOM layer for isolation, thereby avoiding the redrawing and reflux caused by the frequent operations of the JS script on the basic DOM tree, greatly improving the interface rendering efficiency, minimizing the browser rendering jamming problem caused by the complexity of the interface elements, and improving the front-end user experience.

[0058] As an optional embodiment, the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding thereto.

[0059] Specifically, when performing a rewrite operation, ensure that the operation name of the initial DOM operation and the target DOM operation after rewriting are the same, that is, rewrite the method of operating DOM to ensure that the method name is consistent. When executing the JS script normally, if the name is consistent, the latest version of the same name will be executed, that is, the latest DOM operation, that is, the target DOM operation after rewriting is executed, thereby realizing that the operation of the basic DOM tree is performed on the virtual DOM tree, avoiding the redrawing and reflux caused by frequent JS script operations on the basic DOM tree, and greatly improving the interface rendering efficiency.

[0060] As an optional embodiment, the process of performing DOM operations in a JS script on the first virtual DOM tree to obtain the second virtual DOM tree includes:

[0061] All DOM operations in the JS script are executed on the first virtual DOM tree to obtain a second virtual DOM tree.

[0062] Specifically, in order to further reduce the operations on the basic DOM tree, after performing all required DOM operations on the first virtual DOM tree, the second virtual DOM tree obtained can be rendered on the basic DOM tree. With the solution of this embodiment, only one operation needs to be performed on the basic DOM tree, that is, only one redraw and reflow needs to be completed, which greatly improves the interface rendering efficiency, especially the interface rendering performance under large data volumes, minimizes the browser rendering jamming problem caused by complex interface elements, and improves the front-end user experience.

[0063] As an optional embodiment, the process of generating a rendering tree based on the DOM tree includes:

[0064] The DOM tree is adjusted according to the preset rules corresponding to the page update request to obtain the rendering tree.

[0065] As an optional embodiment, the webpage rendering method further includes:

[0066] When a page update request is received, the CSS file corresponding to the page update request is obtained, and a CSS rule tree is generated based on the CSS file;

[0067] The process of adjusting the DOM tree to obtain the rendering tree according to the preset rules corresponding to the page update request includes:

[0068] Adjust the DOM tree based on the CSS rule tree to generate a rendering tree.

[0069] Specifically, considering that different pages have further restrictions on data label styles, fonts, etc., after receiving a page update request, the browser obtains the CSS file corresponding to the page update request and generates a CSS rule tree based on the CSS file. The CSS rule tree is also a data structure. The DOM data is adjusted again according to the CSS rule tree, such as adjusting the font, label style, color, etc. of the DOM tree, thereby obtaining a rendering tree, drawing the rendering tree onto the page, and completing page rendering.

[0070] Reference Figure 2 As shown in FIG. 1 , as a preferred embodiment, the webpage rendering process includes:

[0071] When the browser receives a page update request, the browser obtains the HTML file and CSS file corresponding to the page update request, the browser generates a basic DOM tree based on the HTML file, and generates a CSS rule tree based on the CSS file. The browser loads the DOM rendering component, and the DOM construction module in the component reads the HTML file to generate a virtual DOM tree. The virtual DOM module rewrites the DOM operation method to prevent the JS script from directly operating the basic DOM tree on the browser, and executes the JS script normally. Through the rewritten DOM operation method, the DOM operation is performed on the virtual DOM tree. The virtual DOM tree is just a data structure and does not involve drawing, so the execution efficiency is very high. In this way, a layer of virtual DOM for isolation is added between the JS script and the actual DOM layer. After the JS script is executed, the drawing module is triggered. The drawing module renders the virtual DOM tree to the basic DOM tree to generate the final DOM tree. The browser attaches the final DOM tree and the CSS rule tree to synthesize the rendering tree and draws it on the page.

[0072] In summary, this application encapsulates a DOM rendering component. Through this DOM rendering component, front-end developers can conveniently use JS scripts to adjust the interface display without having to worry about redrawing and reflow caused by frequent DOM operations, greatly improving interface rendering efficiency. In particular, it greatly improves interface rendering performance under large data volumes. It minimizes browser rendering lag caused by complex interface elements and improves the front-end user experience.

[0073] Please refer to Figure 3 , Figure 3 This is a schematic diagram of the structure of a web page rendering system provided by this application, which is applied to a browser. The web page rendering system includes:

[0074] The first processing module 1 is configured to, upon receiving a page update request, obtain an HTLM file corresponding to the page update request and generate a basic DOM tree based on the HTLM file;

[0075] The second processing module 2 is configured to perform a processing operation through a DOM rendering component in a JS script, wherein the processing operation includes: generating a first virtual DOM tree based on the HTML file, and performing DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree;

[0076] The third processing module 3 is used to render the second virtual DOM tree onto the basic DOM tree to obtain a DOM tree;

[0077] The display module 4 is configured to generate a rendering tree based on the DOM tree, and draw the rendering tree onto the page corresponding to the page update request.

[0078] Among them, the page update request can be generated by the user clicking the URL on the current page, or by the user entering the address corresponding to a page in the address bar of the browser, or by meeting a certain trigger condition, which includes but is not limited to reaching a preset page update time.

[0079] Specifically, upon receiving a page update request, the first processing module 1 obtains the corresponding HTML file and then parses the HTML file to construct a basic DOM tree. The basic DOM tree represents the HTML file as a tree structure, with each branch of the tree ending in a node, and each node containing an object. The DOM links the page to a script or programming language, and the structure, style, or content of the node can be modified using methods provided by the DOM.

[0080] Specifically, considering that the existing technology uses JS scripts to operate the basic DOM tree, but each operation will cause redrawing and reflow, in order to avoid frequent operations on the basic DOM tree, this application pre-adds a DOM rendering component to the JS script. When the browser needs to update the page, the second processing module 2 generates a virtual DOM tree through the DOM rendering component in the JS script, so that the JS script operates the virtual DOM tree instead of directly operating the basic DOM tree. Since the virtual DOM tree is just a data structure and does not involve drawing, the execution efficiency is high.

[0081] 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 number of redraws and reflows, greatly improves the interface rendering efficiency, and then generates a rendering tree based on the DOM tree and draws it onto the corresponding page to complete the page rendering.

[0082] It can be seen that in this embodiment, when a page update request is received, the HTLM file corresponding to the page update request is first obtained and a basic DOM tree is generated. Then, a virtual DOM tree is generated based on the HTLM file obtained by the browser through the DOM rendering component in the JS script, and the operations that the JS script needs to perform on the basic DOM tree are transferred to the virtual DOM tree through the DOM rendering component for execution. Since the virtual DOM tree is just a data structure, the JS script's operations on the virtual DOM tree do not involve redrawing and reflow. After the virtual DOM tree is processed, it is rendered to the basic DOM tree to obtain a rendering tree, which is then drawn onto the page to complete page rendering. This embodiment avoids the redrawing and reflow caused by the JS script frequently operating the basic DOM tree, greatly improves the interface rendering efficiency, minimizes the browser rendering jamming problem caused by the complexity of the interface elements, and improves the front-end user experience.

[0083] As an optional embodiment, the process of executing the DOM operation in the JS script on the first virtual DOM tree includes:

[0084] Parse the initial DOM operations in the JS script;

[0085] The operation object of each initial DOM operation is modified to the first virtual DOM tree, and a target DOM operation corresponding to the initial DOM operation is obtained, so that the target DOM operation is performed on the first virtual DOM tree when the JS script is executed.

[0086] Specifically, the DOM rendering component receives the initial DOM operations in the JS script and rewrites each initial DOM operation to modify the operation object corresponding to each initial DOM operation to the first virtual DOM tree, so that the operations on the basic DOM tree can be performed on the virtual DOM tree, preventing the JS script from directly operating the basic DOM tree on the browser. Since the virtual DOM tree is only a data structure and does not involve drawing, the execution efficiency is relatively high. In this way, a layer of virtual DOM is added between the JS script and the actual DOM layer for isolation.

[0087] As an optional embodiment, the operation name of the initial DOM operation is the same as the operation name of the target DOM operation corresponding thereto.

[0088] Specifically, when performing a rewrite operation, ensure that the operation name of the initial DOM operation and the target DOM operation after rewriting are the same, that is, rewrite the DOM operation method to ensure that the method name is consistent. When the JS script is executed normally, if the name is consistent, the latest version of the same name will be executed, that is, the latest DOM operation, that is, the target DOM operation after rewriting is executed, thereby realizing that the operation on the basic DOM tree is performed on the virtual DOM tree.

[0089] As an optional embodiment, the process of performing DOM operations in a JS script on the first virtual DOM tree to obtain the second virtual DOM tree includes:

[0090] All DOM operations in the JS script are executed on the first virtual DOM tree to obtain a second virtual DOM tree.

[0091] In order to further reduce the operations on the basic DOM tree, after performing all required DOM operations on the first virtual DOM tree, the second virtual DOM tree obtained can be rendered on the basic DOM tree. With the solution of this embodiment, only one operation needs to be performed on the basic DOM tree, that is, only one redraw and reflow needs to be completed, which greatly improves the interface rendering efficiency, especially the interface rendering performance under large data volumes. It minimizes the browser rendering jamming problem caused by complex interface elements and improves the front-end user experience.

[0092] As an optional embodiment, the process of performing the processing operation through the DOM rendering component in the JS script includes:

[0093] When a page update request is received, the DOM rendering component in the JS script is loaded so that processing operations can be performed through the DOM rendering component.

[0094] As an optional embodiment, the process of generating a rendering tree based on the DOM tree includes:

[0095] The DOM tree is adjusted according to the preset rules corresponding to the page update request to obtain the rendering tree.

[0096] As an optional embodiment, the webpage rendering system further includes:

[0097] A fourth processing module is configured to, upon receiving a page update request, obtain a CSS file corresponding to the page update request and generate a CSS rule tree based on the CSS file;

[0098] The process of adjusting the DOM tree to obtain the rendering tree according to the preset rules corresponding to the page update request includes:

[0099] Adjust the DOM tree based on the CSS rule tree to generate a rendering tree.

[0100] Specifically, considering that different pages have further restrictions on data label styles, fonts, etc., after receiving a page update request, the browser obtains the CSS file corresponding to the page update request and generates a CSS rule tree based on the CSS file. The CSS rule tree is also a data structure. The DOM tree is adjusted again according to the CSS rule tree, such as adjusting the font, label style, color, etc. of the DOM tree, thereby obtaining a rendering tree.

[0101] On the other hand, the present application also provides an electronic device, comprising:

[0102] memory for storing computer programs;

[0103] A processor is configured to implement the steps of the webpage rendering method described in any one of the above embodiments when executing a computer program.

[0104] Specifically, the memory includes a non-volatile 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 operation of the operating system and computer-readable instructions in the non-volatile storage medium. The processor provides computing and control capabilities for the electronic device, and when executing the computer program stored in the memory, can implement the following steps: upon receiving a page update request, obtaining the HTLM file corresponding to the page update request, and generating a basic DOM tree based on the HTLM file; performing processing operations through the DOM rendering component in the JS script, the processing operations including: generating a first virtual DOM tree based on the HTLM file, performing DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree; rendering the second virtual DOM tree onto the basic DOM tree to obtain a DOM tree; generating a rendering tree based on the DOM tree, and drawing the rendering tree onto the page corresponding to the page update request.

[0105] It can be seen that in this embodiment, when a page update request is received, the HTLM file corresponding to the page update request is first obtained and a basic DOM tree is generated. Then, a virtual DOM tree is generated based on the HTLM file obtained by the browser through the DOM rendering component in the JS script, and the operations that the JS script needs to perform on the basic DOM tree are transferred to the virtual DOM tree through the DOM rendering component for execution. Since the virtual DOM tree is just a data structure, the JS script's operations on the virtual DOM tree do not involve redrawing and reflow. After the virtual DOM tree is processed, it is rendered to the basic DOM tree to obtain a rendering tree, which is then drawn onto the page to complete page rendering. This embodiment avoids the redrawing and reflow caused by the JS script frequently operating the basic DOM tree, greatly improves the interface rendering efficiency, minimizes the browser rendering jamming problem caused by the complexity of the interface elements, and improves the front-end user experience.

[0106] As an optional embodiment, when the processor executes the computer subroutine stored in the memory, the following steps may be implemented: parsing the initial DOM operations in the JS script; modifying the operation object of each initial DOM operation to the 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 performed on the first virtual DOM tree.

[0107] As an optional embodiment, when the processor executes the computer subroutine stored in the memory, the following steps may be implemented: parsing the initial DOM operations in the JS script; modifying the operation object of each initial DOM operation to the 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 performed 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 thereto.

[0108] As an optional embodiment, when the processor executes the computer subroutine stored in the memory, the following steps may be implemented: performing all DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree.

[0109] As an optional embodiment, when the processor executes the computer subroutine stored in the memory, the following steps can be implemented: when a page update request is received, the DOM rendering component in the JS script is loaded so as to perform processing operations through the DOM rendering component.

[0110] As an optional embodiment, when the processor executes the computer subroutine stored in the memory, the following steps may be implemented: adjusting the DOM tree according to a preset rule corresponding to the page update request to obtain a rendering tree.

[0111] As an optional embodiment, when the processor executes the computer subroutine stored in the memory, the following steps can be implemented: when a page update request is received, the CSS file corresponding to the page update request is obtained, and a CSS rule tree is generated based on the CSS file; and the DOM tree is adjusted based on the CSS rule tree to generate a rendering tree.

[0112] Based on the above embodiment, as a preferred implementation manner, the electronic device further includes:

[0113] The input interface, connected to the processor, is used to obtain externally imported computer programs, parameters, and instructions, and save them to memory under the control of the processor. This input interface can be connected to an input device to receive parameters or instructions manually entered by the user. This input device can be a touch screen overlay on the display screen, or it can be a key, trackball, or touchpad provided on the terminal housing.

[0114] The display unit is connected to the processor and is used to display the data sent by the processor. The display unit can be a liquid crystal display or an electronic ink display.

[0115] The network port is connected to the processor and is used to communicate with external terminal devices. The communication technology used for the communication connection can be wired communication technology or wireless communication technology, such as Mobile High-Definition Link technology (MHL), Universal Serial Bus (USB), High-Definition Multimedia Interface (HDMI), Wireless Fidelity technology (WiFi), Bluetooth communication technology, Bluetooth Low Energy communication technology, and communication technology based on IEEE802.11s.

[0116] On the other hand, the present application further provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the steps of the web page rendering method described in any one of the above embodiments are implemented.

[0117] Specifically, the computer-readable storage medium may include various media capable of storing program code, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk. The storage medium stores a computer program that, when executed by a processor, implements the following steps: upon receiving a page update request, obtains an HTML file corresponding to the page update request and generates a basic DOM tree based on the HTML file; performs processing operations through a DOM rendering component in a JS script, the processing operations including: generating a first virtual DOM tree based on the HTML file, performing DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree; rendering the second virtual DOM tree onto the basic DOM tree to obtain a DOM tree; generating a rendering tree based on the DOM tree, and drawing the rendering tree onto the page corresponding to the page update request.

[0118] It can be seen that in this embodiment, when a page update request is received, the HTLM file corresponding to the page update request is first obtained and a basic DOM tree is generated. Then, a virtual DOM tree is generated based on the HTLM file obtained by the browser through the DOM rendering component in the JS script, and the operations that the JS script needs to perform on the basic DOM tree are transferred to the virtual DOM tree through the DOM rendering component for execution. Since the virtual DOM tree is just a data structure, the JS script's operations on the virtual DOM tree do not involve redrawing and reflow. After the virtual DOM tree is processed, it is rendered to the basic DOM tree to obtain a rendering tree, which is then drawn onto the page to complete page rendering. This embodiment avoids the redrawing and reflow caused by the JS script frequently operating the basic DOM tree, greatly improves the interface rendering efficiency, minimizes the browser rendering jamming problem caused by the complexity of the interface elements, and improves the front-end user experience.

[0119] As an optional embodiment, when the computer subroutine stored in the computer-readable storage medium is executed by the processor, the following steps may be specifically implemented: parsing the initial DOM operations in the JS script; modifying the operation object of each initial DOM operation to 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 performed on the first virtual DOM tree.

[0120] As an optional embodiment, when a computer subroutine stored in a computer-readable storage medium is executed by a processor, the following steps may be specifically implemented: parsing initial DOM operations in a JS script; modifying the operation object of each initial DOM operation to 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 performed 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 thereto.

[0121] As an optional embodiment, when the computer subroutine stored in the computer-readable storage medium is executed by the processor, the following steps may be specifically implemented: performing all DOM operations in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree.

[0122] As an optional embodiment, when the computer subroutine stored in the computer-readable storage medium is executed by the processor, the following steps can be specifically implemented: when a page update request is received, the DOM rendering component in the JS script is loaded so as to perform processing operations through the DOM rendering component.

[0123] As an optional embodiment, when the computer subroutine stored in the computer-readable storage medium is executed by the processor, the following steps may be specifically implemented: adjusting the DOM tree according to preset rules corresponding to the page update request to obtain a rendering tree.

[0124] As an optional embodiment, when the computer subroutine stored in the computer-readable storage medium is executed by the processor, the following steps can be specifically implemented: when a page update request is received, the CSS file corresponding to the page update request is obtained, and a CSS rule tree is generated based on the CSS file; and the DOM tree is adjusted based on the CSS rule tree to generate a rendering tree.

[0125] It should also be noted that, in this specification, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or apparatus comprising the element.

[0126] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present application. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application is not limited to the embodiments shown herein, but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A web page rendering method, characterized in that: Applied to a browser, the web page rendering method includes: When a page update request is received, the HTML file corresponding to the page update request is obtained, and a basic DOM tree is generated based on the HTML file; the page update request is a request generated by a user clicking a URL on the current page, or a request generated by a user entering an address in the address bar of a browser, or a request generated when a preset page update time is reached; Executing a processing operation through a DOM rendering component in a JS script, the processing operation comprising: generating a first virtual DOM tree based on the HTLM file, and executing the 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 onto the basic DOM tree to obtain a DOM tree; Generate a render tree based on the DOM tree, and draw the render tree on the page corresponding to the page update request; The process of executing the DOM operation in the JS script on the first virtual DOM tree includes: Parsing the initial DOM operations in the JS script; modifying the operation object of each initial DOM operation to the 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 performed 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 thereto; The process of performing the processing operation through the DOM rendering component in the JS script includes: When the page update request is received, the DOM rendering component in the JS script is loaded so that the processing operation is performed through the DOM rendering component.

2. The webpage rendering method according to claim 1, wherein: The process of performing the DOM operation in the JS script on the first virtual DOM tree to obtain the second virtual DOM tree includes: All the DOM operations in the JS script are executed on the first virtual DOM tree to obtain a second virtual DOM tree.

3. The webpage rendering method according to claim 1 or 2, characterized in that: The process of generating a rendering tree based on the DOM tree includes: The DOM tree is adjusted according to a preset rule corresponding to the page update request to obtain a rendering tree.

4. The webpage rendering method according to claim 1, wherein: The webpage rendering method further includes: When receiving the page update request, obtaining a CSS file corresponding to the page update request, and generating a CSS rule tree based on the CSS file; The process of adjusting the DOM tree according to the preset rules corresponding to the page update request to obtain a rendering tree includes: The DOM tree is adjusted based on the CSS rule tree to generate a rendering tree.

5. A web page rendering system, characterized in that: Applied to the browser, the web page rendering system includes: The first processing module is configured to, upon receiving a page update request, obtain an HTML file corresponding to the page update request and generate a basic DOM tree based on the HTML file; the page update request is generated by a user clicking a URL on a current page, or a user entering an address in a browser's address bar, or a request generated when a preset page update time is reached; a second processing module, configured to perform a processing operation through a DOM rendering component in a JS script, the processing operation comprising: generating a first virtual DOM tree based on the HTLM file, and performing the DOM operation in the JS script on the first virtual DOM tree to obtain a second virtual DOM tree; A third processing module is configured to render the second virtual DOM tree onto the basic DOM tree to obtain a DOM tree; A display module, configured to generate a rendering tree based on the DOM tree, and draw the rendering tree onto the page corresponding to the page update request; The webpage rendering system is specifically used for: Parsing the initial DOM operations in the JS script; modifying the operation object of each initial DOM operation to the 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 performed 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 thereto; The webpage rendering system is specifically used for: When the page update request is received, the DOM rendering component in the JS script is loaded so that the processing operation is performed through the DOM rendering component.

6. An electronic device, characterized in that: include: memory for storing computer programs; A processor, configured to implement the steps of the web page rendering method according to any one of claims 1 to 4 when executing the computer program.

7. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the webpage rendering method according to any one of claims 1 to 4 are implemented.

Images