Page layout rearrangement / redrawing optimization method and system and computer equipment

Abstract

The invention provides a page layout rearrangement / redrawing optimization method and system and computer equipment, and the method comprises the steps: carrying out real-time rearrangement / redrawing task triggering monitoring for a browser, and generating a rearrangement / redrawing task queue; performing dynamic priority grading on the rearrangement / redrawing tasks; monitoring the load proportion of the high-priority task in real time; meanwhile, determining a current frame interval and / or single-frame processing time; adjusting the task collection interval according to the current frame interval and / or the single frame processing time based on a dynamic interval adjustment rule; and according to the adjusted task collection interval, collecting the rearrangement / redrawing tasks according to task priorities, and performing unified layout calculation to generate an optimized rendering layout tree so as to execute page rendering according to the rendering layout tree. According to the method and the device, the task processing strategy is flexibly adjusted according to the real-time load condition, so that the page can still stably and smoothly run under the high load, the jamming phenomenon is avoided, and a more reliable browsing environment is provided for a user.

Description

Technical Field

[0001] The present invention relates to the technical field of browser page rendering, and in particular to a page layout rearrangement / redrawing optimization method and system, and computer equipment. Background Art

[0002] Existing technologies have achieved certain results in optimizing the layout reflow / redrawing of complex pages. However, some problems still exist in practical applications, especially the drawbacks of setting fixed time intervals in reflow task processing. Specifically, they include the following aspects:

[0003] 1) Difficulty adapting to dynamic task loads: In actual web page interactions, when a large number of reordering tasks are triggered in a short period of time, such as when users perform fast scrolling operations or the page performs high-frequency data updates, a fixed 16ms time interval may not be able to meet the needs of task processing. At this time, a large number of reordering tasks will accumulate in the queue, and the browser's single-frame processing capability is limited, approximately 1 frame ≈ 16ms. This causes the tasks in the task queue to exceed the browser's single-frame processing capability, causing layout calculation timeouts, resulting in page freezes, and seriously affecting the user experience. Take an e-commerce page containing a large number of images and dynamic data as an example. When users scroll quickly to browse products, the loading of images and the updating of data will trigger a large number of reordering tasks. If a fixed 16ms time interval is used, the page will easily freeze and users will not be able to browse product information smoothly.

[0004] 2) Delayed execution of critical tasks: For rescheduling tasks related to real-time user interaction on the page, such as element position changes triggered by clicking a button, the fixed 16ms interval may cause the task to be delayed until the next cycle. This is because under the fixed time interval mechanism, even high-priority real-time interaction tasks need to wait until the next time interval to be processed, resulting in delayed visual feedback and affecting the user experience. For example, in the operation interface of an online game, when a user clicks a skill release button, the skill release animation effect may be delayed due to the fixed time interval. This will greatly affect the player's gaming experience in game scenarios that require real-time response.

[0005] 3) Poor browser version compatibility: Different browsers have different event loop mechanisms and rendering refresh rates. The refresh rate of some devices is 120Hz, which corresponds to a single frame of about 8ms, and the fixed 16ms interval cannot adapt to all scenarios. On high refresh rate devices, the 16ms time interval may cause tasks to be processed untimely, affecting the smoothness of the page; and on some older browsers, due to their different performance and mechanisms, the fixed 16ms interval may not be able to play an effective role, resulting in unstable optimization effects. For example, on some lower versions of browsers, tasks may not be processed accurately according to the 16ms time interval, resulting in problems such as page flickering and abnormal element display. Summary of the Invention

[0006] To this end, the present invention provides a page layout rearrangement / redrawing optimization method and system, and computer equipment, aiming to solve the technical problems existing in the prior art in the rearrangement task processing, such as difficulty in adapting to dynamic task loads, delayed execution of key tasks, and poor browser version compatibility.

[0007] To achieve the above objectives, the present invention adopts the following technical solutions:

[0008] According to a first aspect of the present invention, the present invention provides a page layout rearrangement / redrawing optimization method, the method comprising:

[0009] Step S1: performing real-time reordering / redrawing task triggering monitoring on the browser, determining the triggering source type and impact scope type of the reordering / redrawing task, and adding the task to the reordering / redrawing task queue;

[0010] Step S2: dynamically prioritizing the plurality of reordering / redrawing tasks in the reordering / redrawing task queue based on the trigger source type;

[0011] Step S3: monitoring the load ratio of high-priority tasks in the reordering / redrawing task queue in real time; and determining the current frame interval and / or single-frame processing time of the browser;

[0012] Step S4: If the browser is a modern browser, the task collection interval is adjusted according to the current frame interval and / or single frame processing time based on a dynamic interval adjustment rule that matches the load ratio of high-priority tasks;

[0013] Step S5: collecting the plurality of rearrangement / redrawing tasks according to the task priority according to the adjusted task collection interval, performing unified layout calculation, generating an optimized rendering layout tree, and executing page rendering according to the rendering layout tree.

[0014] Furthermore, the trigger source types include instant interaction, asynchronous data, timed update, and / or non-visible area task mark; the instant interaction includes button click or form input; the asynchronous data includes AJAX loading data; the timed update includes polling ad slots;

[0015] The dynamically prioritizing the plurality of reordering / redrawing tasks in the reordering / redrawing task queue based on the trigger source type includes:

[0016] If the trigger source type is real-time interactive, the corresponding reordering / redrawing task is a high-priority task;

[0017] If the trigger source type is asynchronous data type, the corresponding reordering / redrawing task is a medium priority task;

[0018] If the trigger source type is a timed update type or a non-visible area task mark, the corresponding reordering / redrawing task is a low priority task.

[0019] Furthermore, the task collection interval is adjusted based on the dynamic interval adjustment rule that matches the load ratio of the high-priority task and the current frame interval and / or single-frame processing time, including:

[0020] If the proportion of the high-priority tasks exceeds a first preset threshold, shortening the task collection interval to 50% of the current frame interval;

[0021] If the proportion of high-priority tasks does not exceed the first preset threshold or the reordering / redrawing task queue only contains medium-priority tasks or low-priority tasks, and the number of layout calculation units corresponding to the pending tasks in the reordering / redrawing task queue does not exceed the maximum value of available layout calculation units, then the current frame interval is used as the task contraction interval.

[0022] Furthermore, the collecting of the plurality of rearrangement / redrawing tasks according to task priorities based on the adjusted task collection interval and performing unified layout calculation includes:

[0023] In the order of high-priority tasks, medium-priority tasks, and low-priority tasks, the reordering / redrawing tasks of corresponding priorities are collected within each task collection interval, and layout calculations are performed uniformly, including:

[0024] For high-priority tasks, layout calculation is triggered within the first current frame interval after being detected in the queue to avoid being blocked by medium-priority tasks and / or low-priority tasks;

[0025] For medium-priority tasks, after being detected in the queue, subtrees are grouped according to the impact range type, and allowed to be merged into the 2nd to yth current frame intervals to trigger layout calculation; the impact range type includes layout layer optimization, rendering layer optimization and / or compositing layer optimization;

[0026] For low-priority tasks, centralized processing is performed after the browser page is in an idle state for more than a first preset time; wherein, the idle state means that no high-priority tasks and medium-priority tasks are queued within a second preset time.

[0027] Furthermore, determining the current frame interval and / or single frame processing time of the browser includes:

[0028] Continuously collect a certain number of requestAnimationFrame callback timestamp sequences, set to {t1, t2, t3…t}, and use the median of the time difference of the timestamp sequence to avoid the influence of occasional jitter. The calculation formula for the current frame interval is:

[0029] Δf=median(t i+1 -t i )

[0030] Where Δf represents the current frame interval; median represents the median function; t i Indicates the timestamp of the i-th callback; t i+1 Indicates the timestamp of the i+1th callback;

[0031] and / or,

[0032] The refresh rate is inferred from the current frame interval to determine the single-frame processing time corresponding to the refresh rate. The calculation formula for the refresh rate is:

[0033]

[0034] Where frameRate represents the refresh rate; X represents the maximum value of the available layout calculation unit; and Δf represents the current frame interval.

[0035] Furthermore, the method further comprises:

[0036] If the number of layout calculation units corresponding to the pending tasks in the reordering / redrawing task queue exceeds the maximum number of available layout calculation units, the emergency task splitting mechanism is triggered, specifically including:

[0037] retaining all high-priority tasks in the reordering / redrawing task queue without splitting them, so as to ensure that the high-priority tasks are processed within the first current frame interval after being enqueued;

[0038] The medium-priority and low-priority tasks in the reorder / redraw task queue are processed hierarchically according to the DOM structure, and the reorder / redraw tasks are divided into subtasks according to the impact range type, and the maximum processing time of each subtask is set to:

[0039] T S ≤a×T f

[0040] Among them, T S Indicates the maximum processing time of the subtask; a<1 indicates the safety factor; T f Indicates the single frame processing time.

[0041] Furthermore, the method further comprises:

[0042] detecting performance-related data of the browser and determining a browser type based on the performance-related data; the browser type includes a modern browser, an old browser, and / or a mobile device browser;

[0043] Performing compatibility adaptation processing that matches the browser type, specifically including:

[0044] For the modern browser, the dynamic adaptive adjustment strategy described in step S4 is executed, and the adjustment interval is allowed to be 4ms to 20ms;

[0045] For older browsers, the interval is fixed at 20ms, and the maximum value of the available layout calculation unit is increased;

[0046] For the mobile device browser, the CPU load status is monitored in real time. When the device is in low power mode, the interval is extended to 32ms.

[0047] Furthermore, the method further comprises:

[0048] Get the device refresh rate via window.devicePixelRatio and / or screen.refreshRate;

[0049] If the device refresh rate is 120 Hz or 144 Hz or above, the minimum threshold of the task collection interval is set to 4 ms or 3 ms or below to ensure that the task processing cycle matches the device refresh rate.

[0050] According to a second aspect of the present invention, the present invention provides a page layout rearrangement / redrawing optimization system, the system comprising:

[0051] A task trigger monitoring module is used to perform real-time reordering / redrawing task trigger monitoring on the browser, determine the trigger source type and impact range type of the reordering / redrawing task, and add it to the reordering / redrawing task queue;

[0052] A dynamic priority classification module, configured to dynamically prioritize a plurality of reordering / redrawing tasks in the reordering / redrawing task queue based on the trigger source type;

[0053] A task load monitoring module is used to monitor in real time the load ratio of high-priority tasks in the reordering / redrawing task queue; and at the same time, determine the current frame interval and / or single frame processing time of the browser;

[0054] an interval dynamic adjustment module, configured to adjust the task collection interval according to the current frame interval and / or single frame processing time based on a dynamic interval adjustment rule that matches the load ratio of high-priority tasks when the browser is a modern browser;

[0055] The task layout calculation module is used to collect the multiple reordering / redrawing tasks according to the task priority based on the adjusted task collection interval, and perform unified layout calculation to generate an optimized rendering layout tree to perform page rendering according to the rendering layout tree.

[0056] According to the third aspect of the present invention, the present invention provides a computer device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein when the processor executes the computer program, the page layout rearrangement / redrawing optimization method as described in any one of the first aspects of the present invention is implemented.

[0057] The present invention adopts the above technical solution and has at least the following beneficial effects:

[0058] Through the solution of the present invention, real-time re-arrangement / re-drawing task trigger monitoring is performed on the browser, and the trigger source type and impact range type of the re-arrangement / re-drawing task are determined, and added to the re-arrangement / re-drawing task queue; based on the trigger source type, multiple re-arrangement / re-drawing tasks in the re-arrangement / re-drawing task queue are dynamically prioritized; the load ratio of high-priority tasks in the re-arrangement / re-drawing task queue is monitored in real time; at the same time, the current frame interval and / or single-frame processing time of the browser is determined; if the browser is a modern browser, the task collection interval is adjusted according to the current frame interval and / or single-frame processing time based on the dynamic interval adjustment rule that matches the load ratio of high-priority tasks; according to the adjusted task collection interval, the multiple re-arrangement / re-drawing tasks are collected according to the task priority, and a unified layout calculation is performed to generate an optimized rendering layout tree, so as to execute page rendering according to the rendering layout tree. In this way, the task processing strategy is flexibly adjusted according to the real-time load situation, ensuring that the page can still run stably and smoothly under high load, avoiding the occurrence of jamming, and providing users with a more reliable browsing environment.

[0059] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0060] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0061] Figure 1 A schematic diagram showing a flow chart of a page layout rearrangement / redrawing optimization method provided by an embodiment of the present invention;

[0062] Figure 2 A schematic diagram of a process of load monitoring and dynamic interval adjustment provided by an embodiment of the present invention is shown;

[0063] Figure 3 A schematic diagram of the process of an emergency splitting mechanism provided by an embodiment of the present invention is shown;

[0064] Figure 4 A schematic diagram showing the structure of a page layout rearrangement / redrawing optimization system provided by an embodiment of the present invention is shown;

[0065] Figure 5 A schematic diagram of the physical structure of a computer device provided by an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0066] Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. Rather, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

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

[0068] The embodiment of the present invention provides a page layout rearrangement / redrawing optimization method, such as Figure 1 As shown, it may at least include the following steps S101 to S105:

[0069] Step S101 : Real-time reordering / redrawing task triggering monitoring is performed on the browser, and the triggering source type and the impact range type of the reordering / redrawing task are determined, and a plurality of reordering / redrawing tasks are added to a reordering / redrawing task queue.

[0070] The browser's rendering engine, as the core component, is responsible for task monitoring, task parsing, and page rendering. Upon receiving resources such as HTML, CSS, and JavaScript, the rendering engine quickly starts. Upon startup, the rendering engine first parses the HTML and constructs a DOM tree. This process is similar to building the frame of a house. Each HTML tag corresponds to a node in the DOM tree, and the text between the tags also forms corresponding text nodes. Simultaneously, the rendering engine parses the CSS and constructs the CSSOM tree. The CSSOM tree, like a house's interior design, specifies the style rules for each element. The DOM and CSSOM trees are then merged to generate the render tree. The render tree only contains elements that need to be displayed on the page. For example, elements set to display: none will not appear in the render tree. After generating the render tree, the rendering engine determines the element layout information and generates a layout tree, specifying each element's geometric properties, such as position and size, on the page. This step is similar to planning the layout of each room within the frame of a house. Finally, the rendering engine generates a render layer tree based on the element's stacking order and positioning properties. The render layer tree is like organizing the different functional areas of a house into layers, ensuring the correct display order of page elements. Based on the above steps, the initial layout tree and rendering layer tree can be obtained, laying the foundation for subsequent page rendering.

[0071] When the browser page interacts or the content changes, a redraw / rearrangement task is generated. The rendering engine can determine the task type and scope of impact through event monitoring, DOM change monitoring, or style parsing. For example, when the user performs operations such as scrolling and clicking, or when the page obtains new data through AJAX or dynamically modifies the style, the rendering engine can monitor events and data changes in real time and quickly determine the trigger source of the reflow / redraw task. For example, when a user clicks a button on the page, the rendering engine can capture this event and obtain the button element that triggered the event. Furthermore, the rendering engine can also analyze the position and layout properties of the event and its child elements in the layout tree to determine the scope of the reflow / redraw. When the page loads new data through AJAX, resulting in content update, the rendering engine obtains the changed nodes through the DOM change monitoring mechanism, and traverses the DOM tree upwards to accurately determine the affected layout scope. For style change trigger sources, such as modifying an element's style properties through JavaScript or dynamically loading a CSS style sheet, the rendering engine will parse the style change content to determine whether it affects the element's layout (such as attributes such as width and height) or drawing (such as attributes such as color and background), thereby determining whether a reflow or redraw needs to be triggered and the corresponding scope of impact.

[0072] The present invention implements a hierarchical optimization process based on the trigger source and impact range determined by the rendering engine. Different trigger sources and impact range sizes / types are categorized. Trigger source types can include real-time interaction, asynchronous data, scheduled updates, and non-visible area task markers. Real-time interaction can include button clicks and form inputs; asynchronous data can include AJAX data loading; and scheduled updates can include polling ad slots.

[0073] Furthermore, the impact range types can be hierarchically divided into layout layer optimization, rendering layer optimization, and synthesis layer optimization. Layout layer optimization refers to triggered global or local reflow. For example, when a user adjusts the size of the browser window, the entire page layout changes, which is a global reflow. In this case, the rendering engine can merge multiple reflow operations and calculate the layout in batches to avoid the impact of frequent layout calculations on performance. If the position or size of an element changes, it is a local reflow. The layout calculation can be performed only on the elements within the impact range, and temporary modifications can be temporarily stored using document fragments to reduce direct operations on the real DOM. It is like when renovating a house, if only the layout of a room needs to be adjusted, only the room needs to be constructed, and there is no need for large-scale renovation of the entire house. For rendering layer optimization, for the rendering layers within the impact range, the same or similar styles can be updated and merged according to the type of style attributes, and drawn in batches to reduce the number of browser drawing operations. Optimize the compositing layer. For GPU-accelerated properties like transform and opacity, the corresponding rendering layer is promoted to a compositing layer. This prevents the CPU from participating in the drawing process, fully utilizes the GPU's parallel computing capabilities, and improves drawing efficiency. Layers that need compositing are arranged in order, prioritizing layers that do not change or change slightly, reducing the number of compositing times and ensuring fast page rendering.

[0074] Based on the above operations, the rendering engine can generate a set of reordering / redrawing tasks to be processed and add it to the reordering / redrawing task queue.

[0075] Step S102 : dynamically prioritizing the plurality of reordering / redrawing tasks in the reordering / redrawing task queue based on the trigger source type.

[0076] When a rescheduling / redrawing task is enqueued, it is assigned a priority tag based on its corresponding trigger source type. Specifically, if the trigger source type is real-time interactive, the corresponding rescheduling / redrawing task is a high-priority task; if the trigger source type is asynchronous data, the corresponding rescheduling / redrawing task is a medium-priority task; if the trigger source type is timed update or non-visible area task tag, the corresponding rescheduling / redrawing task is a low-priority task.

[0077] Step S103 , monitoring the load ratio of high-priority tasks in the reordering / redrawing task queue in real time; and at the same time, determining the current frame interval and / or single-frame processing time of the browser.

[0078] like Figure 2The figure shows a flow chart of load monitoring and dynamic interval adjustment proposed in an embodiment of the present invention. In this embodiment of the present invention, a counter is set in the reordering / redrawing task queue to record the number and proportion of each trigger source type within a preset real-time segment (e.g., 50ms). At the same time, the frame interval of the current browser can be estimated by combining performance.now() with the requestAnimationFrame callback frequency to obtain the single-frame processing time corresponding to the device refresh rate. For a 120Hz device, the single-frame processing time is 8ms.

[0079] It is understandable that this step relies on precise time sampling and classification statistics. Therefore, an embodiment of the present invention uses a sliding window algorithm to perform real-time classification statistics on the newly added rescheduling tasks in the rescheduling / redrawing task queue. The window length is set to 50ms, and all queued rescheduling / redrawing task types are recorded inside the window. By accumulating the number of each type of rescheduling / redrawing tasks and calculating the proportion of instant interactive types in all rescheduling / redrawing tasks in the current window, the rendering engine can grasp the pressure level of high-priority tasks in real time. On this basis, in order to ensure the accuracy of frame interval estimation, an embodiment of the present invention does not use a single-frame callback time, but continuously collects a certain number of requestAnimationFrame callback timestamp sequences, and takes the median of their time differences to avoid the influence of occasional jitter, thereby estimating the current frame interval Δf. Assuming the continuous callback timestamps are {t1, t2, t3…t}, the estimation formula for the frame interval Δf is:

[0080] Δf=median(t i+1 -t i )

[0081] Where Δf represents the current frame interval; median represents the median function; t i Indicates the timestamp of the i-th callback; t i+1 Indicates the timestamp of the i+1th callback.

[0082] Then, the refresh rate is inferred based on the current frame interval to determine the single-frame processing time corresponding to the refresh rate. The calculation formula for the refresh rate is:

[0083]

[0084] Where frameRate represents the refresh rate; X represents the maximum value of the available layout calculation unit, which is generally 1000.

[0085] Step S104 : If the browser is a modern browser, the task collection interval is adjusted according to the current frame interval and / or single frame processing time based on a dynamic interval adjustment rule that matches the load ratio of high-priority tasks.

[0086] Specifically, for modern browsers that request animation frames with high precision, if the proportion of high-priority tasks exceeds a first preset threshold, the task collection interval is shortened to 50% of the current frame interval. If the proportion of high-priority tasks does not exceed the first preset threshold, or the reorder / redraw task queue contains only medium-priority or low-priority tasks, and the number of layout calculation units corresponding to the pending tasks in the reorder / redraw task queue does not exceed the maximum available layout calculation units, the current frame interval is used as the task contraction interval. Preferably, the first preset threshold is 50%.

[0087] That is to say, after obtaining the proportion of high-priority tasks and the frame interval, the rendering engine can determine whether to trigger the collection interval shortening strategy based on whether the proportion of high-priority (real-time interactive) tasks exceeds 50%. If the proportion of high-priority tasks exceeds 50%, the task collection interval will be forcibly shortened to 1 / 2 of the current frame interval, that is, the single-frame processing time of the 120Hz device is set to 4ms to speed up task throughput and ensure the timeliness of user interaction response. The system can automatically compress the task collection and processing cycle under high load conditions, and improve the response priority of the page to key user operations.

[0088] If the proportion of high-priority tasks does not exceed 50% or the current tasks are all medium- and low-priority tasks, it is necessary to determine whether the number of layout calculation units corresponding to the pending tasks in the reordering / redrawing task queue exceeds the maximum available layout calculation units, that is, to determine whether the queue backlog tasks exceed the single-frame processing capacity, generally more than 1000 layout calculation units, triggering the emergency splitting mechanism to split the tasks into multiple sub-batches, and the processing time of each sub-batch does not exceed 80% of the current frame interval.

[0089] It can be understood that the implementation of the emergency splitting mechanism first relies on monitoring the total amount of layout calculation units to be processed in the rearrangement / redrawing task queue. Figure 3 As shown, it is a flow chart of the emergency splitting mechanism proposed in an embodiment of the present invention. When it is monitored that the total number of layout calculation units to be processed currently exceeds 1000, it means that it is difficult to complete the processing of all reordering tasks in the current frame cycle, and the rendering engine immediately triggers the task splitting process to control the rendering load. The core principle of the splitting process is to ensure the integrity of high-priority tasks and avoid affecting the user's instant interactive experience. Specifically, all high-priority tasks in the reordering / redrawing task queue are retained without splitting to ensure that high-priority tasks are processed within the first current frame interval after entering the queue; medium-priority tasks and low-priority tasks in the reordering / redrawing task queue are processed in layers according to the DOM structure, and the reordering / redrawing tasks are divided into subtasks according to the impact range type, and the maximum processing time of each subtask is set to:

[0090] TS ≤a×T f

[0091] Among them, T S Indicates the maximum processing time of the subtask; a<1 indicates a safety factor, which is used to reserve time for other rendering operations of the browser; T f Indicates the single frame processing time. Preferably, a is 0.8.

[0092] That is to say, all reordering / redrawing tasks marked as high-priority tasks are retained as a whole and not split, ensuring that they are processed within this frame. Subsequently, medium / low priority tasks are processed in layers according to the DOM structure, and tasks with a large impact range are divided into multiple independent subtasks according to the logical structure of the DOM subtree, so that each subtask is limited to a smaller layout impact range, which is conducive to parallel scheduling and reduces the risk of computational blocking. In order to ensure that the execution of the split subtasks does not exceed the time budget of the current frame, the rendering engine calculates the single-frame processing time T based on the current device refresh rate. f And set the processing upper threshold T S For example, on a device with a 60Hz refresh rate, the processing time for a single frame is 16ms, and the maximum processing time for each subtask is 12.8ms. The rendering engine roughly estimates the processing time of each subtask based on historical task duration data or the number of affected nodes, and dynamically splits and schedules it into different frame periods according to the restrictions. This mechanism throttles layout rearrangement pressure in high-load scenarios, avoiding page freezes or frame drops caused by task accumulation, ensuring the continuity of the rendering pipeline and the stability of the user experience.

[0093] Furthermore, for the situation where the number of layout calculation units corresponding to the pending tasks in the reordering / redrawing task queue does not exceed the maximum value of the available layout calculation units, and the proportion of high-priority tasks does not exceed 50%, or the reordering / redrawing task queue only contains medium-priority tasks or low-priority tasks, an embodiment of the present invention adopts a dynamic default interval based on the frame interval, that is, the initial value is the current frame interval of 8ms.

[0094] In an optional embodiment, the rendering engine can perform compatibility adaptation processing to match the browser type. First, the browser's performance data must be detected. Based on this performance data, the browser type can be determined, including modern browsers, legacy browsers, and mobile device browsers. In actual applications, the browser type, version, and frame performance data can be detected using navigator.userAgent and performance.getEntriesByType('frame'). Furthermore, the embodiment of the present invention enables the complete dynamic adaptive adjustment strategy described in step S104 for modern browsers that support high-precision requestAnimationFrame, such as Chrome60+, Firefox55+, etc., allowing the interval to be dynamically adjusted between 4ms-20ms; for old browsers that do not support high-precision timing, such as IE11, Edge15 and below, a conservative strategy is adopted with a fixed interval of 20ms, and at the same time, the single-frame processing capability threshold is increased from 1000 layout calculation units to 1500, and the risk of timeout is reduced by increasing the queue buffer; for mobile device browsers, such as iOS Safari, Android Chrome, etc., the CPU load status can be additionally monitored. When it is detected that the device is in low power mode, the interval is extended to 32ms to balance performance and power consumption.

[0095] It should also be noted that embodiments of the present invention can also obtain the device refresh rate through window.devicePixelRatio and / or screen.refreshRate; if the device refresh rate is 120Hz or 144Hz or above, the minimum threshold of the task collection interval is set to 4ms or 3ms or below to ensure that the task processing cycle matches the device refresh rate.

[0096] Step S105 , collecting multiple reordering / redrawing tasks according to the task priority based on the adjusted task collection interval, performing unified layout calculation, generating an optimized rendering layout tree, and executing page rendering according to the rendering layout tree.

[0097] The embodiment of the present invention gives priority to high-priority tasks, that is, in the order of high-priority tasks, medium-priority tasks and low-priority tasks, collects reordering / redrawing tasks of corresponding priorities within each task collection interval, and performs layout calculations in a unified manner. The rendering engine integrates the optimized layout tree and rendering layer tree to generate the final rendering result, draws it on the browser window, and presents a smooth and efficient page to the user.

[0098] Specifically, for high-priority tasks, layout calculation is triggered within the first current frame interval after detection of enqueuing to avoid being blocked by medium-priority tasks and / or low-priority tasks; for medium-priority tasks, after detection of enqueuing, subtrees are grouped according to the impact range type, and allowed to be merged into the 2nd to yth current frame intervals to trigger layout calculation; for low-priority tasks, centralized processing is performed after the browser page has been in an idle state for more than a first preset time; wherein, the idle state is that no high-priority tasks and medium-priority tasks are enqueued within a second preset time.

[0099] That is to say, for high-priority tasks triggered by instant interactions such as changes in element position caused by user button clicks and layout updates caused by form input, layout calculations must be triggered within 1 frame interval after being detected in the queue to avoid being blocked by medium and low priority tasks, ensuring that the visual feedback delay is less than 8ms. For layout update tasks after asynchronous data loading is completed, such as list rendering after AJAX loading table data, it is allowed to be merged into the next or next frame interval for processing. When merging, subtrees are grouped according to the scope of influence to reduce repeated calculations. For low-priority tasks such as timed updates or layout changes in non-visible areas (such as the layout of image loading outside the viewport), they can be processed centrally only after the page has been idle for more than 50ms. The idle state is determined by monitoring that no high / medium priority tasks have been queued within 100ms.

[0100] It should be noted that, in actual applications, the specific values ​​of the above-mentioned preset real-time segment, the first preset threshold, parameter a, parameter y, the first preset time and the second preset time can be dynamically adjusted according to actual needs.

[0101] In order to enhance the understanding of the present invention by those skilled in the art, the following describes an application of a page layout rearrangement / redrawing optimization method provided by the present invention, taking a product display page of an e-commerce platform as an example:

[0102] The product display page of the e-commerce platform has the following characteristics:

[0103] Dynamic display of products: The page displays numerous products. Product information includes pictures, names, prices, descriptions, etc., and product pictures are displayed in the form of a carousel. Users can switch product pictures by clicking the left and right arrow buttons or sliding. At the same time, product pictures will be dynamically loaded according to user operations. When the user switches to a new product picture, the picture will be asynchronously obtained from the server and displayed on the page.

[0104] Frequent user interaction: Users can click on a product image to view product details. The page then uses AJAX to request more detailed product information, including product specifications, user reviews, and so on, and dynamically updates the page display. Users can also add items to the shopping cart on the page. After clicking the "Add to Cart" button, a brief animation will appear, simulating the addition of the item to the cart. At the same time, the number of items in the cart and the total price will be updated in real time. In addition, the page provides a search box, where users can enter keywords to search for products. After entering keywords, the page will quickly filter and display related products based on the keywords.

[0105] Complex styling: The page uses complex CSS styles to enhance the product display. For example, the borders and shadows of product images, as well as the font style and color of product names and prices, have all been carefully designed. CSS animations and transitions are also used, such as fade-in and fade-out animations when switching product images, and a zoom effect when hovering the mouse over a product image, to enhance the user experience.

[0106] The specific implementation steps applied to the product display page of the e-commerce platform are as follows S1 to S4:

[0107] Step S1: Reflow / redraw trigger monitoring:

[0108] On the product display page of the above-mentioned e-commerce platform, when the user performs various operations, the rendering engine will immediately activate the reflow / redraw trigger monitoring mechanism. For example, when a user clicks on a product image to view product details, the rendering engine captures this click event through event monitoring and determines that the trigger source is real-time interactive. Then, by analyzing the product image element that triggered the event and its related DOM nodes, it is determined that this operation will cause the layout of the product details display area to change, and the scope of impact includes all elements in the product details display area. Similarly, when the user enters keywords in the search box, the rendering engine obtains the input event through event monitoring and determines that the trigger source is real-time user interaction. Analysis shows that this operation will cause the layout of the product list area to change because relevant products need to be filtered out based on the keywords and re-displayed. When the page obtains new product information through AJAX requests, the rendering engine obtains the node of the data update through the DOM change monitoring mechanism, determines that the trigger source is asynchronous data, traverses the DOM tree upward, and determines that the affected layout range is the product display area and the related product details area.

[0109] Step S2: Dynamic priority classification and load-aware processing:

[0110] The rendering engine dynamically prioritizes and load-awares the rescheduling tasks identified above. When tasks are queued, tasks requiring immediate user interaction, such as clicking a product image to view details, clicking the "Add to Cart" button, or entering keywords in the search box, are marked as high priority. Asynchronous data tasks, such as loading product details via AJAX and updating shopping cart information, are marked as medium priority. Timed update tasks, such as scheduled updates to the product carousel, are marked as low priority. A counter is also set in the rescheduling / redrawing task queue to count the number and proportion of each task type every 50ms. For example, within a certain time period, statistics show that 10 rescheduling tasks were received within 50ms, including 7 immediate user interaction tasks, 2 asynchronous data tasks, and 1 timed update task, for a total of 70% of these tasks. The current browser frame interval is estimated using performance.now() combined with the requestAnimationFrame callback frequency. Assuming a 60Hz device refresh rate, the estimated frame interval is 16ms. Since the proportion of real-time interactive tasks exceeds 50%, the task collection interval is forcibly shortened to 1 / 2 of the current frame interval, that is, 8ms, to ensure that user operations can receive immediate responses.

[0111] Step S3: Compatibility adaptation processing:

[0112] The rendering engine detects the browser type, version, and frame performance data through navigator.userAgent and performance.getEntriesByType('frame'). If it is detected that the user is using the Chrome browser, and the version is 70+, which supports high-precision requestAnimationFrame, a complete dynamic adaptive adjustment strategy is enabled, allowing the interval to be dynamically adjusted between 4ms-20ms based on the actual task load and browser performance. If it is detected that the user is using the IE11 browser, since it does not support high-precision timing, a conservative strategy is adopted to fix the interval at 20ms, and at the same time increase the single-frame processing capability threshold from 1000 layout calculation units to 1500, increase queue buffering, and reduce the risk of timeouts. For mobile device browsers, such as iOS Safari, the CPU load status is additionally monitored. When it is detected that the device is in low-power mode, the interval is extended to 32ms to balance performance and power consumption.

[0113] Layout Calculation and Rendering: The rendering engine prioritizes high-priority tasks based on adjusted intervals and priorities. Within each interval, tasks are collected according to their priority and layout calculations are performed collectively. For example, when a high-priority task, such as a user clicking on a product image to view details, is queued, layout calculations are immediately triggered within one frame interval (assuming a 16ms interval), rapidly updating the layout of the product details display area. Medium-priority AJAX tasks loading product details are allowed to be merged into the next or next-next frame interval. During merging, subtrees are grouped by their impact to reduce duplicate calculations. Low-priority tasks such as scheduled updates to the product carousel are processed collectively only after the page has been idle for more than 50ms. Idle status is determined by monitoring the queues for 100ms without the entry of high- or medium-priority tasks. After layout calculations are completed, an optimized layout tree is generated and fed into the subsequent rendering process. During the rendering process, prior optimization efforts, such as those for the layout, rendering, and compositing layers in layered optimization, as well as browser-specific optimization strategies in compatibility adaptation, are leveraged to quickly and accurately render the page onto the browser window, presenting users with a smooth and efficient product display.

[0114] The embodiment of the present invention provides a page layout rearrangement / redrawing optimization method, which has at least the following beneficial effects:

[0115] 1) Load adaptation: Through dynamic priority grading and load-aware processing, the present invention can dynamically adjust the rescheduling task collection interval in real time according to the task load and browser performance, and always accurately control the task processing time within the single-frame budget. Whether in a high-load task scenario or in a browser environment with different performance, it can effectively avoid layout calculations blocking the rendering pipeline and ensure smooth rendering of the page. For example, in an e-commerce promotion page, the dynamic update of a large amount of product information and the frequent interactive operations of users will generate a large number of rescheduling tasks. The method of the present invention can flexibly adjust the task processing strategy according to the real-time load situation to ensure that the page can still run stably and smoothly under high load, avoiding the occurrence of freezes.

[0116] 2) Interaction immediacy: For high-priority user instant interaction tasks, the present invention ensures that layout calculations are triggered within one frame interval after being detected as being in the queue, with a response delay of less than 8ms. This allows users to immediately see page feedback when performing operations such as clicking buttons and entering forms, achieving a high degree of synchronization between user operations and visual feedback, greatly improving the user experience. Taking the operating interface of an online game as an example, every click and operation of the player can receive an immediate response, significantly improving the smoothness and interactivity of the game, and enhancing the player's gaming immersion and satisfaction.

[0117] 3) Cross-device compatibility: Through comprehensive compatibility adaptation processing, the present invention can achieve optimal optimization effects in devices with different refresh rates such as 60Hz, 120Hz, 144Hz, and mainstream browsers. Whether on high-performance PC devices or on various mobile devices, it can ensure the smoothness of rendering of complex pages. For example, on mobile phones and tablets of different brands and models, when users access the same web page, they can enjoy a consistent and smooth experience, and there will be no performance problems due to differences in devices and browsers, providing users with a more stable and reliable browsing environment.

[0118] Further, as Figure 1 The specific implementation of the present invention provides a page layout rearrangement / redrawing optimization system, such as Figure 4 As shown, the system may include: a task trigger monitoring module 410 , a dynamic priority classification module 420 , a task load monitoring module 430 , an interval dynamic adjustment module 440 and a task layout calculation module 450 .

[0119] The task trigger monitoring module 410 can be used to monitor the triggering of reorder / redraw tasks in real time for the browser, determine the trigger source type and impact scope type of the reorder / redraw task, and add it to the reorder / redraw task queue;

[0120] The dynamic priority classification module 420 may be used to dynamically prioritize multiple reordering / redrawing tasks in the reordering / redrawing task queue based on the trigger source type;

[0121] The task load monitoring module 430 can be used to monitor the load ratio of high-priority tasks in the reorder / redraw task queue in real time; at the same time, determine the current frame interval and / or single frame processing time of the browser;

[0122] The interval dynamic adjustment module 440 may be used to adjust the task collection interval according to the current frame interval and / or single frame processing time based on a dynamic interval adjustment rule that matches the load ratio of high-priority tasks when the browser is a modern browser;

[0123] The task layout calculation module 450 can be used to collect multiple reordering / redrawing tasks according to task priorities based on the adjusted task collection interval, and perform unified layout calculation to generate an optimized rendering layout tree to perform page rendering according to the rendering layout tree.

[0124] It should be noted that for other corresponding descriptions of the functional modules involved in the page layout rearrangement / redrawing optimization system provided by the embodiment of the present invention, please refer to Figure 1 The corresponding description of the method shown will not be repeated here.

[0125] Based on the above Figure 1 The method shown, accordingly, an embodiment of the present invention also provides a computer-readable storage medium, which stores a computer program, and when the computer program is executed by a processor, it implements the steps of the page layout rearrangement / redrawing optimization method of any of the above embodiments.

[0126] Based on the above Figure 1 The method shown and Figure 4 The embodiment of the system shown in FIG. 1 further provides a physical structure diagram of a computer device, such as Figure 5 As shown, the computer device may include a communication bus, a processor, a memory, and a communication interface. It may also include an input / output interface and a display device. The various functional units may communicate with each other via the bus. The memory stores a computer program, and the processor is configured to execute the program stored in the memory and perform the steps of the page layout rearrangement / redrawing optimization method of the above embodiment.

[0127] Those skilled in the art will clearly understand that the specific working processes of the systems, devices, modules and units described above can refer to the corresponding processes in the aforementioned method embodiments, and for the sake of brevity, they will not be further described here.

[0128] In addition, the functional units in various embodiments of the present invention may be physically independent of each other, or two or more functional units may be integrated together, or all functional units may be integrated into a single processing unit. The above-mentioned integrated functional units may be implemented in the form of hardware, software, or firmware.

[0129] Those skilled in the art will understand that if the integrated functional unit is implemented in the form of software 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 can essentially 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, which includes a number of instructions for enabling a computing device (such as a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention when running the instructions. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0130] Alternatively, all or part of the steps of implementing the aforementioned method embodiments may be accomplished by hardware associated with program instructions (such as a computing device such as a personal computer, a server, or a network device), and the program instructions may be stored in a computer-readable storage medium. When the program instructions are executed by a processor of a computing device, the computing device executes all or part of the steps of the method described in each embodiment of the present invention.

[0131] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that within the spirit and principles of the present invention, they can still modify the technical solutions described in the above embodiments, or make equivalent replacements for some or all of the technical features therein. However, these modifications or replacements do not deviate from the scope of protection of the present invention.

Claims

1. A page layout rearrangement / redrawing optimization method, characterized in that: The method comprises: Step S1: performing real-time reordering / redrawing task triggering monitoring on the browser, determining the triggering source type and impact scope type of the reordering / redrawing task, and adding a plurality of the reordering / redrawing tasks to a reordering / redrawing task queue; Step S2: dynamically prioritizing the plurality of reordering / redrawing tasks in the reordering / redrawing task queue based on the trigger source type; Step S3: monitoring the load ratio of high-priority tasks in the reordering / redrawing task queue in real time; and determining the current frame interval and / or single-frame processing time of the browser; Step S4: If the browser is a modern browser, the task collection interval is adjusted according to the current frame interval and / or single frame processing time based on a dynamic interval adjustment rule that matches the load ratio of high-priority tasks; Step S5: collecting the plurality of rearrangement / redrawing tasks according to the task priority according to the adjusted task collection interval, performing unified layout calculation, generating an optimized rendering layout tree, and executing page rendering according to the rendering layout tree.

2. The method according to claim 1, characterized in that The trigger source types include instant interaction, asynchronous data, timed update and / or non-visible area task mark; the instant interaction includes button click or form input; the asynchronous data includes AJAX loading data; the timed update includes polling ad slots; The dynamically prioritizing the plurality of reordering / redrawing tasks in the reordering / redrawing task queue based on the trigger source type includes: If the trigger source type is real-time interactive, the corresponding reordering / redrawing task is a high-priority task; If the trigger source type is asynchronous data type, the corresponding reordering / redrawing task is a medium priority task; If the trigger source type is a timed update type or a non-visible area task mark, the corresponding reordering / redrawing task is a low priority task.

3. The method according to claim 2, characterized in that The dynamic interval adjustment rule based on matching the load ratio of high-priority tasks and adjusting the task collection interval according to the current frame interval and / or single-frame processing time includes: If the proportion of the high-priority tasks exceeds a first preset threshold, shortening the task collection interval to 50% of the current frame interval; If the proportion of high-priority tasks does not exceed the first preset threshold or the reordering / redrawing task queue only contains medium-priority tasks or low-priority tasks, and the number of layout calculation units corresponding to the pending tasks in the reordering / redrawing task queue does not exceed the maximum value of available layout calculation units, then the current frame interval is used as the task contraction interval.

4. The method according to claim 1, wherein The collecting of the plurality of rearrangement / redrawing tasks according to task priorities based on the adjusted task collection interval and performing unified layout calculation includes: In the order of high-priority tasks, medium-priority tasks, and low-priority tasks, the reordering / redrawing tasks of corresponding priorities are collected within each task collection interval, and layout calculations are performed uniformly, including: For high-priority tasks, layout calculation is triggered within the first current frame interval after being detected in the queue to avoid being blocked by medium-priority tasks and / or low-priority tasks; For medium-priority tasks, after being detected in the queue, subtrees are grouped according to the impact range type, and allowed to be merged into the 2nd to yth current frame intervals to trigger layout calculation; the impact range type includes layout layer optimization, rendering layer optimization and / or compositing layer optimization; For low-priority tasks, centralized processing is performed after the browser page is in an idle state for more than a first preset time; wherein, the idle state means that no high-priority tasks and medium-priority tasks are queued within a second preset time.

5. The method according to claim 1, wherein Determining the current frame interval and / or single frame processing time of the browser includes: Continuously collect a certain number of requestAnimationFrame callback timestamp sequences, set to {t1, t2, t3…t}, and use the median of the time difference of the timestamp sequence to avoid the influence of occasional jitter. The calculation formula for the current frame interval is: Δf=median(t i+1 -t i ) Where Δf represents the current frame interval; median represents the median function; t i Indicates the timestamp of the i-th callback; t i+1 Indicates the timestamp of the i+1th callback; and / or, The refresh rate is inferred from the current frame interval to determine the single-frame processing time corresponding to the refresh rate. The calculation formula for the refresh rate is: Where frameRate represents the refresh rate; X represents the maximum value of the available layout calculation unit; and Δf represents the current frame interval.

6. The method according to claim 3, characterized in that The method further comprises: If the number of layout calculation units corresponding to the pending tasks in the reordering / redrawing task queue exceeds the maximum number of available layout calculation units, the emergency task splitting mechanism is triggered, specifically including: retaining all high-priority tasks in the reordering / redrawing task queue without splitting them, so as to ensure that the high-priority tasks are processed within the first current frame interval after being enqueued; The medium-priority and low-priority tasks in the reorder / redraw task queue are processed hierarchically according to the DOM structure, and the reorder / redraw tasks are divided into subtasks according to the impact range type, and the maximum processing time of each subtask is set to: T S ≤a×T f Among them, T S Indicates the maximum processing time of the subtask; a<1 indicates the safety factor; T f Indicates the single frame processing time.

7. The method according to claims 1 to 6, characterized in that: The method further comprises: detecting performance-related data of the browser and determining a browser type based on the performance-related data; the browser type includes a modern browser, an old browser, and / or a mobile device browser; Performing compatibility adaptation processing that matches the browser type, specifically including: For the modern browser, the dynamic adaptive adjustment strategy described in step S4 is executed, and the adjustment interval is allowed to be 4ms to 20ms; For older browsers, the interval is fixed at 20ms, and the maximum value of the available layout calculation unit is increased; For the mobile device browser, the CPU load status is monitored in real time. When the device is in low power mode, the interval is extended to 32ms.

8. The method according to claim 3, characterized in that The method further comprises: Get the device refresh rate via window.devicePixelRatio and / or screen.refreshRate; If the device refresh rate is 120 Hz or 144 Hz or above, the minimum threshold of the task collection interval is set to 4 ms or 3 ms or below to ensure that the task processing cycle matches the device refresh rate.

9. A page layout rearrangement / redrawing optimization system, characterized in that: The system comprises: A task trigger monitoring module is used to perform real-time reordering / redrawing task trigger monitoring on the browser, determine the trigger source type and impact range type of the reordering / redrawing task, and add it to the reordering / redrawing task queue; A dynamic priority classification module, configured to dynamically prioritize a plurality of reordering / redrawing tasks in the reordering / redrawing task queue based on the trigger source type; A task load monitoring module is used to monitor in real time the load ratio of high-priority tasks in the reordering / redrawing task queue; and at the same time, determine the current frame interval and / or single frame processing time of the browser; an interval dynamic adjustment module, configured to adjust the task collection interval according to the current frame interval and / or single frame processing time based on a dynamic interval adjustment rule that matches the load ratio of high-priority tasks when the browser is a modern browser; The task layout calculation module is used to collect the multiple reordering / redrawing tasks according to the task priority based on the adjusted task collection interval, and perform unified layout calculation to generate an optimized rendering layout tree to perform page rendering according to the rendering layout tree.

10. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the page layout rearrangement / redrawing optimization method according to any one of claims 1 to 8 is implemented.

Images