CN-121996340-A - Application rendering optimization method and device, electronic equipment and storage medium

CN121996340ACN 121996340 ACN121996340 ACN 121996340ACN-121996340-A

Abstract

The application discloses an application rendering optimization method, an application rendering optimization device, electronic equipment and a storage medium, and relates to the technical field of intelligent home, wherein the method comprises the steps of receiving a state change notification; the method comprises the steps of displaying a state change notification, analyzing a change influence range based on the state change notification, determining and executing virtual DOM difference calculation of a target type according to the change influence range to generate a minimum change set, wherein the types of the virtual DOM difference calculation comprise full-scale virtual DOM difference calculation and local virtual DOM difference calculation, outputting a rendering instruction according to a rendering task corresponding to the minimum change set, and executing rendering operation based on the rendering instruction. By the method provided by the application, the calculation resource waste caused by full-quantity comparison in the prior art no matter the size is changed is effectively avoided, the rendering efficiency is improved, and the smooth responsiveness of the Web application interface in the face of frequent state update is ensured.

Inventors

YU GUICHUAN

Assignees

青岛海尔科技有限公司
海尔优家智能科技（北京）有限公司
海尔智家股份有限公司

Dates

Publication Date: 20260508
Application Date: 20251225

Claims (10)

1. An application rendering optimization method, comprising: Receiving a state change notification, wherein the state change notification is used for representing the state change of the application data; Analyzing a change influence range based on the state change notification; determining and executing virtual DOM difference calculation of a target type according to the change influence range to generate a minimum change set, wherein the types of the virtual DOM difference calculation comprise full-scale virtual DOM difference calculation and local virtual DOM difference calculation; And outputting a rendering instruction according to the rendering task corresponding to the minimum change set and executing rendering operation based on the rendering instruction.
2. The application rendering optimization method according to claim 1, wherein the analyzing a change influence range based on the state change notification includes: analyzing the state change notification to obtain a state change path of the application data; Inquiring a pre-established dynamic dependency graph based on the state change path to acquire a component list influenced by the state change path, wherein the dynamic dependency graph is used for recording the dependency relationship between the application data state and the component; And determining an affected component subtree according to the component list affected by the state change path.
3. The application rendering optimization method according to claim 2, wherein the determining and executing the virtual DOM difference calculation of the target type according to the change influence range includes: judging whether the affected component subtrees meet a predefined local updating condition or not, and generating a judging result; Determining that the target type is the local virtual DOM difference calculation and executing the difference calculation only on the affected component subtrees under the condition that the judging result indicates that the local updating condition is met; And under the condition that the judging result indicates that the local updating condition is not met, determining that the target type is the full-scale virtual DOM difference calculation, and executing the difference calculation on the whole virtual DOM tree.
4. The application rendering optimization method according to claim 1, wherein before outputting a rendering instruction according to the rendering task corresponding to the minimum change set and performing a rendering operation based on the rendering instruction, the method further comprises: The rendering task corresponding to the minimum change set is distributed with priority levels according to task types, wherein the task types comprise a user interaction task, an animation rendering task, a data updating task and a background computing task; adding the rendering task with the assigned priority level into a task queue; And sequentially taking out and executing the rendering tasks from the task queue according to the order of the priority level from high to low.
5. The application rendering optimization method according to claim 4, wherein the priority level comprises, in order from high to low, immediate execution, next frame execution, idle execution, background execution; And sequentially taking out and executing the rendering tasks from the task queue according to the order of the priority level from high to low, wherein the method comprises the following steps: For tasks with priority levels of immediate execution, inserting the tasks into the queue head of the task queue and immediately executing the tasks; for tasks with priority levels being executed by the next frame, scheduling the tasks to be executed in the next browser animation frame; for tasks executed when the priority level is idle, scheduling the tasks through an idle period callback API of the browser; For tasks with the priority level of background execution, the tasks are set to be interruptible, and the tasks are executed when the task queue has no higher priority tasks.
6. The application rendering optimization method of claim 3, wherein the determining and executing a virtual DOM difference calculation of a target type according to the change influence range, and after generating a minimum change set, the method further comprises: storing the virtual DOM nodes which are not changed in the current virtual DOM difference calculation into a virtual DOM node pool; When creating a new virtual DOM node, preferentially acquiring and multiplexing node instances from the virtual DOM node pool.
7. The application rendering optimization method according to claim 4, wherein the outputting a rendering instruction according to the rendering task corresponding to the minimum change set and performing a rendering operation based on the rendering instruction comprises: Dividing the target large-scale data set into a plurality of data fragments under the condition that the minimum change set corresponds to the target large-scale data set; And preferentially rendering the data fragments corresponding to the current visible area, and gradually rendering the rest data fragments in the idle period of the browser or in the rolling operation gap of the user.
8. An application rendering optimization apparatus, comprising: The receiving module is used for receiving a state change notification, wherein the state change notification is used for representing the state change of the application data; The analysis module is used for analyzing the change influence range based on the state change notification; The generation module is used for determining and executing virtual DOM difference calculation of a target type according to the change influence range to generate a minimum change set, wherein the types of the virtual DOM difference calculation comprise full-scale virtual DOM difference calculation and local virtual DOM difference calculation; And the rendering module is used for outputting a rendering instruction according to the rendering task corresponding to the minimum change set and executing rendering operation based on the rendering instruction.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the application rendering optimization method according to any one of claims 1 to 7 when executing the computer program.
10. A non-transitory computer readable storage medium having stored thereon a computer program, which when executed by a processor implements the application rendering optimization method according to any of claims 1 to 7.

Description

Application rendering optimization method and device, electronic equipment and storage medium Technical Field The application relates to the technical field of intelligent home, in particular to an application rendering optimization method, an application rendering optimization device, electronic equipment and a storage medium. Background In the development of current Web applications, especially complex single page applications, a front end framework commonly employs a virtual DOM mechanism to enhance rendering performance. The prior art scheme generally relies on full-scale virtual DOM differential computation, i.e., regardless of the range of changes in data state, a complete depth comparison is performed on the entire virtual DOM tree to find out changes and minimize real DOM operations. However, the disadvantage of this solution is that when the application scale is enlarged and the interaction is complex, the full-scale comparison consumes a lot of computational resources, and especially when only the local state is updated, the global traversal is still performed, so that significant computational redundancy is generated, and the main thread is blocked, and the interface response is delayed, which becomes a key performance bottleneck affecting the smoothness of the large-scale application. Therefore, a solution is needed to solve the above-mentioned problems. Disclosure of Invention The application provides an application rendering optimization method, an application rendering optimization device, electronic equipment and a storage medium, which are used for solving the defects in the prior art. The application provides an application rendering optimization method, which comprises the following steps: Receiving a state change notification, wherein the state change notification is used for representing the state change of the application data; Analyzing a change influence range based on the state change notification; determining and executing virtual DOM difference calculation of a target type according to the change influence range to generate a minimum change set, wherein the types of the virtual DOM difference calculation comprise full-scale virtual DOM difference calculation and local virtual DOM difference calculation; And outputting a rendering instruction according to the rendering task corresponding to the minimum change set and executing rendering operation based on the rendering instruction. According to the application rendering optimization method provided by the application, the analysis of the change influence range based on the state change notification comprises the following steps: analyzing the state change notification to obtain a state change path of the application data; Inquiring a pre-established dynamic dependency graph based on the state change path to acquire a component list influenced by the state change path, wherein the dynamic dependency graph is used for recording the dependency relationship between the application data state and the component; And determining an affected component subtree according to the component list affected by the state change path. According to the application rendering optimization method provided by the application, the virtual DOM difference calculation of the target type is determined and executed according to the change influence range, and the method comprises the following steps: judging whether the affected component subtrees meet a predefined local updating condition or not, and generating a judging result; Determining that the target type is the local virtual DOM difference calculation and executing the difference calculation only on the affected component subtrees under the condition that the judging result indicates that the local updating condition is met; And under the condition that the judging result indicates that the local updating condition is not met, determining that the target type is the full-scale virtual DOM difference calculation, and executing the difference calculation on the whole virtual DOM tree. According to the application rendering optimization method provided by the application, before the rendering instruction is output according to the rendering task corresponding to the minimum change set and the rendering operation is executed based on the rendering instruction, the method further comprises: The rendering task corresponding to the minimum change set is distributed with priority levels according to task types, wherein the task types comprise a user interaction task, an animation rendering task, a data updating task and a background computing task; adding the rendering task with the assigned priority level into a task queue; And sequentially taking out and executing the rendering tasks from the task queue according to the order of the priority level from high to low. The application provides an application rendering optimization method, which sequentially comprises the steps of immediately executing, executing