Search

CN-121979607-A - Web page rendering optimization method and related equipment

CN121979607ACN 121979607 ACN121979607 ACN 121979607ACN-121979607-A

Abstract

The invention provides a Web page rendering optimization method and related equipment, which are used for acquiring equipment performance parameters and network state parameters and processing the parameters to obtain comprehensive performance coefficients, analyzing cascading style sheet rules related to a content structure tree of a page to be loaded to obtain an initial dependency element list, analyzing the dependency relationship of elements in the initial dependency element list to obtain an atomic rendering unit, dividing page contents according to the comprehensive performance coefficients, the atomic rendering unit and the content structure tree to obtain a plurality of dynamic tiles, acquiring the position information of a current browser viewport in a page coordinate system and a prediction result of user interaction behavior, calculating the final priority value of each dynamic tile based on the position information, the prediction result and the comprehensive performance coefficients to obtain a tile scheduling instruction list of each dynamic tile to render all dynamic tiles, and maintaining the final correctness and consistency of the page rendering result while improving the performance.

Inventors

  • WU DI
  • ZENG HUAN

Assignees

  • 湖南小算科技信息有限公司

Dates

Publication Date
20260505
Application Date
20260127

Claims (10)

  1. 1. A Web page rendering optimization method, comprising: Step 1, collecting and processing equipment performance parameters and network state parameters of a target user terminal to obtain a comprehensive performance coefficient; Step 2, analyzing cascading style sheet rules associated with a content structure tree of a page to be loaded to obtain an initial dependency element list, and analyzing the dependency relationship of elements in the initial dependency element list to obtain an atomic rendering unit; Step 3, dividing page contents according to the comprehensive performance coefficient, the atomic rendering unit and the content structure tree to obtain a plurality of dynamic tiles; Step 4, obtaining the position information of the current browser viewport in a page coordinate system and a prediction result of user interaction behavior, and calculating a final priority value of each dynamic tile based on the position information, the prediction result and the comprehensive performance coefficient to obtain a tile scheduling instruction list of each dynamic tile; and 5, rendering all the dynamic tiles according to the sequence from high priority to low priority based on the tile scheduling instruction list.
  2. 2. The Web page rendering optimization method according to claim 1, wherein the step 1 comprises: Collecting equipment performance parameters of a target user terminal, wherein the equipment performance parameters comprise a central processing unit core number, a central processing unit main frequency, an available memory size and an image processing capacity score obtained through a graph performance benchmark test; adopting network state parameters of a target user terminal, wherein the network state parameters comprise current downlink bandwidth, network round trip delay and packet loss rate; Carrying out quantization processing on the equipment performance parameters and the network state parameters by using a normalization function to obtain an initial performance coefficient; And carrying out linear weighted summation on the initial performance coefficients according to a preset weight vector to obtain the comprehensive performance coefficients.
  3. 3. The Web page rendering optimization method according to claim 1, wherein the step 2 comprises: Aiming at each rule in cascading style sheet rules associated with a content structure tree of a page to be loaded, analyzing the rule to obtain all style statements containing counter reset, counter increment, counting functions and reference custom attributes; reverse mapping is carried out on the applied specific document object model elements by using all style declarations, and an initial dependency element list is obtained; Performing dependency analysis on the initial dependency element list to obtain all elements with direct or indirect strong style state dependency; And aggregating all elements with direct or indirect strong style state dependency relationship to obtain an atomic rendering unit.
  4. 4. The Web page rendering optimization method according to claim 1, wherein the step 3 comprises: Determining a fragment granularity reference value according to the comprehensive performance coefficient; taking nodes of the content structure tree as basic units, and dividing the regions according to natural boundaries formed by visual formatting contexts to obtain a plurality of regions; performing dependency analysis on internal resources of each initial region to generate a resource dependency graph, and packaging all tightly coupled node clusters in the resource dependency graph to obtain a plurality of candidate tiles; And comparing the estimated rendering complexity of each candidate block with the slice granularity reference value to obtain a comparison result, and processing all candidate blocks according to the comparison result to obtain a plurality of dynamic blocks.
  5. 5. The Web page rendering optimization method of claim 4, wherein determining a fragment granularity reference value from the integrated performance coefficient comprises: presetting a first coefficient of performance threshold, a second coefficient of performance threshold and a third coefficient of performance threshold; when the comprehensive performance coefficient is smaller than the first performance coefficient threshold value, taking a minimum slicing granularity reference value as a slicing granularity reference value; When the comprehensive performance coefficient is larger than the first performance coefficient threshold and smaller than the second performance coefficient threshold, calculating to obtain a fragmentation granularity reference value by using the comprehensive performance coefficient, the first performance coefficient threshold and the second performance coefficient threshold; When the comprehensive performance coefficient is larger than the second performance coefficient threshold and smaller than the third performance coefficient threshold, calculating to obtain a fragmentation granularity reference value by using the comprehensive performance coefficient, the second performance coefficient threshold and the third performance coefficient threshold; And when the comprehensive performance coefficient is larger than the third performance coefficient threshold, taking the maximum slicing granularity reference value as the slicing granularity reference value.
  6. 6. The Web page rendering optimization method according to claim 5, wherein the expression for calculating the slice granularity reference value by using the comprehensive performance coefficient, the first performance coefficient threshold value, and the second performance coefficient threshold value is: ; Wherein, the The reference value of the slice granularity is represented, A minimum slice granularity reference value is represented, Indicating the median value of preset fragment granularity reference values, The coefficient of performance of the composite is represented, A first coefficient of performance threshold value is represented, Representing a second coefficient of performance threshold.
  7. 7. The Web page rendering optimization method according to claim 4, wherein processing all candidate tiles according to the comparison result to obtain a plurality of dynamic tiles comprises: When the comparison result is that the estimated rendering complexity of the candidate block is larger than the slicing granularity reference value, masking branch nodes in the content structure tree to split the candidate block with the estimated rendering complexity larger than the slicing granularity reference value on the premise of adhering to the constraint of the atomic rendering unit to obtain split blocks, and taking all split blocks as dynamic blocks; And when the comparison result is that the estimated rendering complexity of the candidate block is far smaller than the slicing granularity reference value, merging all candidate blocks with the estimated rendering complexity far smaller than the slicing granularity reference value to obtain a large block, and taking the large block as a dynamic block.
  8. 8. A Web page rendering optimization apparatus, comprising: the acquisition module is used for acquiring and processing the equipment performance parameters and the network state parameters of the target user terminal to obtain a comprehensive performance coefficient; the analysis module is used for analyzing the cascading style sheet rules associated with the content structure tree of the page to be loaded to obtain an initial dependency element list, and analyzing the dependency relationship of the elements in the initial dependency element list to obtain an atomic rendering unit; The dividing module is used for 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 tiles; the computing module is used for acquiring the position information of the current browser viewport in the page coordinate system and the prediction result of the user interaction behavior, and computing the final priority value of each dynamic tile based on the position information, the prediction result and the comprehensive performance coefficient to obtain a tile scheduling instruction list of each dynamic tile; and the rendering module is used for rendering all the dynamic tiles according to the sequence from high priority to low priority based on the tile scheduling instruction list.
  9. 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 the processor implements the Web page rendering optimization method according to any one of claims 1 to 7 when executing the computer program.
  10. 10. A computer readable storage medium storing a computer program, wherein the computer program when executed by a processor implements the Web page rendering optimization method according to any one of claims 1 to 7.

Description

Web page rendering optimization method and related equipment Technical Field The invention relates to the technical field of Web front-end performance optimization, in particular to a Web page rendering optimization method and related equipment. Background With the rapid development of Web technology, modern Web pages have evolved from simple information display carriers to application programs with complex functions, rich interaction and dynamic content, and the page content is increasingly complex, so that the network resource volumes such as hypertext markup language (Hyper Text Markup Language, HTML), cascading style sheets (CASCADING STYLE SHEETS, CSS), transliteration script language JavaScript, multimedia and the like required by loading the Web pages are greatly increased, which brings serious challenges to the loading speed and rendering smoothness of a user side. The interface is blocked when waiting, rolling or operating for a long time, so that the experience of a user is seriously influenced, and the user is lost, therefore, how to ensure quick and smooth user perception in a large-scale and high-complexity page scene becomes a core subject in the field of front-end performance optimization. To address this challenge, the industry proposes various optimization strategies based on slicing, chunking or on-demand loading, and these prior arts mainly start from two core ideas of "reducing single processing load" and "preferentially processing key content" and aim to increase page response speed. The main stream scheme in the prior art is a slice/virtualization technology based on view port or data scale, for example, a dynamic data loading and rendering method based on Lucky sheet, which blocks large-scale data, loads and renders only data blocks required by the current view, adopts a virtual DOM technology to reduce actual DOM operation, and effectively relieves memory pressure and rendering blockage, and the core logic is to divide the content into independent blocks or slices and schedule according to requirements. Another common scheme is a separate loading technology based on resource types and priorities, for example, a dynamic page loading optimization method and device based on user behaviors and network environments, further introduces perceptibility to the user behaviors and the network environments to dynamically adjust loading priorities and strategies of different resources, and optimizes a key rendering path by distinguishing content properties and execution sequences. However, when the prior art is applied to a modern Web page with high complexity and strong style coupling degree, a technical problem still exists that when the content is divided by the existing slicing or blocking strategy, the prior art usually only depends on the explicit dimensions such as geometric positions, data boundaries or resource types, and the implicit style state dependency relationship which may exist inside the page content and is crucial to the consistency of rendering results is ignored. The root cause of this problem is that the prior art slicing logic lacks analysis and honoring of deep-seated dependency of CSS negative models. They reduce pages to a set of resources and boxes, but fail to consider them as a complete rendering ecosystem containing state and context information. Therefore, when these techniques are used to perform aggressive optimization on complex pages, although it is possible to obtain an index boost of the loading speed, at the expense of the integrity of the page functions and the correctness of the vision, a contradictory situation of "loading is faster but the pages are in error" is created, which is unacceptable in applications with extremely high functional and experience requirements. Disclosure of Invention The invention provides a Web page rendering optimization method and related equipment, which aim to improve performance and simultaneously maintain final correctness and consistency of a page rendering result. In order to achieve the above object, the present invention provides a Web page rendering optimization method, including: Step 1, collecting and processing equipment performance parameters and network state parameters of a target user terminal to obtain a comprehensive performance coefficient; Step 2, analyzing cascading style sheet rules associated with the content structure tree of the page to be loaded to obtain an initial dependency element list, and analyzing the dependency relationship of elements in the initial dependency element list to obtain an atomic rendering unit; Step 3, dividing page contents according to the comprehensive performance coefficient, the atomic rendering unit and the content structure tree to obtain a plurality of dynamic tiles; Step 4, obtaining the position information of the current browser viewport in the page coordinate system and the prediction result of the user interaction behavior, and calculating the final priority value of