Web page rendering optimization method and related equipment

Abstract

The invention provides a Web page rendering optimization method and related equipment, and the method comprises the steps: collecting and processing equipment performance parameters and network state parameters, and obtaining a comprehensive performance coefficient; analyzing a cascading style sheet rule associated with the content structure tree of the to-be-loaded page to obtain an initial dependency element list, and performing dependency relationship analysis on elements in the initial dependency element list to obtain an atomic rendering unit; dividing the page content according to the comprehensive performance coefficient, the atomic rendering unit and the content structure tree to obtain a plurality of dynamic slices; obtaining position information of a current browser viewport in the page coordinate system and a prediction result of a user interaction behavior, and calculating a final priority value of each dynamic slice block based on the position information, the prediction result and the comprehensive performance coefficient to obtain a slice scheduling instruction list of each dynamic slice block so as to render all the dynamic slice blocks; and the final correctness and consistency of a page rendering result are kept while the performance is improved.

Description

Technical Field

[0001] This invention relates to the field of web front-end performance optimization technology, and in particular to a web page rendering optimization method and related equipment. Background Technology

[0002] With the rapid development of Web technology, modern web pages have evolved from simple information display carriers into complex, interactive, and dynamic applications. The increasing complexity of page content has led to a surge in the size of network resources required for loading, such as Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), interpreted scripting language JavaScript, and multimedia. This poses a severe challenge to the loading speed and rendering smoothness of the user interface. Long initial wait times, scrolling delays, or interface lag during operation severely impact the user experience, leading to user churn. Therefore, ensuring a fast and smooth user experience in large-scale, highly complex page scenarios has become a core issue in the field of front-end performance optimization.

[0003] To address this challenge, the industry has proposed a variety of optimization strategies based on sharding, chunking, or on-demand loading. These existing technologies are mainly based on two core ideas: "reducing the single processing load" and "prioritizing the processing of critical content," aiming to improve page response speed.

[0004] The mainstream solutions in the current technology are based on viewport or data scale fragmentation / virtualization technology, such as a dynamic data loading and rendering method based on Lucky Sheet. This method divides large-scale data into blocks, loads and renders only the data blocks required by the current view, and uses virtual DOM technology to reduce actual DOM operations. These technologies effectively alleviate memory pressure and rendering blocking. The core logic is to divide the content into independent blocks or slices and schedule them on demand.

[0005] Another common approach is to separate loading techniques based on resource type and priority. For example, a dynamic page loading optimization method and device based on user behavior and network environment further introduces the ability to perceive user behavior and network environment in order to dynamically adjust the loading priority and strategy of different resources. This type of technology optimizes the critical rendering path by distinguishing the nature of content and execution order.

[0006] However, the aforementioned existing technologies still present a technical problem when applied to highly complex, style-coupled modern web pages: existing fragmentation or chunking strategies typically rely solely on explicit dimensions such as geometric location, data boundaries, or resource types when dividing content, neglecting implicit "style state dependencies" that may exist within the page content and are crucial for rendering consistency. The root of this problem lies in the fact that the fragmentation logic of existing technologies lacks analysis and respect for the deep dependencies of the CSS negative model. They simplify the page into a collection of resources and boxes, failing to treat it as a complete rendering ecosystem containing state and contextual information. Therefore, when these technologies are used for aggressive optimization of complex pages, while they may achieve improved loading speed, this comes at the cost of sacrificing the integrity of page functionality and visual accuracy, creating a contradictory situation of "faster loading but page errors," which is unacceptable in applications with extremely high functional and user experience requirements. Summary of the Invention

[0007] This invention provides a method and related equipment for optimizing web page rendering, the purpose of which is to improve performance while maintaining the final correctness and consistency of the page rendering result.

[0008] To achieve the above objectives, the present invention provides a method for optimizing web page rendering, comprising: Step 1: Collect and process the device performance parameters and network status parameters of the target user terminal to obtain the comprehensive performance coefficient; Step 2: Parse the Cascading Style Sheet rules associated with the content structure tree of the page to be loaded to obtain the initial dependent element list, and perform dependency analysis on the elements in the initial dependent element list to obtain the atomic rendering unit; Step 3: Divide the page content into multiple dynamic blocks based on the overall performance coefficient, atomic rendering units, and content structure tree; Step 4: Obtain the position information of the current browser viewport in the page coordinate system, the prediction results of user interaction behavior, and calculate the final priority value of each dynamic block based on the position information, prediction results, and comprehensive performance coefficient to obtain the fragmentation scheduling instruction list for each dynamic block. Step 5: Render all dynamic fragments in descending order of priority based on the fragment scheduling instruction list.

[0009] Furthermore, step 1 includes: Collect device performance parameters of the target user terminal, including the number of CPU cores, CPU clock speed, available memory size, and image processing capability score obtained through graphics performance benchmark tests. The network status parameters of the target user terminal are used, including the current downlink bandwidth, network round-trip time, and packet loss rate. The device performance parameters and network state parameters are quantified using a normalization function to obtain the initial performance coefficients; The initial performance coefficients are linearly weighted and summed according to the preset weight vector to obtain the comprehensive performance coefficients.

[0010] Furthermore, step 2 includes: For each rule in the Cascading Style Sheets rules associated with the content structure tree of the page to be loaded, the rules are parsed to obtain all style declarations that include counter reset, counter increment, counter function, and reference to custom properties; The initial list of dependent elements is obtained by back-mapping all style declarations to the specific document object model elements to which they are applied. Perform dependency analysis on the initial list of dependent elements to obtain all elements that have direct or indirect strong style state dependencies; Aggregate all elements with direct or indirect strong style state dependencies to obtain atomic rendering units.

[0011] Furthermore, step 3 includes: The granularity benchmark value for segmentation is determined based on the comprehensive performance coefficient. Using nodes of the content structure tree as the basic unit, regions are divided according to the natural boundaries formed by the visual formatting context, resulting in multiple regions; Dependency analysis is performed on the internal resources of each initial region to generate a resource dependency graph. All tightly coupled node clusters in the resource dependency graph are packaged to obtain multiple candidate pieces. The estimated rendering complexity of each candidate piece is compared with the fragment granularity baseline value to obtain the comparison result. Based on the comparison result, all candidate pieces are processed to obtain multiple dynamic pieces.

[0012] Furthermore, the granularity benchmark value for segmentation is determined based on the comprehensive performance coefficient, including: Preset a first performance coefficient threshold, a second performance coefficient threshold, and a third performance coefficient threshold; When the overall performance coefficient is less than the first performance coefficient threshold, the minimum granularity benchmark value is taken as the granularity benchmark value. When the overall performance coefficient is greater than the first performance coefficient threshold and less than the second performance coefficient threshold, the granularity benchmark value of the segmentation is calculated using the overall performance coefficient, the first performance coefficient threshold, and the second performance coefficient threshold. When the overall performance coefficient is greater than the second performance coefficient threshold and less than the third performance coefficient threshold, the granularity benchmark value of the segmentation is calculated using the overall performance coefficient, the second performance coefficient threshold, and the third performance coefficient threshold. When the overall performance coefficient is greater than the third performance coefficient threshold, the maximum segmentation granularity benchmark value is taken as the segmentation granularity benchmark value.

[0013] Furthermore, the expression for calculating the granularity benchmark value using the comprehensive performance coefficient, the first performance coefficient threshold, and the second performance coefficient threshold is as follows: ; in, Indicates the granularity reference value for segmentation. This represents the minimum granularity reference value. This represents the median of the preset granularity reference value. Indicates the overall performance coefficient. This represents the first performance coefficient threshold. This represents the threshold value for the second performance coefficient.

[0014] Furthermore, based on the comparison results, all candidate pieces are processed to obtain multiple dynamic pieces, including: When the comparison result shows that the estimated rendering complexity of the candidate piece is greater than the fragment granularity baseline value, under the premise of complying with the atomic rendering unit constraints, the branch nodes in the mask content structure tree will split the candidate piece whose estimated rendering complexity is greater than the fragment granularity baseline value to obtain the split pieces, and all the split pieces will be regarded as dynamic pieces. When the comparison result shows that the estimated rendering complexity of the candidate piece is much smaller than the fragment granularity baseline value, all candidate pieces whose estimated rendering complexity is much smaller than the fragment granularity baseline value are merged to obtain a large piece, and this large piece is used as a dynamic piece.

[0015] The present invention also provides a web page rendering optimization device, comprising: The acquisition module is used to collect and process the device performance parameters and network status parameters of the target user terminal to obtain the comprehensive performance coefficient. The analysis module is used to parse the Cascading Style Sheet rules associated with the content structure tree of the page to be loaded, obtain the initial dependent element list, and perform dependency analysis on the elements in the initial dependent element list to obtain atomic rendering units. The partitioning module is used to divide the page content into multiple dynamic blocks based on the overall performance coefficient, atomic rendering units, and content structure tree. The calculation module is used to obtain the position information of the current browser viewport in the page coordinate system, the prediction results of user interaction behavior, and calculate the final priority value of each dynamic block based on the position information, prediction results, and comprehensive performance coefficient, so as to obtain the fragmentation scheduling instruction list of each dynamic block. The rendering module is used to render all dynamic fragments in descending order of priority based on the fragment scheduling instruction list.

[0016] The present invention also provides a terminal device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement a web page rendering optimization method.

[0017] The present invention also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements a method for optimizing web page rendering.

[0018] The above-described solution of the present invention has the following beneficial effects: This invention collects and processes device performance parameters and network status parameters to obtain a comprehensive performance coefficient; it parses the Cascading Style Sheets (CSS) rules associated with the content structure tree of the page to be loaded to obtain an initial list of dependent elements, and performs dependency analysis on the elements in the initial list to obtain atomic rendering units; it divides the page content into multiple dynamic chunks based on the comprehensive performance coefficient, atomic rendering units, and content structure tree; it acquires the current browser viewport's position information in the page coordinate system and the prediction results of user interaction behavior, and calculates the final priority value of each dynamic chunk based on the position information, prediction results, and comprehensive performance coefficient to obtain the chunking scheduling for each dynamic chunk. The system uses a list of instructions to render all dynamic segments in descending order of priority. Compared to existing technologies, this invention proposes adding a parsing and constraint mechanism for atomic rendering units before dynamic segmentation. This ensures that subsequent segmentation will not disrupt the integrity of the page's critical style logic. Based on location information, prediction results, and comprehensive performance coefficients, the final priority value of each dynamic segment is calculated to obtain a segmentation scheduling instruction list for each dynamic segment. This achieves synchronous response to user intent and system resources, enabling the system to more accurately prioritize the core content most urgently needed by the user, improving performance while maintaining the final correctness and consistency of the page rendering results.

[0019] Other beneficial effects of the present invention will be described in detail in the following detailed description section. Attached Figure Description

[0020] Figure 1 This is a flowchart illustrating an embodiment of the present invention; Figure 2 This is a schematic diagram of the structure of the Web page rendering optimization device in an embodiment of the present invention; Figure 3 This is a schematic diagram of the structure of the terminal device in an embodiment of the present invention. Detailed Implementation

[0021] To make the technical problems, solutions, and advantages of this invention clearer, a detailed description will be provided below with reference to the accompanying drawings and specific embodiments. Obviously, the described embodiments are only some, not all, of the embodiments of this invention. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0022] In the description of this invention, it should be noted that the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0023] In the description of this invention, it should be noted that, unless otherwise explicitly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a locking connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in this invention based on the specific circumstances.

[0024] Furthermore, the technical features involved in the different embodiments of the present invention described below can be combined with each other as long as they do not conflict with each other.

[0025] This invention addresses existing problems by providing a method and related equipment for optimizing web page rendering.

[0026] like Figure 1 As shown, an embodiment of the present invention provides a web page rendering optimization method, including: Step 1: Collect and process the device performance parameters and network status parameters of the target user terminal to obtain the comprehensive performance coefficient; Step 2: Parse the Cascading Style Sheet rules associated with the content structure tree of the page to be loaded to obtain the initial dependent element list, and perform dependency analysis on the elements in the initial dependent element list to obtain the atomic rendering unit; Step 3: Divide the page content into multiple dynamic blocks based on the overall performance coefficient, atomic rendering units, and content structure tree; Step 4: Obtain the position information of the current browser viewport in the page coordinate system, the prediction results of user interaction behavior, and calculate the final priority value of each dynamic block based on the position information, prediction results, and comprehensive performance coefficient to obtain the fragmentation scheduling instruction list for each dynamic block. Step 5: Render all dynamic fragments in descending order of priority based on the fragment scheduling instruction list.

[0027] Specifically, step 1 includes: Collect device performance parameters of the target user terminal, including the number of central processing unit cores. Central Processing Unit (CPU) clock speed Available memory size And the image processing capability score obtained through graphics performance benchmark tests. ; The network status parameters of the target user terminal are used, including the current downlink bandwidth. Network round-trip time (RTT) and packet loss rate ; The device performance parameters and network status parameters are quantified using a normalization function to obtain initial performance coefficients. This normalization function maps device performance parameters and network status parameters of different dimensions and ranges to the interval between 0 and 1. The initial performance coefficients are linearly weighted and summed according to the preset weight vector to obtain the comprehensive performance coefficients.

[0028] In this embodiment of the invention, the preset weight vector is: The formula for calculating the initial performance coefficients by linear weighted summation based on the preset weight vector is as follows: ; in, Indicates the overall performance coefficient. Indicates the preset first A weight vector, Indicates the first Initial performance coefficients.

[0029] Specifically, step 2 includes: For each rule in the Cascading Style Sheet rules associated with the content structure tree of the page to be loaded, the rule is parsed to obtain all style declarations that include counter-reset, counter-increment, counter function counter(·), and reference to custom property var(·). The initial list of dependent elements is obtained by back-mapping all style declarations to the specific document object model elements to which they are applied. Perform dependency analysis on the initial list of dependent elements to obtain all elements that have direct or indirect strong style state dependencies; Aggregate all elements with direct or indirect strong style state dependencies to obtain atomic rendering units.

[0030] In this embodiment of the invention, the reference source of the custom attribute is located in different document object model elements.

[0031] Specifically, dependency analysis is performed on the initial list of dependent elements. That is, if the counter or custom attribute defined by element A is referenced by element B, then element A and element B are determined to have a strong style state dependency.

[0032] In this embodiment of the invention, the rules are parsed, including: Construct a custom attribute dependency graph, where nodes are custom attribute names and edges represent attribute value references. When it is recognized that the value of custom attribute A is defined as custom attribute B, an edge is established from custom attribute B to custom attribute A. By traversing this custom property dependency graph, all sets of custom properties with transitive dependencies are identified.

[0033] This invention further analyzes the document object model to locate the root element that defines these associated custom attributes and all descendant elements that reference these attributes, and then combines the root element and descendant elements together as an extended atomic rendering unit.

[0034] Specifically, step 3 includes: The granularity benchmark value for segmentation is determined based on the comprehensive performance coefficient, and this granularity benchmark value is negatively correlated with the comprehensive performance coefficient. Using nodes of the content structure tree as the basic unit, regions are divided according to the natural boundaries formed by the visual formatting context, resulting in multiple regions; Dependency analysis is performed on the internal resources of each initial region to generate a resource dependency graph. All tightly coupled node clusters in the resource dependency graph are packaged to obtain multiple candidate pieces. The estimated rendering complexity of each candidate piece is compared with the fragment granularity baseline value to obtain the comparison result. Based on the comparison result, all candidate pieces are processed to obtain multiple dynamic pieces.

[0035] Specifically, the granularity benchmark value for segmentation is determined based on the overall performance coefficient, including: Preset a first performance coefficient threshold, a second performance coefficient threshold, and a third performance coefficient threshold; When the overall performance coefficient is less than the first performance coefficient threshold, the minimum fragmentation granularity benchmark value is taken as the fragmentation granularity benchmark value to force fine-grained fragmentation, thereby minimizing the load of a single rendering task. When the overall performance coefficient is greater than the first performance coefficient threshold and less than the second performance coefficient threshold, the granularity benchmark value of the segmentation is calculated using the overall performance coefficient, the first performance coefficient threshold, and the second performance coefficient threshold. When the overall performance coefficient is greater than the second performance coefficient threshold and less than the third performance coefficient threshold, the granularity benchmark value of the segmentation is calculated using the overall performance coefficient, the second performance coefficient threshold, and the third performance coefficient threshold. When the overall performance coefficient is greater than the third performance coefficient threshold, the maximum segmentation granularity benchmark value is taken as the segmentation granularity benchmark value.

[0036] The preferred method is to calculate the granularity benchmark value using the comprehensive performance coefficient, the first performance coefficient threshold, and the second performance coefficient threshold as follows: ; in, Indicates the granularity reference value for segmentation. This represents the minimum granularity reference value. This represents the median of the preset granularity reference value. Indicates the overall performance coefficient. This represents the first performance coefficient threshold. This represents the threshold value for the second performance coefficient.

[0037] Similarly, the expression for calculating the granularity benchmark value using the comprehensive performance coefficient, the second performance coefficient threshold, and the third performance coefficient threshold is as follows: ; in, Indicates the granularity reference value for segmentation. This represents the maximum granularity reference value. Indicates the overall performance coefficient. This represents the threshold value for the third performance coefficient.

[0038] In this embodiment of the invention, when an atomic rendering unit is divided into multiple initial regions, in order to ensure the integrity of the atomic rendering unit, these initial regions need to be merged into one region.

[0039] Specifically, based on the comparison results, all candidate pieces are processed to obtain multiple dynamic pieces, including: When the comparison result shows that the estimated rendering complexity of the candidate piece is greater than the fragment granularity baseline value, under the premise of complying with the atomic rendering unit constraints, the branch nodes in the mask content structure tree will split the candidate piece whose estimated rendering complexity is greater than the fragment granularity baseline value to obtain the split pieces, and all the split pieces will be regarded as dynamic pieces. When the comparison result shows that the estimated rendering complexity of the candidate piece is much smaller than the fragment granularity baseline value, all candidate pieces whose estimated rendering complexity is much smaller than the fragment granularity baseline value are merged to obtain a large piece, and this large piece is used as a dynamic piece.

[0040] In this embodiment of the invention, each dynamic piece is accompanied by an independent resource list, a document object model subtree scope, and an initial rendering context.

[0041] Specifically, step 4 includes: Get the current browser viewport's position in the page coordinate system The prediction results of user interaction behavior, where the prediction results are the next interaction target position predicted by listening to the sequence of user input events. ; Each dynamic piece is calculated by using the current browser viewport's position in the page coordinate system, the overlap ratio between the dynamic piece's content area and the dynamic piece's content area, and the preset importance weights of the functional modules described in the dynamic piece. Basic priority score ; The dynamic adjustment factor is calculated based on the comprehensive performance coefficient, the user's real-time scrolling speed, and the Euclidean distance between the center position of the tile and the prediction result. The calculation expression is as follows:

[0042] in, Indicates the first The dynamic adjustment factor of each dynamic piece. , , Both represent preset monotonic functions. Indicates the user's real-time scrolling speed. This represents the Euclidean distance between the center of the patch and the prediction result; Based on each dynamic fragment The expression for calculating the final priority value of each dynamic piece using the base priority score and dynamic adjustment factor is as follows:

[0043] in, Indicates the first The final priority value of each dynamic fragment; The final priority values ​​of each dynamic fragment are sorted in descending order to generate an ordered list of fragment scheduling instructions. This list of fragmented scheduling instructions The rendering order of each dynamic piece and the concurrent allocation strategy for resource requests were clearly defined.

[0044] Specifically, step 5 includes: Based on the fragmented scheduling instruction list, the resource requests of high-priority dynamic fragments are evenly distributed to different channels for concurrent download. For any dynamic fragment, once its hypertext markup language skeleton and cascading style sheet resources are loaded, its corresponding document object model subtree fragment and cascading style sheet rules are immediately injected into an independent rendering task queue. For dynamic pieces that have entered or are about to enter the browser viewport, their rendering tasks are scheduled first, and incremental document object model update technology is used to submit the calculated layout results to the composition thread in batches to update the corresponding areas in the frame buffer. For low-priority dynamic fragments, their resource requests are placed in a waiting queue or their request bandwidth weight is actively reduced. For their corresponding document object model subtree fragments, only lightweight caching is performed without triggering any layout or drawing operations.

[0045] This invention provides an iterative optimization method that, when the overall performance coefficient is detected... The current browser viewport's position in the page coordinate system. When significant changes occur, a re-evaluation process for the dynamic sharding strategy is triggered. The input to this re-evaluation process is the latest overall performance coefficients. The current browser viewport's position in the page coordinate system. The system updates the atomic rendering units and repeats the processing logic described in steps 3 to 5, re-dividing dynamic fragments, calculating priorities, and generating a new fragment scheduling instruction list. When environmental performance improves, the fragment granularity baseline value is automatically increased. The system tends to merge small fragments to reduce scheduling overhead; when a drop in rendering frame rate or an increase in interaction latency is detected, the system automatically reduces... Large blocks are broken down to distribute the computational load. This adaptive loop continues until the page is unloaded, thus ensuring a smooth loading and rendering experience regardless of device performance, network conditions, and user interaction modes.

[0046] This invention collects and processes device performance parameters and network status parameters to obtain a comprehensive performance coefficient; it parses the Cascading Style Sheets (CSS) rules associated with the content structure tree of the page to be loaded to obtain an initial list of dependent elements, and performs dependency analysis on the elements in the initial list to obtain atomic rendering units; it divides the page content according to the comprehensive performance coefficient, atomic rendering units, and content structure tree to obtain multiple dynamic chunks; it obtains the current browser viewport's position information in the page coordinate system and the prediction results of user interaction behavior, and calculates the final priority value of each dynamic chunk based on the position information, prediction results, and comprehensive performance coefficient to obtain the chunking scheduling of each dynamic chunk. The instruction list is used to render all dynamic segments in descending order of priority based on the segmented scheduling instruction list. Compared with the prior art, this embodiment of the invention proposes to add a parsing and constraint mechanism for atomic rendering units before dynamic segmentation, ensuring that subsequent segmentation will never destroy the integrity of the page's key style logic. Based on position information, prediction results, and comprehensive performance coefficients, the final priority value of each dynamic segment is calculated to obtain the segmented scheduling instruction list for each dynamic segment. This achieves synchronous response to user intent and system resources, enabling the system to more accurately prioritize the core content that users urgently need, improving performance while maintaining the final correctness and consistency of the page rendering result.

[0047] Corresponding to the Web page rendering optimization method described in the above embodiments, such as Figure 2 As shown, this embodiment of the invention also provides a Web page rendering optimization device 100, which includes: The acquisition module 101 is used to acquire and process the device performance parameters and network status parameters of the target user terminal to obtain the comprehensive performance coefficient. Analysis module 102 is used to parse the Cascading Style Sheet rules associated with the content structure tree of the page to be loaded, obtain an initial list of dependent elements, and perform dependency analysis on the elements in the initial list of dependent elements to obtain atomic rendering units. The partitioning module 103 is used to partition the page content according to the comprehensive performance coefficient, atomic rendering unit and content structure tree to obtain multiple dynamic blocks; The calculation module 104 is used to obtain the position information of the current browser viewport in the page coordinate system, the prediction results of user interaction behavior, and calculate the final priority value of each dynamic block based on the position information, prediction results, and comprehensive performance coefficient to obtain the fragmentation scheduling instruction list of each dynamic block. Rendering module 105 is used to render all dynamic fragments in descending order of priority based on the fragment scheduling instruction list.

[0048] It should be noted that the information interaction and execution process between the above-mentioned devices / units are based on the same concept as the method embodiments of this application. For details on their specific functions and technical effects, please refer to the method embodiments section, and they will not be repeated here.

[0049] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this application. The specific working process of the units and modules in the above system can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0050] This invention also provides a terminal device, such as... Figure 3 As shown, the terminal device D10 of this embodiment includes: at least one processor D100 ( Figure 3 The diagram shows only one processor, a memory D101, and a computer program D102 stored in the memory D101 and executable on the at least one processor D100. When the processor D100 executes the computer program D102, it implements the above-described Web page rendering optimization method.

[0051] The terminal device D10 can be a desktop computer, laptop, handheld computer, server, server cluster, or cloud server, etc. This terminal device may include, but is not limited to, a processor D100 and a memory D101. Those skilled in the art will understand that... Figure 3 This is merely an example of terminal device D10 and does not constitute a limitation on terminal device D10. It may include more or fewer components than shown in the figure, or combine certain components, or different components, such as input / output devices, network access devices, etc.

[0052] The processor D100 can be a central processing unit (CPU), or it can be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor.

[0053] In some embodiments, the memory D101 may be an internal storage unit of the terminal device D10, such as a hard disk or memory of the terminal device D10. In other embodiments, the memory D101 may be an external storage device of the terminal device D10, such as a plug-in hard disk, smart media card (SMC), secure digital card (SD), flash card, etc., equipped on the terminal device D10. Furthermore, the memory D101 may include both internal and external storage units of the terminal device D10. The memory D101 is used to store the operating system, applications, bootloader, data, and other programs, such as the program code of the computer program. The memory D101 can also be used to temporarily store data that has been output or will be output.

[0054] It should be noted that the information interaction and execution process between the above-mentioned devices / units are based on the same concept as the method embodiments of this application. For details on their specific functions and technical effects, please refer to the method embodiments section, and they will not be repeated here.

[0055] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this application. The specific working process of the units and modules in the above system can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0056] This invention also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements a web page rendering optimization method.

[0057] If the integrated unit is implemented as 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, all or part of the processes in the methods of the above embodiments of this application can be implemented by a computer program instructing related hardware. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. The computer-readable medium can include at least: any entity or device capable of carrying the computer program code to a building device / terminal device, a recording medium, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electrical carrier signal, a telecommunication signal, and a software distribution medium. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks.

[0058] The above description represents the preferred embodiments of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A method for optimizing web page rendering, characterized in that, include: Step 1: Collect and process the device performance parameters and network status parameters of the target user terminal to obtain the comprehensive performance coefficient; Step 2: Parse the Cascading Style Sheet rules associated with the content structure tree of the page to be loaded to obtain an initial list of dependent elements, and perform dependency analysis on the elements in the initial list of dependent elements to obtain atomic rendering units; Step 3: Divide the page content according to the comprehensive performance coefficient, the atomic rendering unit, and the content structure tree to obtain multiple dynamic blocks; Step 4: Obtain the position information of the current browser viewport in the page coordinate system, the prediction result of user interaction behavior, and calculate the final priority value of each dynamic block based on the position information, the prediction result, and the comprehensive performance coefficient to obtain the fragmentation scheduling instruction list for each dynamic block. Step 5: Render all dynamic fragments in descending order of priority based on the fragment scheduling instruction list.

2. The Web page rendering optimization method according to claim 1, characterized in that, Step 1 includes: Collect device performance parameters of the target user terminal, including the number of CPU cores, CPU clock speed, available memory size, and image processing capability score obtained through graphics performance benchmark test; The network status parameters of the target user terminal are used, including the current downlink bandwidth, network round-trip time, and packet loss rate. The device performance parameters and network state parameters are quantized using a normalization function to obtain initial performance coefficients; The initial performance coefficients are linearly weighted and summed according to a preset weight vector to obtain the comprehensive performance coefficients.

3. The Web page rendering optimization method according to claim 1, characterized in that, Step 2 includes: For each rule in the Cascading Style Sheet rules associated with the content structure tree of the page to be loaded, the rule is parsed to obtain all style declarations containing counter reset, counter increment, counter function, and reference to custom properties; The initial list of dependent elements is obtained by back-mapping all style declarations to the specific document object model elements to which they are applied. Dependency analysis is performed on the initial list of dependent elements to obtain all elements that have direct or indirect strong style state dependencies; Aggregate all elements with direct or indirect strong style state dependencies to obtain atomic rendering units.

4. The Web page rendering optimization method according to claim 1, characterized in that, Step 3 includes: The particle size reference value is determined based on the comprehensive performance coefficient; Using the nodes of the content structure tree as the basic unit, regions are divided according to the natural boundaries formed by the visual formatting context to obtain multiple regions; Dependency analysis is performed on the internal resources of each initial region to generate a resource dependency graph. All tightly coupled node clusters in the resource dependency graph are then packaged to obtain multiple candidate fragments. The estimated rendering complexity of each candidate piece is compared with the fragment granularity baseline value to obtain the comparison result. Based on the comparison result, all candidate pieces are processed to obtain multiple dynamic pieces.

5. The Web page rendering optimization method according to claim 4, characterized in that, The granularity benchmark value for segmentation is determined based on the comprehensive performance coefficient, including: Preset a first performance coefficient threshold, a second performance coefficient threshold, and a third performance coefficient threshold; When the overall performance coefficient is less than the first performance coefficient threshold, the minimum segmentation granularity benchmark value is taken as the segmentation granularity benchmark value. When the overall performance coefficient is greater than the first performance coefficient threshold and less than the second performance coefficient threshold, the granularity benchmark value of the segment is calculated using the overall performance coefficient, the first performance coefficient threshold, and the second performance coefficient threshold. When the overall performance coefficient is greater than the second performance coefficient threshold and less than the third performance coefficient threshold, the granularity benchmark value is calculated using the overall performance coefficient, the second performance coefficient threshold, and the third performance coefficient threshold. When the overall performance coefficient is greater than the third performance coefficient threshold, the maximum segmentation granularity benchmark value is taken as the segmentation granularity benchmark value.

6. The Web page rendering optimization method according to claim 5, characterized in that, The expression for calculating the granularity benchmark value using the comprehensive performance coefficient, the first performance coefficient threshold, and the second performance coefficient threshold is as follows: ； in, Indicates the granularity reference value for segmentation. This represents the minimum granularity reference value. This represents the median of the preset granularity reference value. Indicates the overall performance coefficient. This represents the first performance coefficient threshold. This represents the threshold value for the second performance coefficient.

7. The Web page rendering optimization method according to claim 4, characterized in that, Based on the comparison results, all candidate fragments are processed to obtain multiple dynamic fragments, including: When the comparison result is that the estimated rendering complexity of the candidate piece is greater than the fragment granularity benchmark value, under the premise of complying with the atomic rendering unit constraints, the branch nodes in the content structure tree are masked to split the candidate piece whose estimated rendering complexity is greater than the fragment granularity benchmark value, and the split pieces are all treated as dynamic pieces. When the comparison result shows that the estimated rendering complexity of the candidate piece is much smaller than the fragment granularity benchmark value, all candidate pieces whose estimated rendering complexity is much smaller than the fragment granularity benchmark value are merged to obtain a large piece, and this large piece is used as a dynamic piece.

8. A web page rendering optimization device, characterized in that, include: The acquisition module is used to collect and process the device performance parameters and network status parameters of the target user terminal to obtain the comprehensive performance coefficient. The analysis module is used to parse the Cascading Style Sheet rules associated with the content structure tree of the page to be loaded, obtain an initial list of dependent elements, and perform dependency analysis on the elements in the initial list of dependent elements to obtain atomic rendering units. The partitioning module is used to partition the page content according to the comprehensive performance coefficient, the atomic rendering unit, and the content structure tree to obtain multiple dynamic blocks; The calculation module is used to obtain the position information of the current browser viewport in the page coordinate system, the prediction results of user interaction behavior, and calculate the final priority value of each dynamic block based on the position information, the prediction results, and the comprehensive performance coefficient to obtain the fragmentation scheduling instruction list of each dynamic block. The rendering module is used to render all dynamic fragments in descending order of priority based on the fragment scheduling instruction list.

9. A terminal device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the Web page rendering optimization method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the Web page rendering optimization method as described in any one of claims 1 to 7.

Images