Interface rendering method and device, equipment and medium
By determining the area to be updated and the node level during interface rendering, performing rendering prediction and slicing, generating lightweight task units and rendering asynchronously, the stuttering problem in high-complexity interface rendering is solved, and rendering efficiency and smoothness are improved.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- SHENZHEN COOCAA NETWORK TECH CO LTD
- Filing Date
- 2026-04-30
- Publication Date
- 2026-07-31
AI Technical Summary
Existing technologies cannot identify the risk of time-consuming rendering in highly complex interface rendering scenarios, resulting in full synchronous rendering occupying browser main thread resources, causing page lag and unresponsiveness.
By determining the region to be updated and the node structure tree level, rendering prediction is performed. If the predicted rendering time reaches the threshold, the node is sliced to generate multiple update task units, and these task units are rendered asynchronously to reduce the risk of main thread blocking.
It improves interface rendering efficiency, ensures smooth interface response, reduces the risk of rendering timeout, and avoids lag and abnormal interaction.
Smart Images
Figure CN122489176A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of interface rendering, and more particularly to an interface rendering method, apparatus, device, and medium. Background Technology
[0002] As enterprises continue to deepen their digital transformation, application scenarios such as front-end web applications, low-code development platforms, and data visualization interfaces are constantly expanding. The number of Document Object Model (DOM) nodes involved in a single interface update is growing exponentially, and the interface interaction logic and rendering requirements are becoming increasingly complex, placing higher demands on the real-time performance, smoothness, and stability of interface rendering. Existing technologies typically address interface update needs by identifying the corresponding nodes to be updated and then performing synchronous rendering to refresh the interface content, thereby meeting the real-time interaction and content update requirements of various front-end products in daily enterprise operations.
[0003] However, in highly complex UI rendering scenarios with a large number of nodes updating simultaneously, a one-time full synchronous rendering consumes a significant amount of browser main thread resources, easily causing rendering time to exceed the single-frame smoothness threshold, leading to issues such as page stuttering, unresponsive interactions, and dropped animation frames. Furthermore, it's impossible to predict rendering timeout before execution, making it difficult to identify high-time-consuming rendering risks in advance. Optimization can only be done passively after stuttering occurs, failing to fundamentally avoid rendering timeout risks. Therefore, there is an urgent need for a UI rendering method that can improve rendering efficiency while reducing rendering timeout risks in highly complex UI rendering scenarios. Summary of the Invention
[0004] This invention provides an interface rendering method, apparatus, device, and medium to solve the problems in related technologies such as the inability to identify high-time-consuming rendering risks and abnormal interaction caused by full synchronous rendering.
[0005] In a first aspect, the present invention provides an interface rendering method, comprising: determining an area to be updated in the current interface, and determining the node to be updated in the document object model structure tree and the structure tree level of the node to be updated based on the area to be updated; Rendering prediction is performed on the node to be updated to obtain the predicted rendering time; If the predicted rendering time reaches the preset rendering time threshold, the node to be updated is sliced based on the tree structure hierarchy to obtain multiple update task units. Asynchronous rendering is performed on multiple update task units to update the area to be updated.
[0006] In some embodiments, rendering prediction is performed on the node to be updated to obtain the predicted rendering duration, including: Obtain the node type weight and node complexity of the node to be updated; The predicted rendering time is obtained by fusing node type weights, tree structure levels, and node complexity.
[0007] In some embodiments, based on the tree structure hierarchy, the node to be updated is sliced to obtain multiple update task units, including: The rendering order of nodes to be updated is determined based on the tree structure hierarchy. Based on the rendering order and preset slice granularity, the node to be updated is sliced to obtain multiple update task units.
[0008] In some embodiments, asynchronous rendering is performed on multiple update task units to update the area to be updated, including: Based on the preset execution interface, rendering operations are executed sequentially on multiple update task units; When any update task unit finishes rendering, check if there are any update task units that have not yet finished rendering; If there are update task units that have not been rendered, the rendering operation of the next task unit will continue. If there are no unfinished update task units, then the area to be updated is determined to have been updated.
[0009] In some embodiments, after performing rendering prediction on the node to be updated and obtaining the predicted rendering duration, the method further includes: If the predicted rendering time does not reach the preset rendering time threshold, synchronous rendering is performed on the node to be updated to update the area to be updated.
[0010] In some embodiments, before performing synchronous rendering on the node to be updated and updating the region to be updated, the method further includes: Get the Cascading Style Sheet properties of the node to be updated; Based on a preset region division cycle, the region to be updated is divided into static and dynamic regions. Based on Cascading Style Sheet properties, identify the first high-consumption node in the static area and the second high-consumption node in the dynamic area among the nodes to be updated. Perform update preprocessing on the first and second highest consumption nodes.
[0011] In some embodiments, update preprocessing is performed on the first high-consumption node and the second high-consumption node, including: Add rendering instruction information to the first high-consumption node, and assign a rendering layer to the first high-consumption node based on the rendering instruction information; Monitor the Cascading Style Sheet (CSS) properties of the second highest-consuming node. When the CSS properties of the second highest-consuming node change, temporarily add rendering indicator information to the second highest-consuming node, and delete the rendering indicator information after the second highest-consuming node has been rendered.
[0012] In a second aspect, this disclosure provides an interface rendering apparatus, including: a determining module, configured to determine the area to be updated in the current interface, and determine the node to be updated in the document object model structure tree and the structure tree level of the node to be updated based on the area to be updated; The prediction module is used to predict the rendering time of the node to be updated. The slicing module is used to slice the node to be updated based on the tree structure hierarchy if the predicted rendering time reaches the preset rendering time threshold, thus obtaining multiple update task units. The rendering module is used to asynchronously render multiple update task units and update the area to be updated.
[0013] Thirdly, the present invention provides a computer 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 the above-described interface rendering method.
[0014] Fourthly, the present invention provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described interface rendering method.
[0015] The aforementioned interface rendering method, apparatus, device, and medium determine the area to be updated in the current interface, and based on this area, determine the node to be updated in the document object model structure tree, as well as the structure tree hierarchy of the node to be updated; predict the rendering duration of the node to be updated; if the predicted rendering duration reaches a preset rendering duration threshold, slice the node to be updated based on the structure tree hierarchy to obtain multiple update task units; and asynchronously render these multiple update task units to update the area to be updated. This method slices the node to be updated when the predicted rendering duration reaches a preset rendering duration threshold, decomposing the high-cost update task into several lightweight update task units, thereby enabling asynchronous rendering of these update task units. This ensures smooth interface response while reducing the risk of main thread blocking and improving rendering efficiency. Attached Figure Description
[0016] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0017] Figure 1 This is a flowchart of an interface rendering method in one embodiment of the present invention; Figure 2This is another flowchart of the interface rendering method in one embodiment of the present invention; Figure 3 This is another flowchart of the interface rendering method in one embodiment of the present invention; Figure 4 This is another flowchart of the interface rendering method in one embodiment of the present invention; Figure 5 This is another flowchart of the interface rendering method in one embodiment of the present invention; Figure 6 This is another flowchart of the interface rendering method in one embodiment of the present invention; Figure 7 This is a schematic block diagram of an interface rendering device in one embodiment of the present invention; Figure 8 This is a schematic block diagram of a computer device according to an embodiment of the present invention. Detailed Implementation
[0018] As an example, such as Figure 1 As shown, a method for rendering an interface is provided, including the following steps: S101, determine the area to be updated in the current interface, and determine the node to be updated in the document object model structure tree and the structure tree level of the node to be updated based on the area to be updated. S102, perform rendering prediction on the node to be updated to obtain the predicted rendering time; S103, if the predicted rendering time reaches the preset rendering time threshold, then based on the structure tree hierarchy, the node to be updated is sliced to obtain multiple update task units. S104 performs asynchronous rendering of multiple update task units, updating the area to be updated.
[0019] As an example, in step S101, the area to be updated in the current interface that needs to be refreshed can be determined by listening to the user's interactive operation instructions triggered on the current interface and the interface data update instructions pushed by the business system; then, based on the position and range of the area to be updated, the document object model structure tree (i.e., DOM tree) corresponding to the current interface is matched to determine all the nodes to be updated corresponding to the area to be updated, and at the same time, based on the extracted position of each node to be updated in the document object model structure tree, its corresponding structure tree level is determined.
[0020] The user-triggered interactive operation instructions may include interface operations such as component dragging, form addition, content editing, and page switching. The interface data update instructions pushed by the business system may include real-time data stream refresh, statistical data update, and status change notification. This disclosure does not limit the type of instruction that triggers interface updates or the size of the area to be updated.
[0021] In one optional embodiment, the area to be updated in the current interface can be determined by a preset interface update rule. For example, based on the data change status of the interface components, the interface area where the data of the component that has changed is located can be determined as the area to be updated. Alternatively, by comparing the differences between the document object model structure tree before and after the interface update, the set of nodes that have been added, deleted, or have changed attributes can be identified, and the interface area corresponding to the set of nodes can be determined as the area to be updated. The structure tree level of each node in the set of nodes can be obtained simultaneously. However, this disclosure is not limited to this method of determining the area to be updated and the logic of obtaining the structure tree level.
[0022] As an example, in step S102, based on the rendering-related features of all determined nodes to be updated, the rendering time of this rendering operation can be estimated using preset rendering time prediction rules or rendering time prediction models, thus obtaining the corresponding predicted rendering duration, but not limited to this. This provides a basis for decision-making in selecting subsequent rendering scheduling strategies, identifies high-time-consuming rendering risks in advance, and avoids interface lag issues caused by indiscriminate rendering.
[0023] The predicted rendering duration is used to indicate the estimated time required to complete the rendering operation of all nodes to be updated. This disclosure does not limit the specific calculation method of the rendering prediction or the feature dimensions used.
[0024] In one optional embodiment, the relevant feature information of the node to be updated can be input based on the pre-trained rendering time prediction model, and the corresponding predicted rendering time can be output; alternatively, the overall predicted rendering time can be calculated by matching based on the preset rendering time mapping relationship and related features such as the number of nodes to be updated and the hierarchy of the tree structure.
[0025] For example, the unit rendering time corresponding to different node features can be pre-configured, and the predicted rendering time corresponding to this update can be calculated by combining the total number of nodes to be updated and their corresponding features.
[0026] As an example, in step S103, a preset rendering duration threshold can be set in advance to determine the risk of high-time-consuming rendering. When the predicted rendering duration reaches the preset rendering duration threshold, the current rendering is determined to be a high-time-consuming rendering task. At this time, based on the determined tree structure hierarchy of the nodes to be updated, all nodes to be updated are sliced and split to obtain multiple update task units that can independently perform rendering operations. This provides the smallest schedulable execution unit for subsequent asynchronous rendering scheduling, thereby avoiding the problem of interface lag and unresponsive interaction caused by exceeding the single-frame rendering duration limit from the root.
[0027] The preset rendering duration threshold can be configured based on the smoothness threshold of browser single-frame rendering, and the update task unit is a rendering execution unit containing at least one node to be updated. This disclosure does not limit the specific value of the preset rendering duration threshold or the granularity of the update task unit.
[0028] In one optional embodiment, the node to be updated can be sliced based on the parent-child relationship of the tree structure hierarchy, for example, dividing the nodes to be updated under the same parent node into the same update task unit; or the node to be updated can be sliced based on the depth of the tree structure hierarchy, for example, dividing the nodes to be updated at the same tree structure hierarchy into the same update task unit; or the node to be updated can be sliced based on the tree structure hierarchy in combination with the interface display area of the node to be updated. The specific implementation method of slicing the node to be updated is not limited in this disclosure.
[0029] As an example, in step S104, the browser can use the asynchronous task scheduling mechanism to execute rendering operations on the multiple update task units obtained by splitting them up in sequence. After completing the rendering processing of all nodes to be updated, the interface content of the area to be updated is updated. In this way, the asynchronous scheduling method avoids large-scale rendering operations from occupying the browser's main thread resources for a long time, ensuring the smoothness of interface interaction and real-time response speed.
[0030] Asynchronous rendering can be implemented using the asynchronous task scheduling method natively supported by the browser. This disclosure does not limit the specific scheduling mechanism or task execution order of asynchronous rendering.
[0031] In one optional embodiment, multiple update task units can be rendered one by one or in batches according to a preset execution order. After each update task unit or batch is rendered, the corresponding interface content in the area to be updated is updated synchronously. Alternatively, multiple update task units can be asynchronously rendered based on the display priority of the interface, prioritizing the rendering of update task units in the user's visible area in the area to be updated, and then rendering update task units in non-visible areas.
[0032] For example, when the area to be updated is a long list interface, the update task units corresponding to the list nodes within the current visible range of the screen can be rendered first, and then the update task units corresponding to the list nodes outside the screen can be rendered asynchronously. This disclosure does not limit this.
[0033] In summary, this disclosure proposes a UI rendering method, including: determining the area to be updated in the current interface, and determining the node to be updated in the document object model structure tree and the structure tree level of the node to be updated based on the area to be updated; performing rendering prediction on the node to be updated to obtain the predicted rendering duration; if the predicted rendering duration reaches a preset rendering duration threshold, then slicing the node to be updated based on the structure tree level to obtain multiple update task units; and asynchronously rendering the multiple update task units to update the area to be updated. This method slices the node to be updated when the predicted rendering duration reaches the preset rendering duration threshold, thereby decomposing the high-cost update task into several lightweight update task units, and then asynchronously rendering the update task units. This ensures smooth interface response while reducing the risk of main thread blocking and improving rendering efficiency.
[0034] As an example, such as Figure 2 As shown, step S102, which involves rendering prediction for the node to be updated to obtain the predicted rendering time, includes: S201, obtain the node type weight and node complexity of the node to be updated; S202 integrates node type weights, tree structure hierarchy, and node complexity to obtain the predicted rendering time.
[0035] As an example, in step S201, all the determined nodes to be updated can be traversed, and the node type weight and node complexity corresponding to each node to be updated can be extracted respectively, so as to provide standardized input data for the subsequent prediction of rendering time and avoid the deviation of prediction results caused by the lack of feature dimensions.
[0036] Among them, node type weight is a predefined quantized weight value based on the rendering complexity of different DOM nodes, used to distinguish the basic rendering cost of different types of nodes. These different types of nodes can include canvas nodes, video nodes, block container nodes, inline text nodes, input box nodes, dropdown box nodes, etc.; node complexity is used to quantify the Cascading Style Sheets (CSS) complexity of nodes, and can include two sub-features: the number of selector levels and the number of animation properties.
[0037] In one optional embodiment, the predefined rules for node type weights are as follows: complex media nodes such as canvas nodes and video nodes have a weight of 1.2; basic layout nodes such as block container nodes and inline text nodes have a weight of 0.8; and form interaction nodes such as input box nodes and dropdown box nodes have a weight of 1.0. The selector level is the nesting level of the CSS selector matching the node, with each nesting level corresponding to 1 unit of weight. The number of animation properties is the number of preset high-cost CSS properties contained in the node's CSS style. Preset high-cost CSS properties include filter properties, transform properties, and animation properties, with 1 point awarded for each of the above properties.
[0038] As an example, in step S202, the extracted node type weights, the tree structure level corresponding to the node to be updated, and the node complexity can be fused to determine the predicted rendering time corresponding to this update, providing a quantitative basis for the selection of subsequent rendering scheduling strategies.
[0039] The predicted rendering time refers to the estimated time required to complete the rendering of all nodes to be updated.
[0040] In one optional embodiment, a fusion of linear regression models, selection operator regression models, etc., can be used. A large number of update samples from complex single-page applications are pre-collected, and the actual rendering time is captured through a performance monitoring interface to construct a feature-time mapping sample set. Using node type weights, tree structure levels, selector level numbers, and the number of animation attributes as input features of the model, and the actual rendering time as the model's output label, the model parameters are optimized using a gradient descent algorithm to obtain the following formula for predicting the rendering time: T = a × node type weight + b × tree structure level + c × number of selector levels + d × number of animation attributes + e, Where T is the prediction time, a, b, c, and d are feature coefficients, and e is the bias term. The values of each parameter can be in the range of: a∈[0.08,0.12], b∈[0.15,0.25], c∈[0.25,0.35], d∈[0.45,0.55], e∈[0.5,1.5], and the unit is milliseconds.
[0041] In one optional embodiment, the predicted rendering time of a single node to be updated can be calculated first, and then the time of all nodes to be updated can be summed to obtain the total predicted rendering time of this update.
[0042] As an example, such as Figure 3 As shown, step S103, which involves slicing the node to be updated based on the tree structure hierarchy, yields multiple update task units, including: S301, based on the tree structure hierarchy, determines the rendering order of the nodes to be updated; S302 slices the node to be updated based on the rendering order and preset slice granularity, resulting in multiple update task units.
[0043] As an example, in step S301, the rendering order of all nodes to be updated can be determined based on the hierarchy of the node to be updated in the document object model structure tree, thereby clarifying the order of processing each node to be updated, avoiding the problem of repeated layout and drawing of child nodes due to unreasonable rendering order, and improving rendering efficiency.
[0044] Here, rendering order refers to the order in which the nodes to be updated are processed during rendering operations; structure tree level refers to the nesting depth of the nodes to be updated in the document object model structure tree.
[0045] In one alternative embodiment, the rendering order can be determined according to the hierarchical order of the document object model tree, that is, the deep-level nodes to be updated are processed first, and then the shallow-level nodes to be updated are processed, so as to avoid the deep-level child nodes being repeatedly rendered after the shallow-level parent nodes are updated.
[0046] As an example, in step S302, based on the determined rendering order and combined with the preset slice granularity, the nodes to be updated can be grouped and sliced to obtain multiple update task units that can independently perform rendering operations. This breaks down a large number of time-consuming rendering tasks into multiple small tasks, providing schedulable execution units for subsequent asynchronous rendering scheduling and ensuring that the rendering time of a single frame does not exceed the limit.
[0047] Among them, the preset slice granularity refers to the threshold number of nodes to be updated contained in each update task unit; the update task unit refers to the smallest independent rendering execution unit containing at least one node to be updated.
[0048] In one optional embodiment, the preset slice granularity can be dynamically adjusted according to the device performance. For example, the preset slice granularity of a high-performance device is set to 80 nodes / slice, the preset slice granularity of a low-performance device is set to 30 nodes / slice, and the default preset slice granularity is 50 nodes / slice.
[0049] For example, taking the scenario of a user adding a "drop-down selection box" component in a low-code platform form design page as an example, the subtree to be updated contains a total of 210 nodes. Using the default preset slice granularity of 50 nodes / slice, after sorting according to the determined rendering order, the nodes to be updated are split into 5 update task units. The first 4 update task units each contain 50 nodes, and the 5th update task unit contains the remaining 10 nodes.
[0050] As an example, such as Figure 4 As shown, step S104, which involves asynchronously rendering multiple update task units to update the area to be updated, includes: S401, based on a preset execution interface, sequentially performs rendering operations on multiple update task units; S402, when any update task unit has finished rendering, check if there are any update task units that have not finished rendering; S403, if there are update task units that have not been rendered, then continue to execute the rendering operation of the next task unit; S404 If there are no unfinished update task units, then the area to be updated is determined to have been updated.
[0051] As an example, in step S401, based on a preset execution interface, the rendering operations can be initiated sequentially on the multiple update task units obtained by splitting according to a determined rendering order, so as to incorporate the split rendering tasks into the browser's standard rendering frame cycle for execution, thereby avoiding the blocking of the browser's main thread by the concentrated execution of a large number of rendering operations and ensuring the responsiveness of the interface interaction.
[0052] Among them, the preset execution interface refers to the native program interface provided by the browser for scheduling rendering tasks to be executed within the frame period; the update task unit refers to the smallest independent rendering execution unit containing at least one node to be updated.
[0053] In an optional embodiment, a preset execution interface, such as the frame animation request interface (requestAnimationFrame), is used to register the rendering operation of each update task unit to the corresponding browser rendering frame and execute them sequentially according to the rendering order.
[0054] For example, taking the scenario of a user adding a "dropdown selection box" component in a low-code platform form design page as an example, the process is broken down into 5 update task units. The rendering task of the first frame is registered through the frame animation request interface, and the rendering operation of the first update task unit after sorting is executed.
[0055] As an example, in step S402, when the rendering operation of any update task unit is completed, the execution status of all update task units is immediately checked to confirm whether there are any update task units that have not been rendered, thereby providing a status basis for the scheduling decision of subsequent rendering tasks and avoiding the problem of task omission or repeated execution.
[0056] Among them, the update task unit that has not completed rendering refers to the update task unit that is in the pending execution state and has not yet completed the rendering operation.
[0057] In one optional embodiment, an execution status flag can be set for each update task unit. The status flag includes three categories: pending execution, in execution, and completed. When any update task unit finishes rendering, its status flag is updated to completed. Then, the status flags of all update task units are traversed to count the number of tasks in the pending execution or in execution state, thereby determining whether there are any update task units that have not finished rendering.
[0058] As an example, in step S403, when it is confirmed that there are update task units that have not been rendered, the rendering operation of the next update task unit after sorting is continued according to the determined rendering order, so as to ensure that the rendering tasks of all nodes to be updated can be executed in an orderly manner.
[0059] In an optional embodiment, when continuing to execute the next task unit, the rendering operation of the next update task unit is still registered to the next browser rendering frame for execution through a preset execution interface, ensuring that the rendering operation of each task unit is completed within a single frame cycle, thus avoiding exceeding the single frame smoothness threshold.
[0060] For example, continuing the scenario of the low-code platform form design page, after the first update task unit is rendered, it is detected that there are still 4 incomplete update task units. The system then registers the rendering task for the second frame through the frame animation request interface and executes the rendering operation for the second update task unit. This sentence is error-free.
[0061] As an example, in step S404, when it is confirmed by detection that all update task units have completed rendering and there are no remaining unexecuted rendering tasks, it is officially determined that the area to be updated in this interface update has completed all content refresh.
[0062] In one optional embodiment, once it is determined that the area to be updated has been updated, a preset update completion callback event can be triggered to push a notification to the business system that the interface update is complete, synchronously update the interface interaction state, and remove the lock restrictions on related operations, etc.
[0063] In one optional embodiment, during the sequential execution of multiple update task units, priorities can be assigned to the update task units and the interface update requests triggered by the previous interface. Interface update requests are continuously monitored. If an interface update request is detected with a priority higher than the currently executing update task unit, the currently executing update task unit is immediately interrupted, and the higher-priority interface update request is prioritized for execution. After the interface update request is processed, the remaining unfinished update task units are then executed. The higher-priority interface update requests can include user interaction-related update requests requiring immediate response, such as user clicks, input operations, and pop-up triggers, thereby avoiding response delays in user interactions and significantly improving the user experience.
[0064] In an alternative embodiment, such as Figure 5 As shown, after performing rendering prediction on the node to be updated and obtaining the predicted rendering time in step S102, the process further includes: S501 If the predicted rendering time does not reach the preset rendering time threshold, synchronous rendering is performed on the node to be updated to update the area to be updated.
[0065] As an example, in step S501, when the predicted rendering time does not reach the preset rendering time threshold, the current interface update is determined to be a low-time rendering task. Synchronous rendering is directly performed on the node to be updated, and all content of the area to be updated is refreshed at once. This simplifies the rendering scheduling process and improves the efficiency of interface updates while ensuring the smoothness of rendering.
[0066] For example, if the predicted rendering time for this interface update is 10 milliseconds, which is lower than the preset threshold of 16 milliseconds, then all the rendering operations of the nodes to be updated will be submitted at once to complete the content refresh of the area to be updated. The whole process takes a short time and will not block the browser's main thread, ensuring the smoothness of the interface interaction.
[0067] As an example, in step S501, before performing synchronous rendering on the node to be updated and updating the area to be updated, the following steps are also included: S601, Get the Cascading Style Sheet properties of the node to be updated; S602, based on a preset region division cycle, divide the region to be updated into static and dynamic regions; S603, based on Cascading Style Sheet properties, determine the first high-consumption node in the static area and the second high-consumption node in the dynamic area among the nodes to be updated; S604 performs update preprocessing on the first and second high-consumption nodes.
[0068] As an example, in step S601, all nodes to be updated can be traversed, and the CSS properties corresponding to each node to be updated can be obtained one by one, thereby providing a data foundation for the identification of high-consumption nodes and differentiated rendering preprocessing.
[0069] Among them, Cascading Style Sheet properties refer to the CSS style rules of the node to be updated, including but not limited to layout properties, animation properties, opacity properties, transformation properties, and filtering properties.
[0070] In one alternative embodiment, the Cascading Style Sheet (CSS) properties of the node to be updated can be read through the browser's getComputedStyle interface, thereby achieving the retrieval of CSS properties.
[0071] As an example, in step S602, the region to be updated can be divided into static and dynamic regions based on a preset region division cycle, thereby distinguishing interface blocks with different update frequencies within the region to be updated and providing a partitioning basis for subsequent differentiated rendering preprocessing strategies.
[0072] The preset area division period refers to the time period used to count the update frequency of the interface area; the static area refers to the interface area that has no DOM structure or style update within a continuous preset area division period; the dynamic area refers to the interface area that has at least one DOM structure or style update within a preset area division period.
[0073] In one optional embodiment, the preset region division period can be set to 300ms. That is, regions in the area to be updated that have not been updated within 300ms can be classified as static regions; regions in the area to be updated that have been updated at least once within 300ms are classified as dynamic regions. Meanwhile, the preset region division period can be dynamically adjusted according to device performance and interface update frequency, and this disclosure does not limit it in this regard.
[0074] As an example, in step S603, based on the obtained Cascading Style Sheet properties of the node to be updated and combined with the region division results, the first high-consumption node in the static region and the second high-consumption node in the dynamic region can be determined respectively, so as to assign different preprocessing methods to different types of update nodes and avoid resource waste caused by indiscriminate preprocessing.
[0075] Among them, the first high-consumption node and the second high-consumption node can refer to nodes to be updated that contain preset high-consumption Cascading Style Sheet properties and have high rendering costs; the first high-consumption node refers to a node to be updated that belongs to the static area and contains preset high-consumption Cascading Style Sheet properties; the second high-consumption node refers to a node to be updated that belongs to the dynamic area and contains preset high-consumption Cascading Style Sheet properties.
[0076] In one optional embodiment, high-consumption Cascading Style Sheet (CSS) properties may include filtering properties, transformation properties, transparency properties, animation properties, transition properties, etc. By traversing the CSS properties of the node to be updated, if any of the above high-consumption CSS properties exist in the node to be updated, it is determined to be a high-consumption node; then, according to the region type in which the node is located, it is classified as a first high-consumption node or a second high-consumption node.
[0077] As an example, in step S604, corresponding interface update preprocessing operations can be performed on the first and second high-consumption nodes identified, so as to complete the rendering optimization configuration of the high-consumption nodes in advance before synchronous rendering is executed, reduce the actual rendering time of the nodes, and ensure the smoothness of the synchronous rendering process.
[0078] Among them, update preprocessing refers to the rendering optimization configuration operation performed in advance for the first and second high-consumption nodes before the formal rendering operation is executed.
[0079] In one optional embodiment, differentiated update preprocessing can be employed based on the characteristics of the regions where the first high-consumption node and the second high-consumption node are located. Specifically, for example, rendering instruction information is added to the first high-consumption node, and a rendering layer is assigned to the first high-consumption node based on the rendering instruction information; the Cascading Style Sheet (CSS) properties of the second high-consumption node are monitored, and when the CSS properties of the second high-consumption node change, rendering instruction information is temporarily added to the second high-consumption node, and the rendering instruction information is deleted after the second high-consumption node has been rendered.
[0080] Among them, rendering instruction information refers to the instruction used to inform the browser to prepare rendering resources for the node to be updated in advance, and to guide the browser to pre-allocate an independent rendering layer for the node to be updated and enable hardware acceleration of the graphics processing unit (GPU); the rendering layer refers to the rendering layer used by the browser to draw or update interface elements.
[0081] As an example, for the first high-consumption node, rendering instruction information can be added to it. Based on the received rendering instruction information, the browser can pre-allocate an independent rendering layer for the first high-consumption node, thereby avoiding the layer reconstruction overhead when updating the first high-consumption node later, thus reducing the node rendering time.
[0082] Optionally, the rendering instruction information can use the will-change property of the Cascading Style Sheets (CSS). When adding the will-change property to the first high-consumption node, the name of the high-consumption CSS property corresponding to that node is specified simultaneously to ensure that the browser only prepares rendering resources for that high-consumption CSS property name, thus avoiding resource waste.
[0083] For example, if the first high-consumption node contains a filter property, then a `will-change: filter` rendering instruction is added to it; if the first high-consumption node contains both transform and transition properties, then `will-change: transform, transition` rendering instruction is added to it. After receiving this rendering instruction, the browser pre-allocates an independent GPU rendering layer for that node. Subsequent updates to that node can be rendered directly by the GPU without needing to recalculate the layout and rebuild the layer, thus reducing rendering time.
[0084] In one optional embodiment, for multiple first high-consumption nodes that are adjacent in position and contain the same high-consumption Cascading Style Sheet properties, the browser is triggered to automatically merge the rendering layers, thereby avoiding GPU scheduling overhead and performance loss caused by too many layers and further improving rendering efficiency.
[0085] As an example, for the second most resource-intensive node, changes in its Cascading Style Sheet (CSS) properties can be continuously monitored. When a change in a high-resource CSS property of the second most resource-intensive node is detected, a rendering indicator is temporarily added to that node. Once the style change rendering of the second most resource-intensive node is complete, the rendering indicator is deleted. This temporarily enables GPU hardware acceleration to ensure smoothness during node updates, while avoiding excessive GPU memory usage caused by long-term resident rendering indicator information.
[0086] In one optional embodiment, the browser-provided MutationObserver interface is used to monitor changes in the style attribute of the second high-consumption node. When a change in the node's preset high-consumption Cascading Style Sheet attribute is detected, a corresponding will-change rendering instruction is immediately added temporarily to guide the browser to temporarily allocate an independent rendering layer for it. After the node is rendered, the rendering instruction is maintained for 100ms (this disclosure does not limit the specific maintenance time) and then deleted to release the corresponding GPU resources, thus avoiding the additional performance overhead caused by frequently switching rendering layers on and off.
[0087] For example, for dropdown nodes within a dynamic area, when a change in their filter attribute is detected through the change observer interface, a temporary rendering indicator of will-change:filter is added to them. After the style change rendering of the node is completed, the will-change attribute is deleted after 100ms. This ensures the smooth rendering of the style change without occupying GPU memory resources for a long time, reducing GPU memory usage compared to the solution of globally persistent rendering indicator information.
[0088] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.
[0089] In one embodiment, an interface rendering apparatus is provided, which corresponds one-to-one with the interface rendering methods described in the above embodiments. For example... Figure 7 As shown, the interface rendering device includes a determining module 701, a predicting module 702, a slicing module 703, and a rendering module 704. Detailed descriptions of each functional module are as follows: The determination module 701 is used to determine the area to be updated in the current interface, and to determine the node to be updated in the document object model structure tree and the structure tree level of the node to be updated based on the area to be updated. Prediction module 702 is used to perform rendering prediction on the node to be updated and obtain the predicted rendering time. The slicing module 703 is used to slice the node to be updated based on the tree structure hierarchy to obtain multiple update task units if the predicted rendering time reaches the preset rendering time threshold. Rendering module 704 is used to asynchronously render multiple update task units and update the area to be updated.
[0090] In one embodiment, the prediction module 702 is further configured to obtain the node type weight and node complexity of the node to be updated; The predicted rendering time is obtained by fusing node type weights, tree structure levels, and node complexity.
[0091] In one embodiment, the slicing module 703 is further configured to determine the rendering order of nodes to be updated based on the structure tree hierarchy. Based on the rendering order and preset slice granularity, the node to be updated is sliced to obtain multiple update task units.
[0092] In one embodiment, the rendering module 704 is further configured to perform rendering operations on multiple update task units sequentially based on a preset execution interface; When any update task unit finishes rendering, check if there are any update task units that have not yet finished rendering; If there are update task units that have not been rendered, the rendering operation of the next task unit will continue. If there are no unfinished update task units, then the area to be updated is determined to have been updated.
[0093] In one embodiment, the rendering module 704 is further configured to perform synchronous rendering on the node to be updated and update the area to be updated if the predicted rendering time does not reach the preset rendering time threshold.
[0094] In one embodiment, the rendering module 704 is further configured to obtain the Cascading Style Sheet properties of the node to be updated; Based on a preset region division cycle, the region to be updated is divided into static and dynamic regions. Based on Cascading Style Sheet properties, identify the first high-consumption node in the static area and the second high-consumption node in the dynamic area among the nodes to be updated. Perform update preprocessing on the first and second highest consumption nodes.
[0095] In one embodiment, the rendering module 704 is used to add rendering instruction information to the first high-consumption node and, based on the rendering instruction information, allocate a rendering layer to the first high-consumption node. Monitor the Cascading Style Sheet (CSS) properties of the second highest-consuming node. When the CSS properties of the second highest-consuming node change, temporarily add rendering indicator information to the second highest-consuming node, and delete the rendering indicator information after the second highest-consuming node has been rendered.
[0096] This invention provides an interface rendering apparatus, comprising: a determining module, configured to determine the area to be updated in the current interface, and determine the node to be updated in the document object model structure tree, and the structure tree hierarchy of the node to be updated, based on the area to be updated; a prediction module, configured to predict the rendering duration of the node to be updated; a slicing module, configured to slice the node to be updated based on the structure tree hierarchy to obtain multiple update task units if the predicted rendering duration reaches a preset rendering duration threshold; and a rendering module, configured to asynchronously render the multiple update task units to update the area to be updated. This apparatus slices the node to be updated when the predicted rendering duration reaches a preset rendering duration threshold, thereby decomposing the high-cost update task into several lightweight update task units, and then asynchronously rendering these update task units. This ensures smooth interface response while reducing the risk of main thread blocking and improving rendering efficiency.
[0097] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 8 As shown, the computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and database. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The database is used for data employed in the interface rendering method. The network interface is used for communication with external terminals via a network connection. When the computer program is executed by the processor, it can implement an interface rendering method.
[0098] In one embodiment, a computer device is provided, 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 an interface rendering method.
[0099] In one embodiment, a computer-readable storage medium is provided, the computer-readable storage medium storing a computer program that, when executed by a processor, implements a user interface rendering method.
[0100] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. This computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), IAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.
[0101] 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 used as 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.
[0102] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.
Claims
1. An interface rendering method, characterized by, include: Determine the area to be updated in the current interface, and determine the node to be updated in the document object model structure tree and the structure tree level of the node to be updated based on the area to be updated. Rendering prediction is performed on the node to be updated to obtain the predicted rendering time; If the predicted rendering time reaches the preset rendering time threshold, then based on the structure tree hierarchy, the node to be updated is sliced to obtain multiple update task units. The multiple update task units are rendered asynchronously to update the area to be updated.
2. The method of claim 1, wherein, The step of performing rendering prediction on the node to be updated to obtain the predicted rendering time includes: Obtain the node type weight and node complexity of the node to be updated; The predicted rendering time is obtained by fusing the node type weight, the structure tree level, and the node complexity.
3. The method of claim 1, wherein, The process of slicing the node to be updated based on the structure tree hierarchy yields multiple update task units, including: Based on the structure tree hierarchy, the rendering order of the nodes to be updated is determined; Based on the rendering order and preset slice granularity, the node to be updated is sliced to obtain the multiple update task units.
4. The method of claim 1, wherein, The asynchronous rendering of the plurality of update task units to update the region to be updated includes: Based on the preset execution interface, the rendering operation is executed sequentially on the multiple update task units; When any update task unit finishes rendering, check if there are any update task units that have not yet finished rendering; If there are update task units that have not been rendered, the rendering operation of the next task unit will continue. If there are no unfinished update task units, then the area to be updated is determined to have been updated.
5. The method according to claim 1, characterized in that, After performing rendering prediction on the node to be updated and obtaining the predicted rendering time, the process further includes: If the predicted rendering time does not reach the preset rendering time threshold, synchronous rendering is performed on the node to be updated to update the region to be updated.
6. The method according to claim 5, characterized in that, Before performing synchronous rendering on the node to be updated and updating the region to be updated, the method further includes: Obtain the Cascading Style Sheet properties of the node to be updated; Based on a preset region division cycle, the region to be updated is divided into static and dynamic regions. Based on the Cascading Style Sheet properties, the first high-consumption node located in the static area and the second high-consumption node located in the dynamic area are determined among the nodes to be updated. The first high-consumption node and the second high-consumption node are updated and preprocessed.
7. The method according to claim 6, characterized in that, The update preprocessing for the first high-consumption node and the second high-consumption node includes: Add rendering instruction information to the first high-consumption node, and assign a rendering layer to the first high-consumption node based on the rendering instruction information; Monitor the Cascading Style Sheet (CSS) properties of the second high-consumption node. When the CSS properties of the second high-consumption node change, temporarily add the rendering instruction information to the second high-consumption node. After the second high-consumption node is rendered, delete the rendering instruction information.
8. An interface rendering apparatus, characterized in that, include: The determination module is used to determine the area to be updated in the current interface, and to determine the node to be updated in the document object model structure tree and the structure tree level of the node to be updated based on the area to be updated. The prediction module is used to predict the rendering time of the node to be updated. The slicing module is used to slice the node to be updated based on the tree structure hierarchy to obtain multiple update task units if the predicted rendering time reaches a preset rendering time threshold. The rendering module is used to asynchronously render the multiple update task units and update the area to be updated.
9. A computer 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 interface rendering 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 interface rendering method as described in any one of claims 1 to 7.