Webpage rendering optimization method and device, terminal and medium
By identifying and filtering visible DOM elements in web pages, building a rendering tree and storing invisible DOM elements, the problem of low rendering efficiency in the existing technology is solved, and more efficient web page rendering and resource utilization is achieved.
Patent Information
- Application Number
- CN202411812025.1
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-10
- Publication Date
- 2025-03-07
AI Technical Summary
The existing web page rendering mechanism has the problem of low rendering efficiency, which causes the browser to consume a large amount of CPU and GPU resources when processing a large number of DOM elements, causing page stuttering.
By identifying and filtering the visibility of DOM elements that need to be rendered, the render tree only contains visible DOM elements when building the render tree, ignores the invisible DOM elements, and stores the invisible DOM elements in the cache unit, and updates to the render tree when it is visible.
Reduce unnecessary rendering work, rationally utilize browser resources, reduce resource consumption of CPU and GPU, improve page rendering efficiency, and reduce the probability of page lag.
Smart Images
Figure CN119576468A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a web page rendering optimization method, device, terminal and medium. Background Art
[0002] When a user enters a URL or clicks a link to request a web page, the browser first needs to receive and parse the HTML document returned by the server. In this step, the browser converts the HTML code into a tree-like data structure, the Document Object Model (DOM) tree. Each node in the DOM tree corresponds to an element on the page, for example, a paragraph tag. Will be converted to a DOM node.
[0003] At the same time, the browser also parses the CSS style sheet associated with the HTML document. The CSS code defines the visual appearance of page elements, such as color, font size, layout, etc. The browser converts these style rules into another tree structure, the CSS tree. The nodes in the CSS tree contain style information applied to the DOM nodes.
[0004] Next, the browser merges the DOM tree and the CSS tree to generate a render tree. The render tree is a subset of all elements that will be displayed on the page and their styles. It excludes elements hidden by CSS, such as elements using the display:none; attribute. The construction of the render tree is a key step in the page rendering process because it is directly related to the visual effect of the final page. After the render tree is constructed, the browser will perform layout processing, which determines the exact position and size of each node in the render tree. Subsequently, the browser enters the drawing phase, in which the browser converts the laid-out nodes into pixels and displays them on the screen.
[0005] Currently, the rendering technology of web pages generally adopts a comprehensive construction method, that is, regardless of whether the DOM elements will eventually be seen by users, the browser will include all DOM elements in the rendering tree and perform layout and drawing. Although this approach ensures the integrity of the page and the expected visual effect, it also has the technical problem of low page rendering efficiency. Summary of the invention
[0006] The present application provides a web page rendering optimization method, device, terminal and medium, which are used to solve the technical problem of low rendering efficiency in the existing web page rendering mechanism.
[0007] In order to solve the above technical problems, the first aspect of the present application provides a web page rendering optimization method, comprising:
[0008] In response to a page access request, obtaining a page resource of the accessed page;
[0009] Extracting the element attributes of each DOM element according to the DOM elements in the page resources;
[0010] Determine the visibility of each DOM element according to the element attribute, so as to divide each DOM element into a visible DOM element and an invisible DOM element;
[0011] Based on the visible DOM elements, a rendering tree is constructed.
[0012] Preferably, determining the visibility of each DOM element according to the element attribute includes:
[0013] Traversing the CSS parameter set of each DOM element, and extracting the z-index attribute parameter in the CSS parameter set;
[0014] Traverse the tree structure information of each DOM element to determine the element node relationship between each DOM element;
[0015] The visibility relationship between different DOM elements is determined according to the z-index attribute parameter and the element node relationship.
[0016] Preferably, it also includes:
[0017] The invisible DOM element is stored in a preset cache unit.
[0018] Preferably, it also includes:
[0019] When the invisible DOM element is triggered or modified, the invisible DOM element is read from the cache unit to update the invisible DOM to the rendering tree.
[0020] Preferably, the cache unit is a browser cache unit.
[0021] At the same time, the second aspect of the present application provides a web page rendering optimization device, including:
[0022] A page access response unit, used to respond to a page access request and obtain a page resource of the accessed page;
[0023] An element attribute extraction unit, used to extract element attributes of each DOM element according to the DOM elements in the page resources;
[0024] An element visibility relationship determination unit, configured to determine the visibility of each DOM element according to the element attribute, so as to divide each DOM element into visible DOM elements and invisible DOM elements;
[0025] The rendering tree construction unit is used to construct a rendering tree based on the visible DOM element.
[0026] Preferably, the element visibility relationship determining unit is specifically used for:
[0027] Traversing the CSS parameter set of each DOM element, and extracting the z-index attribute parameter in the CSS parameter set;
[0028] Traverse the tree structure information of each DOM element to determine the element node relationship between each DOM element;
[0029] According to the z-index attribute parameter and the element node relationship, the visibility relationship between different DOM elements is determined to divide each DOM element into a visible DOM element and an invisible DOM element.
[0030] Preferably, the method further comprises: an invisible element processing unit, configured to:
[0031] The invisible DOM element is stored in a preset cache unit, so that when the invisible DOM element is triggered or modified, the invisible DOM element is read from the cache unit to update the invisible DOM to the rendering tree.
[0032] A third aspect of the present application provides a web page rendering optimization terminal, including: a memory and a processor;
[0033] The memory is used to store program code, and the program code is used to implement a web page rendering optimization method as provided in the first aspect of the present application;
[0034] The processor is used for reading and executing the program code.
[0035] A fourth aspect of the present application provides a computer-readable storage medium, in which a program code is stored. The program code is used to be read and executed by a processor to implement a web page rendering optimization method as provided in the first aspect of the present application.
[0036] It can be seen from the above technical solutions that this application has the following advantages:
[0037] The solution provided by the present application identifies and filters the visibility of DOM elements that need to be rendered, so that invisible DOM elements can be ignored during the rendering process, and visible DOM elements can be extracted to build a rendering tree, thereby realizing on-demand rendering of DOM elements of web pages, thereby reducing unnecessary rendering work. This method can make more reasonable use of browser resources, reduce CPU and GPU resource consumption, thereby reducing the probability of page freezes and improving page rendering efficiency. BRIEF DESCRIPTION OF THE DRAWINGS
[0038] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. 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 paying creative labor.
[0039] Figure 1 A flowchart of an embodiment of a web page rendering optimization method provided in the present application.
[0040] Figure 2 A logic diagram for determining explicit and implicit relationships in a web page rendering optimization method provided in this application.
[0041] Figure 3 An overall logical flow chart of a web page rendering optimization method provided in this application.
[0042] Figure 4 A schematic diagram of the rendering tree construction effect of a web page rendering optimization method provided in this application.
[0043] Figure 5 A schematic diagram of the structure of an embodiment of a web page rendering optimization device provided in the present application.
[0044] Figure 6 A schematic diagram of the structure of a web page rendering optimization terminal embodiment provided in the present application. DETAILED DESCRIPTION
[0045] There is a common phenomenon in the processing flow of current web page rendering technology: both visible and invisible DOM elements will be unconditionally built into the rendering tree, and layout and drawing will be performed. Although this process ensures the integrity of the page, it brings some significant problems. For example, under this rendering mechanism, even those DOM elements located in the invisible area will consume resources to build them, layout and draw them. This is not only a huge waste of computing resources, but also directly leads to the inefficiency of the entire page rendering process. Moreover, in complex web pages, there are many elements, and the existing rendering technology will cause the browser to consume a lot of CPU and GPU resources when processing these elements. This high consumption of resources can easily cause page freezes, or even a short period of pseudo-death, which seriously affects the user's browsing experience.
[0046] In view of this, the embodiments of the present application provide a web page rendering optimization method, device, terminal and medium, which are used to solve the technical problem of low rendering efficiency in the existing web page rendering mechanism.
[0047] In order to make the purpose, features, and advantages of the invention of this application more obvious and easy to understand, 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 embodiments described below are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.
[0048] First, a detailed description of an embodiment of a web page rendering optimization method provided by the present application is as follows:
[0049] See also Figure 1 , a web page rendering optimization method provided in this embodiment includes:
[0050] Step 101: In response to a page access request, obtain a page resource of the accessed page.
[0051] It should be noted that when a user accesses a target page through a browser program, the browser program can respond to the user's page access request and obtain the page resources that need to be loaded in the accessed page.
[0052] Step 102: extract element attributes of each DOM element according to the DOM elements in the page resources.
[0053] Step 103: Determine the visibility of each DOM element according to the element attribute, so as to divide each DOM element into a visible DOM element and an invisible DOM element.
[0054] It should be noted that, according to the DOM elements in the page resources, the element attributes of each DOM element are extracted, so as to determine the visibility of each DOM element according to the element attributes of each DOM element, so as to divide each DOM element into visible DOM elements and invisible DOM elements. For invisible DOM elements, their style attributes can be set to display=none.
[0055] More specifically, if Figure 2 As shown, the step 103 of this embodiment, determining the visibility of each DOM element according to the element attribute, includes the following steps:
[0056] Traverse the CSS parameter set of each DOM element and extract the z-index attribute parameter in the CSS parameter set;
[0057] Traverse the tree structure information of each DOM element to determine the element node relationship between each DOM element;
[0058] Determine the visibility relationship between different DOM elements based on the z-index attribute parameter and the element node relationship.
[0059] It should be noted that traversing all CSS style rules: traversing all inline styles, internal styles, and style rules in external style sheets on the page.
[0060] Extract the z-index attribute value: For each style rule, extract its z-index attribute value. It can be understood that z-index is an attribute in CSS (Cascading Style Sheets) that is used to control the vertical stacking order of elements. In an HTML page, elements are stacked in a certain order, and the z-index attribute can determine the order of these elements on the imaginary Z axis perpendicular to the screen.
[0061] Traverse the DOM tree and analyze the parent and child relationships of each DOM element. The relationship between DOM elements refers to the hierarchy and connection between different DOM elements. DOM is a tree structure. Each element can be regarded as a node in the tree. There are the following basic relationships between these nodes: parent element, child element, sibling element, ancestor element, descendant element, leaf node, root node. Determine the visibility based on the element relationship through the window.getComputedStyle(element) API.
[0062] Step 104: Build a rendering tree based on visible DOM elements.
[0063] It should be noted that if Figure 3 As shown, based on the visibility of each DOM element determined in step 103, the visible DOM elements are used to build a rendering tree. When facing invisible DOM elements, their style attribute identifiers are set to display=none, so that the rendering of such elements is skipped in the rendering stage. Otherwise, the rendering is performed normally. The browser builds the new DOM tree into the rendering tree, performs layout and drawing, and realizes on-demand rendering of DOM elements, reducing unnecessary rendering work. The construction effect of the rendering tree is shown in FIG. Figure 4 As shown, the rendering tree on the left side of the figure is a rendering tree structure constructed in a traditional manner, and the rendering tree structure on the right side is a rendering tree structure constructed according to the method of the present application.
[0064] After the render tree is built, the browser will perform layout processing, which determines the exact position and size of each node in the render tree. Then, the browser enters the drawing phase, in which the browser converts the laid-out nodes into pixels and displays them on the screen.
[0065] Furthermore, the solution provided in this embodiment may also include the following contents:
[0066] Step 105: Store the invisible DOM element in a preset cache unit.
[0067] It should be noted that if Figure 3 As shown, the identified invisible DOM elements are stored in the browser cache (IndexedDB) instead of being built into the rendering tree. Moreover, by storing the invisible DOM elements in the preset cache units, when the invisible DOM elements are triggered by interactive behaviors or the visibility parameters are modified and become visible elements that need to be rendered, they can be directly obtained from the browser cache without having to be obtained from the server again. After obtaining, the rendering tree can be rebuilt in combination with the original visible DOM elements or new DOM elements can be added based on the constructed rendering tree, thereby improving the efficiency of re-rendering the invisible DOM elements.
[0068] Furthermore, during storage, the identified invisible DOM elements may be recorded, for example, information such as their DOM element ID or class name may be stored, which may be used to construct index information of the invisible DOM elements to improve the search efficiency of the invisible DOM elements in the cache unit, thereby further improving the efficiency of re-rendering the invisible DOM elements.
[0069] The above is a detailed description of an embodiment of a web page rendering optimization method provided by the present application. The following is a detailed description of an embodiment of a web page rendering optimization device provided by the present application.
[0070] See also Figure 5 , a web page rendering optimization device provided in this embodiment includes:
[0071] The page access response unit 201 is used to obtain the page resource of the accessed page in response to the page access request;
[0072] The element attribute extraction unit 202 is used to extract the element attributes of each DOM element according to the DOM elements in the page resources;
[0073] An element visibility relationship determination unit 203, configured to determine the visibility of each DOM element according to the element attribute, so as to divide each DOM element into visible DOM elements and invisible DOM elements;
[0074] The rendering tree construction unit 204 is used to construct a rendering tree based on visible DOM elements.
[0075] Furthermore, the element visibility relationship determining unit 203 is specifically configured to:
[0076] Traverse the CSS parameter set of each DOM element and extract the z-index attribute parameter in the CSS parameter set;
[0077] Traverse the tree structure information of each DOM element to determine the element node relationship between each DOM element;
[0078] According to the z-index attribute parameter and the element node relationship, the visibility relationship between different DOM elements is determined to divide each DOM element into visible DOM elements and invisible DOM elements.
[0079] Furthermore, it also includes: an invisible element processing unit 205, which is used to:
[0080] The invisible DOM element is stored in a preset cache unit, so that when the invisible DOM element is triggered or modified, the invisible DOM element is read from the cache unit to update the invisible DOM to the rendering tree.
[0081] Also, see Figure 6 , the present application provides a web page rendering optimization terminal embodiment, the implementation of the terminal includes but is not limited to: a personal computer, an industrial computer, a server, and an embedded intelligent device, etc., including: a memory 33 and a processor 31, and the memory 33 and the processor 31 can be connected via a communication bus 34;
[0082] The memory 33 is used to store program codes, and the program codes are used to implement a web page rendering optimization method provided in the above embodiment;
[0083] The processor 31 is used to read and execute program codes.
[0084] The present application also provides a computer-readable storage medium, in which program code is stored. The program code is used to be read and executed by the processor 31 to implement a web page rendering optimization method as provided in the above embodiment.
[0085] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the terminals, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.
[0086] In the several embodiments provided in the present application, it should be understood that the disclosed terminals, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.
[0087] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application described herein can, for example, be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0088] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following items" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or plural.
[0089] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
[0090] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.
[0091] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.
[0092] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.
Claims
1. A web page rendering optimization method, characterized in that: include: In response to a page access request, obtaining a page resource of the accessed page; Extracting element attributes of each DOM element according to the DOM elements in the page resources; Determine the visibility of each DOM element according to the element attribute, so as to divide each DOM element into a visible DOM element and an invisible DOM element; Based on the visible DOM elements, a rendering tree is constructed.
2. A web page rendering optimization method according to claim 1, characterized in that: Determining the visibility of each DOM element according to the element attribute includes: Traversing the CSS parameter set of each DOM element, and extracting the z-index attribute parameter in the CSS parameter set; Traverse the tree structure information of each DOM element to determine the element node relationship between each DOM element; The visibility relationship between different DOM elements is determined according to the z-index attribute parameter and the element node relationship.
3. A web page rendering optimization method according to claim 1, characterized in that: Also includes: The invisible DOM element is stored in a preset cache unit.
4. A web page rendering optimization method according to claim 3, characterized in that: Also includes: When the invisible DOM element is triggered or modified, the invisible DOM element is read from the cache unit to update the invisible DOM to the rendering tree.
5. A web page rendering optimization method according to claim 3, characterized in that: The cache unit is a browser cache unit.
6. A web page rendering optimization device, characterized in that: include: A page access response unit, used to respond to a page access request and obtain a page resource of the accessed page; An element attribute extraction unit, used to extract element attributes of each DOM element according to the DOM elements in the page resources; An element visibility relationship determination unit, configured to determine the visibility of each DOM element according to the element attribute, so as to divide each DOM element into visible DOM elements and invisible DOM elements; The rendering tree construction unit is used to construct a rendering tree based on the visible DOM element.
7. A web page rendering optimization device according to claim 6, characterized in that: The element visibility relationship determination unit is specifically used for: Traversing the CSS parameter set of each DOM element, and extracting the z-index attribute parameter in the CSS parameter set; Traverse the tree structure information of each DOM element to determine the element node relationship between each DOM element; According to the z-index attribute parameter and the element node relationship, the visibility relationship between different DOM elements is determined to divide each DOM element into a visible DOM element and an invisible DOM element.
8. A web page rendering optimization device according to claim 6, characterized in that: Also includes: Invisible element processing unit, used for: The invisible DOM element is stored in a preset cache unit, so that when the invisible DOM element is triggered or modified, the invisible DOM element is read from the cache unit to update the invisible DOM to the rendering tree.
9. A web page rendering optimization terminal, characterized in that: include: Memory and processor; The memory is used to store program codes, and the program codes are used to implement a web page rendering optimization method according to any one of claims 1 to 5; The processor is used for reading and executing the program code.
10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores program code, and the program code is used to be read and executed by a processor to implement a web page rendering optimization method as described in any one of claims 1 to 5.