Application rendering optimization method and device, electronic equipment and storage medium

Abstract

The invention discloses an application rendering optimization method and device, electronic equipment and a storage medium, and relates to the technical field of smart home, and the method comprises the 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; according to the change influence range, virtual DOM difference calculation of the target type is determined and executed, and a minimum change set is generated; wherein the types of the virtual DOM difference calculation comprise total 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 a rendering operation based on the rendering instruction. Through the method provided by the invention, the waste of computing resources caused by full-amount comparison regardless of size change in the prior art is effectively avoided, the rendering efficiency is improved, and the Web application interface can still keep smooth responsiveness when facing frequent state update.

Description

Technical Field

[0001] This application relates to the field of smart home technology, and in particular to an application rendering optimization method, apparatus, electronic device and storage medium. Background Technology

[0002] In the development of current web applications, especially complex single-page applications, front-end frameworks generally adopt the virtual DOM mechanism to improve rendering performance.

[0003] Existing solutions typically rely on full virtual DOM difference calculations. This means that regardless of the extent of data state changes, a complete depth-first comparison of the entire virtual DOM tree is performed to identify changes and minimize real-world DOM manipulation. However, this approach suffers from drawbacks. As applications grow in scale and interactions become more complex, full comparisons consume significant computational resources. Especially when only local state updates are performed, global traversal is still necessary, resulting in substantial computational redundancy. This leads to main thread blocking and UI response delays, becoming a critical performance bottleneck affecting the smoothness of large applications. Therefore, a solution to address these issues is urgently needed. Summary of the Invention

[0004] This application provides an application rendering optimization method, apparatus, electronic device, and storage medium to address the deficiencies in the prior art.

[0005] This application provides an application rendering optimization method, including the following steps: Receive status change notification; wherein the status change notification is used to indicate a change in the status of application data; Based on the status change notification, analyze the scope of the change's impact; Based on the scope of the changes, determine and perform virtual DOM difference calculations for the target type to generate a minimum change set; wherein, the types of virtual DOM difference calculations include: full virtual DOM difference calculations and partial virtual DOM difference calculations; Based on the rendering task corresponding to the minimum change set, output rendering instructions and execute rendering operations based on the rendering instructions.

[0006] According to the application rendering optimization method provided in this application, the step of analyzing the scope of impact of the change based on the state change notification includes: Parse the status change notification to obtain the status change path of the application data; Based on the state change path, a pre-established dynamic dependency graph is queried to obtain a list of components affected by the state change path; wherein, the dynamic dependency graph is used to record the dependency relationship between application data state and components; Based on the list of components affected by the state change path, determine the affected component subtree.

[0007] According to an application rendering optimization method provided in this application, the step of determining and performing virtual DOM difference calculation for the target type based on the scope of the change's impact includes: Determine whether the affected component subtree meets the predefined local update conditions, and generate a determination result; If the judgment result indicates that the local update condition is met, the target type is determined to be the local virtual DOM difference calculation, and the difference calculation is performed only on the affected component subtree; If the judgment result indicates that the local update condition is not met, the target type is determined to be the full virtual DOM difference calculation, and the difference calculation is performed on the entire virtual DOM tree.

[0008] According to the application rendering optimization method provided in this application, before outputting rendering instructions based on the rendering task corresponding to the minimum change set and performing rendering operations based on the rendering instructions, the method further includes: The rendering tasks corresponding to the minimum change set are assigned priority levels according to task type; wherein, the task types include: user interaction tasks, animation rendering tasks, data update tasks, and background computing tasks; Add the rendering task with the assigned priority level to the task queue; The rendering tasks are retrieved from the task queue and executed in descending order of priority.

[0009] According to the application rendering optimization method provided in this application, the priority levels from high to low include: immediate execution, next frame execution, idle execution, and background execution; The step of retrieving and executing the rendering tasks sequentially from the task queue in descending order of priority includes: For tasks with a priority level of immediate execution, insert them at the head of the task queue and execute them immediately; For tasks with a priority level of execution in the next frame, they are scheduled to be executed in the next browser animation frame. For tasks with a priority level of executing during idle time, scheduling is performed through the browser's idle time callback API; For tasks with a priority level of background execution, set them as interruptible tasks and execute them when there are no higher priority tasks in the task queue.

[0010] According to the application rendering optimization method provided in this application, after determining and performing virtual DOM difference calculations for the target type based on the scope of the change's impact to generate a minimum change set, the method further includes: Store the virtual DOM nodes that did not change in this virtual DOM difference calculation into the virtual DOM node pool; When creating a new virtual DOM node, node instances are preferentially retrieved from and reused in the virtual DOM node pool.

[0011] According to the application rendering optimization method provided in this application, the step of outputting rendering instructions and performing rendering operations based on the rendering task corresponding to the minimum change set includes: In the case where the minimum change set corresponds to the target large-scale dataset, the target large-scale dataset is divided into multiple data fragments; Prioritize rendering the data fragments corresponding to the currently visible area, and gradually render the remaining data fragments during browser idle periods or user scrolling intervals.

[0012] This application also provides an application rendering optimization device, including the following modules: A receiving module is used to receive status change notifications; wherein the status change notifications are used to indicate changes in the status of application data; The analysis module is used to analyze the scope of impact of the change based on the status change notification; The generation module is used to determine and perform virtual DOM difference calculations of the target type based on the scope of the change's impact, and generate a minimum change set; wherein, the types of virtual DOM difference calculations include: full virtual DOM difference calculations and partial virtual DOM difference calculations; The rendering module is used to output rendering instructions based on the rendering task corresponding to the minimum change set and to perform rendering operations based on the rendering instructions.

[0013] This application also provides an electronic 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 application rendering optimization method as described above.

[0014] This application also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the application rendering optimization method as described above.

[0015] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the application rendering optimization method as described above.

[0016] This application provides an application rendering optimization method, apparatus, electronic device, and storage medium. The method involves receiving a state change notification, whereby the state change notification indicates a change in the state of application data. Based on the state change notification, the scope of the change's impact is analyzed. According to the scope of the change's impact, a target type of virtual DOM difference calculation is determined and executed to generate a minimum change set. The types of virtual DOM difference calculations include full virtual DOM difference calculation and partial virtual DOM difference calculation. Based on the rendering task corresponding to the minimum change set, rendering instructions are output and rendering operations are executed based on these instructions. Therefore, this application effectively avoids the waste of computational resources caused by the requirement for full comparison regardless of the change's size in existing technologies by intelligently selecting whether to perform full or partial virtual DOM difference calculation based on the scope of the state change's impact. This improves rendering efficiency and ensures that the web application interface maintains smooth responsiveness even with frequent state updates. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 This is a schematic diagram of the hardware environment for an interaction method of a smart device according to an embodiment of this application.

[0019] Figure 2 This is a flowchart illustrating the application rendering optimization method provided in this application.

[0020] Figure 3 This is a schematic diagram of the priority scheduler principle provided in this application.

[0021] Figure 4 This is a schematic diagram illustrating the principle of the application rendering optimization method provided in this application.

[0022] Figure 5 This is a complete flowchart of the application rendering optimization method provided in this application.

[0023] Figure 6 This is a schematic diagram of the application rendering optimization device provided in this application.

[0024] Figure 7 This is a schematic diagram of the structure of the electronic device provided in this application. Detailed Implementation

[0025] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0026] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0027] According to one aspect of the embodiments of this application, an application rendering optimization method is provided. This application rendering optimization method is widely applicable to whole-house intelligent digital control application scenarios such as smart homes, smart home ecosystems, and intelligence house ecosystems. Optionally, in this embodiment, the above-mentioned application rendering optimization method can be applied to applications such as... Figure 1 The hardware environment shown consists of terminal device 102 and server 104. For example... Figure 1 As shown, server 104 is connected to terminal device 102 via a network and can be used to provide services (such as application services) to the terminal or clients installed on the terminal. A database can be set up on the server or independently of the server to provide data storage services for server 104. Cloud computing and / or edge computing services can be configured on the server or independently of the server to provide data processing services for server 104.

[0028] The aforementioned network may include, but is not limited to, at least one of the following: wired network, wireless network. The aforementioned wired network may include, but is not limited to, at least one of the following: wide area network, metropolitan area network, local area network. The aforementioned wireless network may include, but is not limited to, at least one of the following: Wi-Fi (Wireless Fidelity), Bluetooth. The terminal device 102 may not be limited to PC, mobile phone, tablet computer, smart air conditioner, smart range hood, smart refrigerator, smart oven, smart stove, smart washing machine, smart water heater, smart washing equipment, smart dishwasher, smart projector, smart TV, smart clothes rack, smart curtains, smart audio-visual equipment, smart socket, smart speaker, smart speaker box, smart fresh air equipment, smart kitchen and bathroom equipment, smart bathroom equipment, smart robot vacuum cleaner, smart window cleaning robot, smart mopping robot, smart air purifier, smart steam oven, smart microwave oven, smart water heater, smart air purifier, smart water dispenser, smart door lock, etc.

[0029] The following is combined with Figures 1-7 This application describes an application rendering optimization method, apparatus, electronic device, and storage medium.

[0030] Figure 2 This is a flowchart illustrating the application rendering optimization method provided in this application, such as... Figure 2 As shown, the method includes the following: Step 100: Receive a status change notification; wherein, the status change notification is used to indicate a change in the status of application data.

[0031] Specifically, state change notifications typically originate from the application's state management library, such as Redux or Vuex. This notification is triggered when any data that drives changes in the interface (such as user input, list data retrieved from the server, or the on / off state of a component) changes.

[0032] Step 200: Analyze the scope of impact of the change based on the status change notification.

[0033] Specifically, analyzing the scope of the impact of the change involves determining which parts of the user interface, i.e. which components, will be affected by the data change. This is different from simply listening to the data itself, but requires understanding the relationship between the data and the UI components.

[0034] Step 300: Based on the scope of the change's impact, determine and execute the virtual DOM difference calculation for the target type to generate a minimum change set; among which, the types of virtual DOM difference calculation include: full virtual DOM difference calculation and partial virtual DOM difference calculation.

[0035] Step 400: Based on the rendering task corresponding to the minimum change set, output rendering instructions and execute rendering operations based on the rendering instructions.

[0036] Specifically, based on this analysis, the target type of virtual DOM diff calculation is determined and performed. The virtual DOM is a copy of the interface structure described by JavaScript objects, and diff calculation (the Diff algorithm) is the process of comparing the old and new virtual DOMs to find the points of change. This application introduces a selective strategy: when the change has a wide impact, full virtual DOM diff calculation is used, i.e., comparing the entire virtual DOM tree to ensure no omissions; while when the change only affects a local area, local virtual DOM diff calculation is enabled, comparing only the affected subtree, thus skipping the comparison of a large number of unchanged nodes and significantly saving computational overhead. Regardless of the calculation type used, the ultimate goal is to generate a minimal change set, which is a concise set of instructions that describes the minimum number of operations required to represent the real DOM.

[0037] Finally, the rendering engine receives this minimal changeset and translates it into specific, efficient browser DOM API calls, ultimately completing the user interface update.

[0038] The above describes the steps of the application rendering optimization method provided in this application. As can be seen from the above description, the application rendering optimization method provided in this application involves receiving state change notifications; these notifications represent changes in the state of application data; analyzing the scope of the change's impact based on the state change notifications; determining and performing virtual DOM difference calculations for the target type based on the scope of the change's impact, and generating a minimum change set; the types of virtual DOM difference calculations include full virtual DOM difference calculations and partial virtual DOM difference calculations; and outputting rendering instructions based on the rendering task corresponding to the minimum change set and performing rendering operations based on these instructions. Therefore, this application effectively avoids the waste of computational resources caused by the requirement for full comparison regardless of the size of the change in existing technologies by intelligently selecting whether to perform full or partial virtual DOM difference calculations based on the scope of the state change's impact, thus improving rendering efficiency and ensuring that the web application interface maintains smooth responsiveness even when facing frequent state updates.

[0039] Based on the above embodiments, in this embodiment, step 200 analyzes the scope of impact of the change based on the status change notification, including: Step 210: Parse the status change notification to obtain the status change path of the application data.

[0040] Step 220: Based on the state change path, query the pre-established dynamic dependency graph to obtain the list of components affected by the state change path; wherein, the dynamic dependency graph is used to record the dependency relationship between application data state and components.

[0041] Step 230: Determine the affected component subtrees based on the list of components affected by the state change path.

[0042] Specifically, parsing a status change notification involves extracting the status change path from the notification. This is a key identifier used to uniquely identify which data(s) has changed. For example, in a complex global status tree, the path might be user.profile.avatarUrl, indicating that the user's avatar link has been updated.

[0043] Subsequently, the system queries a pre-established dynamic dependency graph. During application initialization or runtime, it continuously maintains the dynamic relationships between the data state and the UI components that depend on that state through reactive systems or static analysis. It is not a static configuration, but a graph structure that updates in real time as components are mounted and unmounted. By querying this graph using the state change path, the system can accurately obtain the list of affected components. For example, when avatarUrl changes, the dependency graph will indicate that not only the UserAvatar component needs to be updated, but also the NavBar component in the navigation bar and the ProfileCard component in the settings page depend on this data.

[0044] Finally, the discrete list of components is transformed into an operable update unit in the virtual DOM tree. It finds the nearest common ancestor of these affected components in the virtual DOM tree, thereby defining the boundary range that needs to be traversed and compared for this local difference calculation, ensuring that the calculation is strictly limited to the necessary area.

[0045] The application rendering optimization method provided in this embodiment can accurately locate the components affected by data changes by parsing the state change path and querying the dynamic dependency graph, thereby narrowing the scope of virtual DOM difference calculation from the entire application interface to the affected component subtree.

[0046] Based on the above embodiments, in this embodiment, step 300, according to the scope of the change's impact, determines and performs virtual DOM difference calculation for the target type, including: Step 310: Determine whether the affected component subtree meets the predefined local update conditions and generate the determination result.

[0047] Step 320: If the judgment result indicates that the local update condition is met, determine the target type as local virtual DOM difference calculation, and perform difference calculation only on the affected component subtree.

[0048] Step 330: If the judgment result indicates that the local update condition is not met, determine the target type as full virtual DOM difference calculation, and perform difference calculation on the entire virtual DOM tree.

[0049] Specifically, the local update condition is a set of configurable heuristic rules, and the judgment criteria may include, but are not limited to: the size of the affected subtree, for example, whether the number of nodes in the subtree is less than 20% of the total number of nodes; the data type of the change, for example, whether it is a high-frequency, lightweight operation such as user input, or a heavyweight operation such as batch data import; or the current system load status.

[0050] This judgment produces a clear result, intelligently routing to two different computation paths: if the result indicates that the conditions are met, efficient local virtual DOM difference calculation is triggered. This method strictly limits the calculation scope to the affected component subtree determined in the previous steps, comparing only the old and new virtual DOM nodes in this subtree, thus skipping all static and unchanged parts of the interface and greatly saving computational resources. Conversely, if the result indicates that the conditions are not met, for example, in a root-level state reset with a very wide impact, full virtual DOM difference calculation is reliably enabled, performing a depth-first traversal comparison of the complete virtual DOM tree to ensure the absolute accuracy of the view state under complex changes. This dynamic selection mechanism ensures that extreme performance improvements can be enjoyed in most local update scenarios, while guaranteeing the accuracy of results during necessary global updates.

[0051] Further, after step 300 determines and performs virtual DOM difference calculations for the target type based on the scope of the change's impact, and generates a minimum change set, the method also includes: Store the virtual DOM nodes that did not change in this virtual DOM difference calculation into the virtual DOM node pool; When creating a new virtual DOM node, node instances are preferentially retrieved from the virtual DOM node pool and reused.

[0052] Specifically, the virtual DOM node pool is essentially a cache maintained in memory to store temporarily idle but reusable virtual DOM nodes. After each virtual DOM difference calculation, the system performs a filtering process, marking those nodes that were marked as unchanged in this comparison (e.g., unmodified nodes in a list item). The virtual node corresponding to an element is detached from the current rendering context and stored in this node pool, putting it into a standby state instead of being destroyed as obsolete data by JavaScript's garbage collection mechanism. Correspondingly, when the application state changes and a new virtual DOM node needs to be created (for example, when a user adds an item to a list), the system does not immediately request new memory from the operating system to create the node instance. Instead, it first queries this node pool to check if there is a reusable empty node shell with a matching type and structure. If found, it is directly retrieved, new attributes or child node data are injected, thus reviving the node for use in the new virtual DOM tree.

[0053] The application rendering optimization method provided in this embodiment introduces a virtual DOM node pool mechanism to recycle and cache nodes that have not changed in the difference calculation. When a new node needs to be created, it is reused from the pool first, which effectively reduces the stuttering and jitter of the interface rendering and improves the overall smoothness and stability of the application in long-term operation and large-scale data update scenarios.

[0054] Based on the above embodiments, in this embodiment, before step 400 outputs rendering instructions based on the rendering task corresponding to the minimum change set and performs rendering operations based on the rendering instructions, the method further includes: Assign priority levels to the rendering tasks corresponding to the minimum change set according to task type; the task types include: user interaction tasks, animation rendering tasks, data update tasks, and background calculation tasks; Add rendering tasks with assigned priority levels to the task queue; Rendering tasks are retrieved from the task queue and executed in descending order of priority.

[0055] Specifically, task types are categorized based on their immediate impact on user experience: for example, user interaction tasks that directly respond to user clicks or inputs are given the highest priority because they directly relate to the application's responsiveness; animation rendering tasks that ensure smooth animation are given the next highest priority; and background computation tasks such as large dataset updates or log reporting are listed as the lowest priority. The system assigns a corresponding priority level to each rendering task generated from the minimum change set and places it in a unified task queue to await execution. This task queue is a priority queue that can dynamically adjust the dequeue order of tasks based on priority. The scheduler processes tasks in the queue in descending order of priority, meaning that even if a user suddenly clicks a button while performing large-scale data computation in the background, the highest priority interaction task can immediately interrupt lower priority tasks, be inserted at the head of the queue, and be executed immediately, thus ensuring that the interface responds to operations without delay.

[0056] It should be noted that the priority levels, from highest to lowest, are: execute immediately, execute in the next frame, execute when idle, and execute in the background; Rendering tasks are retrieved from the task queue and executed sequentially according to their priority level, from highest to lowest, including: For tasks with a priority level of immediate execution, insert them at the head of the task queue and execute them immediately; For tasks with a priority level of execution in the next frame, they are scheduled to be executed in the next browser animation frame. For tasks with a priority level of executing during idle time, scheduling is performed through the browser's idle time callback API; For tasks with a priority level of background execution, set them as interruptible tasks and execute them when there are no higher priority tasks in the task queue.

[0057] Figure 3 This is a schematic diagram of the priority scheduler principle provided in this application, such as... Figure 3 As shown, user interaction tasks marked as "immediately executed" at the top (such as button clicks and form input) are given the highest priority. The system will interrupt or postpone any ongoing low-priority work to ensure the application feels responsive and intuitive. Following closely are animation rendering tasks scheduled for execution in the next frame. This means they are scheduled to execute in the next browser rendering frame (usually synchronized with the screen refresh rate, such as 16.7ms per frame) to ensure smooth and consistent animation effects, avoiding visual stuttering or tearing. Third-level data update tasks (such as fetching new data from the server and updating the interface) are marked for execution during idle periods. The system will utilize browser APIs such as `requestIdleCallback` to execute them only during idle periods when the main thread has no other higher-priority tasks, thus avoiding blocking critical user interactions and rendering. The lowest-level background computation tasks (such as data preprocessing and log reporting) are marked as the lowest priority. These tasks do not block the main thread at all, execute only when the system is completely idle, and can be interrupted and preempted by any higher-priority task at any time.

[0058] The application rendering optimization method provided in this embodiment establishes a multi-level priority scheduling mechanism based on task type. Tasks that directly impact user experience, such as user interaction and animation rendering, are set to the highest priority and executed immediately, while non-urgent tasks such as data updates and background calculations are delayed until idle periods. This strategy effectively solves the UI lag problem caused by low-priority tasks blocking the main thread in traditional rendering processes, ensuring immediate response to user operations and smooth visual effects. This significantly improves the consistency and satisfaction of the user experience in complex application scenarios.

[0059] Based on the above embodiments, in this embodiment, step 400 outputs rendering instructions based on the rendering task corresponding to the minimum change set and performs rendering operations based on the rendering instructions, including: Step 410: Given that the minimum change set corresponds to the target large-scale dataset, divide the target large-scale dataset into multiple data shards.

[0060] Step 420: Prioritize rendering the data fragments corresponding to the currently visible area, and gradually render the remaining data fragments during browser idle periods or user scrolling intervals.

[0061] Specifically, when the system detects that the smallest change set is associated with a target large-scale dataset (such as a table containing tens of thousands of rows of data or an extremely long list of images), it will not attempt to... Figure 1 Instead of rendering all content at once, it performs data sharding, which divides the complete dataset into multiple smaller, more manageable logical data shards according to a preset size (e.g., 50 records per shard).

[0062] Subsequently, the rendering engine prioritizes and immediately renders the data chunks corresponding to the currently visible area—that is, the portion of the content visible within the user's screen field of view. This allows the user to see the initial screen content with almost no delay and receive instant feedback. Meanwhile, for the remaining data chunks outside the visible area, the system intelligently and gradually renders them in batches, utilizing the browser's idle time (implemented through the requestIdleCallback API) or the intervals between user scrolling operations (i.e., the brief pause between two scroll events).

[0063] The application rendering optimization method provided in this embodiment effectively avoids the problem of long-term blocking of the main thread and interface lag caused by rendering massive amounts of data at once. This is achieved by dividing a large-scale dataset into multiple data fragments and prioritizing the rendering of visible area content while delaying the rendering of non-visual area content.

[0064] Figure 4 This is a schematic diagram illustrating the principle of the application rendering optimization method provided in this application. Figure 5 This is a complete flowchart of the application rendering optimization method provided in this application. The following is a summary of the process. Figure 4 and Figure 5 This application provides a complete description of the application rendering optimization method.

[0065] like Figure 4 As shown, the entire system revolves around a state management layer. When application data changes, the change detector detects this change and sends a notification. The intelligent diff engine receives the notification and includes a computation optimizer to execute critical diff calculation logic. The resulting rendering tasks are not executed immediately but are instead scheduled and prioritized by a priority scheduler and its internal task queue management module, ensuring that high-priority tasks (such as user interactions) are processed first. Finally, the rendering executor executes the scheduled tasks, efficiently applying the final updates to the real DOM, thereby driving user interface updates. The entire architecture clearly demonstrates layered decoupling and collaborative control from data changes to interface updates.

[0066] like Figure 5 As shown, the process begins with receiving a state change notification, followed by analyzing the scope of the change's impact. This step relies on a dependency analyzer to precisely define the affected component range. Next, a decision is made on whether to perform a partial update. This binary decision leads the process down two efficient paths: if yes, a local Diff calculation branch is executed, comparing only the affected parts; if no, a full Diff calculation branch is executed, performing a global comparison. Regardless of the path, the final goal is to generate a minimal changeset, which is then used to output rendering instructions to conclude the update cycle.

[0067] / / Core code example of the intelligent Diff engine class SmartDiffEngine { constructor() { this.dependencyGraph = new Map(); this.updateQueue = new PriorityQueue(); } / / Partial update detection detectPartialUpdate(changePath, componentTree) { const affectedComponents = this.dependencyGraph.getAffectedComponents(changePath); return this.calculatePartialDiff(affectedComponents); } / / Priority scheduling scheduleUpdate(task, priority) { this.updateQueue.enqueue(task, priority); this.processQueue(); } } The application rendering optimization method provided in this application systematically solves the long-standing rendering performance bottleneck problem in large single-page applications by intelligently analyzing the impact range of state changes and adaptively selecting full or partial difference calculations, combined with multi-level priority task scheduling and progressive rendering strategies. In complex application scenarios with large amounts of data and frequent interactions, it comprehensively ensures the ultimate smoothness of interface rendering and operational stability.

[0068] The application rendering optimization apparatus provided in this application is described below. The application rendering optimization apparatus described below can be referred to in correspondence with the application rendering optimization method described above.

[0069] Figure 6 This is a schematic diagram of the application rendering optimization device provided in this application, such as... Figure 6 As shown, the application rendering optimization apparatus provided in this application includes: The receiving module 601 is used to receive status change notifications; wherein, the status change notification is used to indicate a change in the status of application data; Analysis module 602 is used to analyze the scope of impact of changes based on status change notifications; The generation module 603 is used to determine and perform virtual DOM difference calculations for the target type based on the scope of the change's impact, and generate a minimum change set; wherein, the types of virtual DOM difference calculations include: full virtual DOM difference calculations and partial virtual DOM difference calculations; The rendering module 604 is used to output rendering instructions based on the rendering task corresponding to the minimum change set and to perform rendering operations based on the rendering instructions.

[0070] The application rendering optimization apparatus provided in this application receives state change notifications, which indicate changes in the state of application data. Based on the state change notifications, it analyzes the scope of the change's impact. According to the scope of the change's impact, it determines and performs virtual DOM difference calculations for the target type, generating a minimum change set. The types of virtual DOM difference calculations include full virtual DOM difference calculations and partial virtual DOM difference calculations. Based on the rendering task corresponding to the minimum change set, it outputs rendering instructions and performs rendering operations based on these instructions. Therefore, this application effectively avoids the waste of computational resources caused by the requirement for full comparison regardless of the change's size in existing technologies by intelligently selecting whether to perform full or partial virtual DOM difference calculations based on the scope of the state change's impact. This improves rendering efficiency and ensures that the web application interface maintains smooth responsiveness even when facing frequent state updates.

[0071] Based on the above embodiments, in this embodiment, the analysis module 602 is specifically used for: Parse the status change notification to obtain the status change path of the application data; Based on the state change path, query the pre-established dynamic dependency graph to obtain the list of components affected by the state change path; the dynamic dependency graph is used to record the dependency relationship between application data state and components. Based on the list of components affected by the state change path, determine the affected component subtrees.

[0072] Based on the above embodiments, in this embodiment, the generation module 603 is specifically used for: Determine whether the affected component subtree meets the predefined local update conditions and generate the determination result; If the judgment result indicates that the local update condition is met, the target type is determined to be local virtual DOM difference calculation, and difference calculation is performed only on the affected component subtree; If the judgment result indicates that the local update condition is not met, the target type is determined to be full virtual DOM difference calculation, and difference calculation is performed on the entire virtual DOM tree.

[0073] Based on the above embodiments, in this embodiment, the device further includes an execution module, specifically used for: Before outputting rendering instructions and performing rendering operations based on the rendering task corresponding to the minimum change set. Assign priority levels to the rendering tasks corresponding to the minimum change set according to task type; the task types include: user interaction tasks, animation rendering tasks, data update tasks, and background calculation tasks; Add rendering tasks with assigned priority levels to the task queue; Rendering tasks are retrieved from the task queue and executed in descending order of priority.

[0074] Based on the above embodiments, in this embodiment, the priority levels from high to low include: immediate execution, next frame execution, idle time execution, and background execution; The execution module is specifically used for: For tasks with a priority level of immediate execution, insert them at the head of the task queue and execute them immediately; For tasks with a priority level of execution in the next frame, they are scheduled to be executed in the next browser animation frame. For tasks with a priority level of executing during idle time, scheduling is performed through the browser's idle time callback API; For tasks with a priority level of background execution, set them as interruptible tasks and execute them when there are no higher priority tasks in the task queue.

[0075] Based on the above embodiments, in this embodiment, the device further includes an execution module, specifically used for: Based on the scope of the changes, determine and perform virtual DOM difference calculations for the target type, and then generate the minimum changeset. Store the virtual DOM nodes that did not change in this virtual DOM difference calculation into the virtual DOM node pool; When creating a new virtual DOM node, node instances are preferentially retrieved from the virtual DOM node pool and reused.

[0076] Based on the above embodiments, in this embodiment, the rendering module 604 is specifically used for: In the case where the minimum change set corresponds to the target large-scale dataset, the target large-scale dataset is divided into multiple data fragments; Prioritize rendering the data fragments corresponding to the currently visible area, and gradually render the remaining data fragments during browser idle periods or user scrolling intervals.

[0077] Figure 7 An example is a schematic diagram of the physical structure of an electronic device, such as... Figure 7 As shown, the electronic device can be a robot or other electronic device. This electronic device may include: a processor 710, a communications interface 720, a memory 730, and a communication bus 740. The processor 710, communications interface 720, and memory 730 communicate with each other via the communication bus 740. The processor 710 can call logical instructions from the memory 730 to execute application rendering optimization methods, including: Receive status change notification; wherein the status change notification is used to indicate a change in the status of application data; Based on the status change notification, analyze the scope of the change's impact; Based on the scope of the changes, determine and perform virtual DOM difference calculations for the target type to generate a minimum change set; wherein, the types of virtual DOM difference calculations include: full virtual DOM difference calculations and partial virtual DOM difference calculations; Based on the rendering task corresponding to the minimum change set, output rendering instructions and execute rendering operations based on the rendering instructions.

[0078] Furthermore, the logical instructions in the aforementioned memory 730 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0079] On the other hand, this application also provides a computer program product, which includes a computer program that can be stored on a non-transitory computer-readable storage medium. When the computer program is executed by a processor, the computer is able to execute the application rendering optimization methods provided by the above methods, including: Receive status change notification; wherein the status change notification is used to indicate a change in the status of application data; Based on the status change notification, analyze the scope of the change's impact; Based on the scope of the changes, determine and perform virtual DOM difference calculations for the target type to generate a minimum change set; wherein, the types of virtual DOM difference calculations include: full virtual DOM difference calculations and partial virtual DOM difference calculations; Based on the rendering task corresponding to the minimum change set, output rendering instructions and execute rendering operations based on the rendering instructions.

[0080] Furthermore, this application also provides a non-transitory computer-readable storage medium storing a computer program thereon, which, when executed by a processor, is implemented to perform the application rendering optimization methods provided by the methods described above, including: Receive status change notification; wherein the status change notification is used to indicate a change in the status of application data; Based on the status change notification, analyze the scope of the change's impact; Based on the scope of the changes, determine and perform virtual DOM difference calculations for the target type to generate a minimum change set; wherein, the types of virtual DOM difference calculations include: full virtual DOM difference calculations and partial virtual DOM difference calculations; Based on the rendering task corresponding to the minimum change set, output rendering instructions and execute rendering operations based on the rendering instructions.

[0081] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0082] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.

[0083] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application 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 this application.

Claims

1. An application rendering optimization method, characterized in that, include: Receive status change notification; wherein the status change notification is used to indicate a change in the status of application data; Based on the status change notification, analyze the scope of the change's impact; Based on the scope of the changes, determine and perform virtual DOM difference calculations for the target type to generate a minimum change set; wherein, the types of virtual DOM difference calculations include: full virtual DOM difference calculations and partial virtual DOM difference calculations; Based on the rendering task corresponding to the minimum change set, output rendering instructions and execute rendering operations based on the rendering instructions.

2. The application rendering optimization method according to claim 1, characterized in that, The analysis of the scope of impact of the change based on the status change notification includes: Parse the status change notification to obtain the status change path of the application data; Based on the state change path, a pre-established dynamic dependency graph is queried to obtain a list of components affected by the state change path; wherein, the dynamic dependency graph is used to record the dependency relationship between application data state and components; Based on the list of components affected by the state change path, determine the affected component subtree.

3. The application rendering optimization method according to claim 2, characterized in that, The step of determining and performing virtual DOM difference calculations for the target type based on the scope of the change's impact includes: Determine whether the affected component subtree meets the predefined local update conditions, and generate a determination result; If the judgment result indicates that the local update condition is met, the target type is determined to be the local virtual DOM difference calculation, and the difference calculation is performed only on the affected component subtree; If the judgment result indicates that the local update condition is not met, the target type is determined to be the full virtual DOM difference calculation, and the difference calculation is performed on the entire virtual DOM tree.

4. The application rendering optimization method according to claim 1, characterized in that, Before outputting rendering instructions based on the rendering task corresponding to the minimum change set and performing rendering operations based on the rendering instructions, the method further includes: The rendering tasks corresponding to the minimum change set are assigned priority levels according to task type; wherein, the task types include: user interaction tasks, animation rendering tasks, data update tasks, and background computing tasks; Add the rendering task with the assigned priority level to the task queue; The rendering tasks are retrieved from the task queue and executed in descending order of priority.

5. The application rendering optimization method according to claim 4, characterized in that, The priority levels, from highest to lowest, are: execute immediately, execute in the next frame, execute when idle, and execute in the background. The step of retrieving and executing the rendering tasks sequentially from the task queue in descending order of priority includes: For tasks with a priority level of immediate execution, insert them at the head of the task queue and execute them immediately; For tasks with a priority level of execution in the next frame, they are scheduled to be executed in the next browser animation frame. For tasks with a priority level of executing during idle time, scheduling is performed through the browser's idle time callback API; For tasks with a priority level of background execution, set them as interruptible tasks and execute them when there are no higher priority tasks in the task queue.

6. The application rendering optimization method according to claim 3, characterized in that, After determining and performing virtual DOM difference calculations for the target type based on the scope of the change's impact, and generating a minimum change set, the method further includes: Store the virtual DOM nodes that did not change in this virtual DOM difference calculation into the virtual DOM node pool; When creating a new virtual DOM node, node instances are preferentially retrieved from and reused in the virtual DOM node pool.

7. The application rendering optimization method according to claim 4, characterized in that, The step of outputting rendering instructions based on the rendering task corresponding to the minimum change set and performing rendering operations based on the rendering instructions includes: In the case where the minimum change set corresponds to the target large-scale dataset, the target large-scale dataset is divided into multiple data fragments; Prioritize rendering the data fragments corresponding to the currently visible area, and gradually render the remaining data fragments during browser idle periods or user scrolling intervals.

8. An application rendering optimization device, characterized in that, include: A receiving module is used to receive status change notifications; wherein the status change notifications are used to indicate changes in the status of application data; The analysis module is used to analyze the scope of impact of the change based on the status change notification; The generation module is used to determine and perform virtual DOM difference calculations of the target type based on the scope of the change's impact, and generate a minimum change set; wherein, the types of virtual DOM difference calculations include: full virtual DOM difference calculations and partial virtual DOM difference calculations; The rendering module is used to output rendering instructions based on the rendering task corresponding to the minimum change set and to perform rendering operations based on the rendering instructions.

9. An electronic 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 application rendering optimization method as described in any one of claims 1 to 7.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the application rendering optimization method as described in any one of claims 1 to 7.

Images