DOM updating method, device and equipment
By using update flags and node flags to filter the set of updated nodes during DOM updates, the problem of low DOM update efficiency is solved, avoiding full comparisons and re-rendering, thus achieving more efficient DOM updates.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-09
- Publication Date
- 2026-04-14
AI Technical Summary
Current technologies have low efficiency in updating the DOM, especially in the process of comparing the entire DOM layer by layer and node by node, which results in significant performance loss.
By identifying the update identifiers of nodes in the first virtual DOM after data updates, and combining them with the node identifiers of nodes in the second virtual DOM before the update, the set of updated nodes is precisely selected, and only these sets are updated, avoiding full comparison and re-rendering.
It improves the efficiency of DOM updates, reduces unnecessary calculations and redundant operations, and ensures the efficiency and accuracy of DOM updates.
Smart Images
Figure CN121858580A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of data processing technology, and in particular to a method, apparatus and device for updating a DOM. Background Technology
[0002] In front-end applications, the Virtual Document Object Model (DOM) is a lightweight abstract description of the structure, attributes, and content of the real DOM.
[0003] To reduce the performance overhead of frequent operations on the real DOM, virtual DOM can be used to modify the real DOM. In related technologies, this can be achieved by generating a first virtual DOM that matches the latest front-end state in response to a change in the application's state. This first virtual DOM is then compared with a second virtual DOM before the state change, performing a full, layer-by-layer, node-by-node comparison to determine the changed nodes and types of changes in the first virtual DOM compared to the second. Finally, the real DOM is updated based on these changes. However, this process requires a full, layer-by-layer, node-by-node comparison of both the first and second virtual DOMs, resulting in relatively low efficiency in updating the real DOM. Summary of the Invention
[0004] This application provides a method, apparatus, and device for updating the DOM, in order to solve the problem of low efficiency in updating the DOM.
[0005] In a first aspect, embodiments of this application provide a method for updating a DOM, including:
[0006] In response to data updates, an update identifier is determined for each of at least one first node in the first virtual DOM. The first virtual DOM is the virtual DOM after the data update, and the first virtual DOM includes at least one set of first nodes.
[0007] Obtain the node identifier of at least one second node in the second virtual DOM, where the second virtual DOM is the virtual DOM before the data update;
[0008] Based on the update identifier of at least one first node and the node identifier of at least one second node, determine at least one set of update nodes from at least one set of first nodes;
[0009] The DOM is updated based on at least one set of update nodes to obtain the updated DOM.
[0010] This application first determines the update identifier of the nodes in the first virtual DOM after the data update, and then combines it with the node identifier of the nodes in the second virtual DOM before the update to filter out the set of updated nodes. The DOM is updated only based on this set, which can accurately locate the node parts that need to be updated, avoid full DOM comparison and redundant updates, thereby improving the DOM update efficiency.
[0011] In one possible implementation, in response to a data update, determining an update identifier for each of at least one first node in the first virtual DOM includes:
[0012] Obtain the node identifier of at least one first node;
[0013] In response to data updates, at least one update node is identified in at least one first node, and a change feature identifier for each of the at least one update node is generated; for each update node in the at least one update node, the change feature identifier of the update node is used to indicate the change type and change content of the update node;
[0014] Based on the node identifier of at least one first node and the change feature identifier of at least one update node, determine the update identifier of at least one first node.
[0015] This application embodiment determines the update identifier by combining the node identifier of the first node with the change feature identifier of the update node (clearly defining the change type and content). This not only accurately locates the update node but also clearly records the change details, providing a reliable basis for quickly filtering the set of update nodes and accurately executing DOM updates, thus further improving the efficiency of DOM updates.
[0016] In one possible implementation, determining the update identifier of at least one first node based on the node identifier of at least one first node and the change feature identifier of at least one updating node includes:
[0017] For each of the first nodes in at least one set of first nodes, perform the following operations:
[0018] When the first node is an update node, the node identifier of the first node is updated according to the change feature identifier of the update node corresponding to the first node to obtain the update identifier of the first node.
[0019] If the first node is not the update node, the node identifier of the first node is determined as the update identifier of the first node.
[0020] This application embodiment efficiently generates the update identifier of the first node through differentiated processing of "updating nodes using change feature identifiers to update node identifiers, and non-updating nodes directly using the original node identifiers". This ensures the accurate carrying of change information of updated nodes and avoids invalid processing of non-updating nodes, thereby improving the efficiency and accuracy of update identifier determination.
[0021] In one possible implementation, the second virtual DOM includes at least one second set of nodes, and the at least one second set of nodes and at least one first set of nodes are in one-to-one correspondence; determining at least one update node set in the at least one first set of nodes based on the update identifier of each of the at least one first node and the node identifier of each of the at least one second node includes:
[0022] For each set of first nodes in at least one set of first nodes, perform the following operation:
[0023] Determine the first parent node of the set of first nodes in at least one first node;
[0024] Determine the target node set corresponding to the first node set from at least one second node set;
[0025] Determine the second parent node of the target node set in at least one second node;
[0026] Based on the update identifier of the first parent node and the node identifier of the second parent node, determine whether the first node set is an update node set.
[0027] This application embodiment uses the one-to-one correspondence between the node sets in the first virtual DOM and the second virtual DOM to determine the updated node set by comparing the update identifier of the corresponding parent node with the node identifier. This eliminates the need to traverse all nodes in the set, significantly reducing the complexity of filtering the updated node set and improving the efficiency of determining the updated node set.
[0028] In one possible implementation, determining whether the first node set is an update node set based on the update identifier of the first parent node and the node identifier of the second parent node includes:
[0029] Determine the degree of difference between the update identifier of the first parent node and the node identifier of the second parent node;
[0030] If the difference is less than a preset threshold, the first set of nodes is determined not to be the updated set of nodes.
[0031] If the degree of difference is greater than or equal to a preset threshold, the first set of nodes is determined to be the updated set of nodes.
[0032] This application embodiment quantifies the difference between the parent node update identifier and the node identifier and combines it with a preset threshold to accurately filter out the set of nodes that need to be updated. This reduces the invalid processing of sets with no substantial changes and ensures that no changed sets are missed, thereby improving the accuracy and efficiency of the determination of the updated node set.
[0033] In one possible implementation, the DOM is updated based on at least one set of updated nodes to obtain the updated DOM, including:
[0034] Determine the update type for each of at least one set of update nodes;
[0035] Based on the mapping relationship between update type and update priority, and the update type of each of the at least one set of update nodes, determine the priority of each of the at least one set of update nodes;
[0036] The DOM is updated based on the priority of at least one set of update nodes and at least one set of update nodes to obtain the updated DOM.
[0037] This application embodiment matches update types and priorities and updates the DOM according to priority, allowing critical update tasks to be executed first and avoiding high-priority tasks from being blocked. This not only ensures the smoothness of the user interaction experience, but also improves the orderliness and efficiency of the overall DOM update.
[0038] In one possible implementation, the DOM is updated according to the priority of at least one set of update nodes and at least one set of update nodes to obtain an updated DOM, including:
[0039] Perform the first operation, which includes: for the set of update nodes with priority i, determine the update content and hierarchical path of each first node in the set of update nodes; determine the set of third nodes corresponding to the set of update nodes in the DOM according to the hierarchical path of each first node in the set of update nodes; update the set of third nodes according to the update content of each node in the set of update nodes, and obtain the updated set of third nodes corresponding to the set of update nodes with priority i.
[0040] Update i to i-1, repeat the first operation until at least one set of updated nodes has been updated; where the updated DOM includes at least one set of updated nodes corresponding to the updated third node set, i is a positive integer, and i is initially the highest priority among the priorities of at least one set of updated nodes.
[0041] This application embodiment, based on priority, combines the updated content of the first node with the hierarchical path to accurately locate and update the corresponding third node set in the DOM. This ensures the orderly execution of tasks with different priorities, achieves the accuracy of DOM updates, avoids redundant operations, and improves update efficiency.
[0042] Secondly, embodiments of this application provide a DOM updating apparatus, the apparatus comprising:
[0043] The determination module is used to determine the update identifier of at least one first node in the first virtual DOM in response to data updates. The first virtual DOM is the virtual DOM after data updates and includes at least one set of first nodes.
[0044] The acquisition module is used to acquire the node identifier of at least one second node in the second virtual DOM, wherein the second virtual DOM is the virtual DOM before the data is updated;
[0045] The processing module is configured to determine at least one set of updated nodes in at least one set of first nodes based on the update identifier of at least one first node and the node identifier of at least one second node.
[0046] The update module is used to update the DOM based on at least one set of update nodes to obtain the updated DOM.
[0047] In one possible implementation, the determining module is specifically used for:
[0048] Obtain the node identifier of at least one first node;
[0049] In response to data updates, at least one update node is identified in at least one first node, and a change feature identifier for each of the at least one update node is generated; for each update node in the at least one update node, the change feature identifier of the update node is used to indicate the change type and change content of the update node;
[0050] Based on the node identifier of at least one first node and the change feature identifier of at least one update node, determine the update identifier of at least one first node.
[0051] In one possible implementation, the determining module is specifically used for:
[0052] For each of the first nodes in at least one set of first nodes, perform the following operations:
[0053] When the first node is an update node, the node identifier of the first node is updated according to the change feature identifier of the update node corresponding to the first node to obtain the update identifier of the first node.
[0054] If the first node is not the update node, the node identifier of the first node is determined as the update identifier of the first node.
[0055] In one possible implementation, the second virtual DOM includes at least one second node set, and the at least one second node set and at least one first node set are in one-to-one correspondence; the processing module is specifically used for:
[0056] For each set of first nodes in at least one set of first nodes, perform the following operation:
[0057] Determine the first parent node of the set of first nodes in at least one first node;
[0058] Determine the target node set corresponding to the first node set from at least one second node set;
[0059] Determine the second parent node of the target node set in at least one second node;
[0060] Based on the update identifier of the first parent node and the node identifier of the second parent node, determine whether the first node set is an update node set.
[0061] In one possible implementation, the processing module is specifically used for:
[0062] Determine the degree of difference between the update identifier of the first parent node and the node identifier of the second parent node;
[0063] If the difference is less than a preset threshold, the first set of nodes is determined not to be the updated set of nodes.
[0064] If the degree of difference is greater than or equal to a preset threshold, the first set of nodes is determined to be the updated set of nodes.
[0065] In one possible implementation, the update module is specifically used for:
[0066] Determine the update type for each of at least one set of update nodes;
[0067] Based on the mapping relationship between update type and update priority, and the update type of each of the at least one set of update nodes, determine the priority of each of the at least one set of update nodes;
[0068] The DOM is updated based on the priority of at least one set of update nodes and at least one set of update nodes to obtain the updated DOM.
[0069] In one possible implementation, the update module is specifically used for:
[0070] Perform the first operation, which includes: for the set of update nodes with priority i, determine the update content and hierarchical path of each first node in the set of update nodes; determine the set of third nodes corresponding to the set of update nodes in the DOM according to the hierarchical path of each first node in the set of update nodes; update the set of third nodes according to the update content of each node in the set of update nodes, and obtain the updated set of third nodes corresponding to the set of update nodes with priority i.
[0071] Update i to i-1, repeat the first operation until at least one set of updated nodes has been updated; where the updated DOM includes at least one set of updated nodes corresponding to the updated third node set, i is a positive integer, and i is initially the highest priority among the priorities of at least one set of updated nodes.
[0072] Thirdly, embodiments of this application provide a DOM updating device, comprising:
[0073] At least one processor; and
[0074] A memory that is communicatively connected to at least one processor; wherein,
[0075] The memory stores instructions that can be executed by at least one processor, such that the at least one processor is able to perform the method shown in any of the first aspects.
[0076] Fourthly, embodiments of this application provide a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause a computer to perform the method shown in any of the first aspects.
[0077] Fifthly, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the method shown in any of the first aspects.
[0078] The DOM update method, apparatus, and device provided in this application, after data update, first determine the update identifier of nodes in the first virtual DOM and obtain the node identifier of nodes in the second virtual DOM before the update. Then, based on the two types of identifiers, accurately select the update node set from the first node set. Finally, only the real DOM parts corresponding to these sets are updated. The above DOM update method avoids full virtual DOM comparison and full DOM re-rendering, greatly reducing invalid calculations and redundant operations, thereby improving the efficiency of DOM update. Attached Figure Description
[0079] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.
[0080] Figure 1 A schematic diagram illustrating the application scenarios provided in the embodiments of this application;
[0081] Figure 2 A flowchart illustrating a DOM update method provided in an embodiment of this application;
[0082] Figure 3 A schematic diagram illustrating the process of determining the update identifier of at least one first node according to an embodiment of this application;
[0083] Figure 4 A flowchart illustrating the process of determining the set of update nodes provided in an embodiment of this application;
[0084] Figure 5 A schematic diagram illustrating the process of determining the updated DOM provided in an embodiment of this application;
[0085] Figure 6 A schematic diagram of the DOM updating device provided in an embodiment of this application;
[0086] Figure 7 This is a schematic diagram of the structure of the DOM update device provided in an embodiment of this application.
[0087] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation
[0088] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.
[0089] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.
[0090] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with relevant laws, regulations and standards, and corresponding operation entry points are provided for users to choose to authorize or refuse.
[0091] To facilitate understanding, the following will be combined with... Figure 1 The application scenarios applicable to the embodiments of this application will be described.
[0092] Figure 1 This is a schematic diagram illustrating an application scenario provided in an embodiment of this application. Please refer to [link / reference]. Figure 1 This includes server 101 and client 102. Server 101 can be, for example, a backend server of a business system. Client 102 can be, for example, a mobile phone or computer with a webpage display capability, and the webpage displayed on client 102 is the frontend page of the business system.
[0093] In practical applications, when a user interacts with the front-end page of the business system on client 102, data updates are triggered. Server 101 responds to the data update by updating the DOM of the front-end page, obtaining the updated DOM, and then renders the front-end page of the business system on client 102 based on the updated DOM, resulting in the page after the user's interaction with the front-end page.
[0094] The Virtual DOM is an important mechanism in front-end frameworks used to improve the rendering efficiency of user interfaces (UI). The Virtual DOM refers to maintaining a tree of JavaScript objects in the server's memory to simulate the real DOM of the UI.
[0095] In related technologies, when data changes, the virtual DOM can be used to update the real DOM of the UI accordingly. Specifically, the virtual DOM can be used to update the real DOM through methods such as depth-first comparison algorithms, simulated pre-compilation optimization algorithms, heuristic Diff strategies, and segmented update mechanisms based on Fiber (coordination mechanism).
[0096] Among them, the depth-first comparison algorithm accelerates list updates by recursively traversing DOM nodes and using key attributes. However, the depth-first comparison algorithm lacks a precise change marking mechanism and cannot identify subtrees that do not need to be updated at runtime. It also suffers from invalid calculations caused by full node traversal, and its update efficiency for the real DOM is low, especially in scenarios with deep node levels or small data change ranges.
[0097] Simulated pre-compile optimization algorithms mark static content during the compilation phase to skip runtime comparisons. However, these algorithms are typically based on static priorities or First-In-First-Out (FIFO) queues, making them unable to dynamically adjust according to the actual runtime state and task urgency. Therefore, simulated pre-compile optimization algorithms are only applicable to static nodes that can be determined at compile time and cannot cope with dynamic data changes at runtime.
[0098] Heuristic difference (Diff) strategies reduce the number of comparisons through type judgment and fast paths, but they struggle to balance pruning precision and rendering accuracy, easily leading to missed or redundant updates. Fiber-based segmented update mechanisms break down rendering tasks into smaller chunks and execute them during idle time, but task priorities rely on static configurations and lack dynamic awareness of runtime states (such as user interaction and node visibility).
[0099] In this embodiment, after data update, the update identifier of the node in the first virtual DOM is first determined, and the node identifier of the node in the second virtual DOM before the update is obtained. Then, based on the two types of identifiers, the updated node set is accurately selected from the first node set. Finally, updates are performed only on the real DOM parts corresponding to these sets. The above DOM update method avoids full virtual DOM comparison and full DOM re-rendering, greatly reducing invalid calculations and redundant operations, thereby improving the efficiency of DOM updates.
[0100] The method described in this application will now be illustrated through specific embodiments. It should be noted that the following embodiments may exist independently or in combination with each other; identical or similar content will not be repeated in different embodiments.
[0101] Figure 2 This is a flowchart illustrating a DOM update method provided in an embodiment of this application. Please refer to [link / reference]. Figure 2 The method may include:
[0102] S201. In response to the data update, determine the update identifier of at least one first node in the first virtual DOM, wherein the first virtual DOM is the virtual DOM after the data update, and the first virtual DOM includes at least one set of first nodes.
[0103] The execution entity in this application embodiment can be a DOM updating device or a DOM updating apparatus set in the DOM updating device. The DOM updating apparatus can be implemented by software or by a combination of software and hardware. The DOM updating device can be a server.
[0104] Data refers to the various types of data that applications running on the browser (front-end) rely on, and it is the core data that drives the UI display and interaction of the page.
[0105] The first virtual DOM is a virtual document object model generated based on the latest data after an update. It is a lightweight JavaScript object abstraction describing the updated page UI structure. It's important to note that the virtual DOM does not directly correspond to the real DOM; it only contains core information about page nodes (node type, attributes, child nodes, hierarchical paths, etc.), is stored in memory, and can be efficiently compared and modified. In some embodiments, the first virtual DOM can be represented as an object tree.
[0106] The first node is the smallest unit in the first virtual DOM, and it is an abstract description of a single UI element (or component) in the updated page.
[0107] The update identifier of the first node is used to mark the node content, hierarchical path, and dependencies between parent and child nodes after the first node has been updated.
[0108] A first node set is a combination of multiple related first nodes in a first virtual DOM, divided according to a specific logic. In some embodiments, a first node set can be a subtree or a group of nodes in the first virtual DOM tree. Taking a first node set as a subtree of the object tree of the first virtual DOM as an example, in the first virtual DOM, the hierarchical relationship between parent and child nodes is usually used as a basis, and a first node set corresponds to an independent subtree.
[0109] In some embodiments, after a user interacts with the front-end page, the data is updated accordingly. The node identifiers of at least one first node can be obtained. In response to the data update, the updated node is determined among the at least one first node, and an identifier for the updated node is generated. Then, based on the identifiers of the updated node, the node identifiers of the at least one first node are updated respectively, resulting in an updated identifier for each of the at least one first node.
[0110] S202. Obtain the node identifier of at least one second node in the second virtual DOM, wherein the second virtual DOM is the virtual DOM before the data update.
[0111] The second virtual DOM is a virtual document object model stored on the server before the data is updated. It is a lightweight JavaScript object abstraction of the page UI structure before the update. In some embodiments, the second virtual DOM can be represented as an object tree.
[0112] The second node is the smallest unit in the second virtual DOM, and it is an abstract description of a single UI element (or component) in the page before the update.
[0113] The node identifier of the second node is used to mark the node content, hierarchical path, and dependencies between parent and child nodes.
[0114] In some embodiments, since a second virtual DOM is stored in the server, the second virtual DOM can be retrieved from a storage area in the server.
[0115] S203. Determine at least one set of update nodes in at least one set of first nodes based on the update identifier of at least one first node and the node identifier of at least one second node.
[0116] At least one set of update nodes refers to the set of nodes in the first virtual DOM that require update operations after data updates. For example, at least one set of update nodes can be at least one subtree in the first virtual DOM that requires update operations.
[0117] Optionally, at least one first node and at least one second node are in one-to-one correspondence. For each first node among the at least one first node, the corresponding second node can be determined among the at least one second node. Then, the update identifier of the first node and the node identifier of the corresponding second node are compared. If the update identifier of the first node and the node identifier of the corresponding second node are inconsistent, the set of nodes corresponding to the first node is determined as the update node set. Here, the set of nodes corresponding to the first node is the set of nodes whose parent node is the first node.
[0118] S204. Update the DOM based on at least one set of update nodes to obtain the updated DOM.
[0119] The updated DOM refers to the actual DOM tree after the real page has been updated and rendered. It is the page structure that is finally presented to the user after the data has changed.
[0120] Optionally, for each update node set in at least one update node set, the update type, update content, and hierarchical path of that update node set can be determined. Then, based on the hierarchical path, the node set corresponding to that update node set in the DOM is determined, and the node set corresponding to that update node set is updated according to the update type and update content to obtain the updated DOM.
[0121] The DOM update method provided in this application, after data update, first determines the update identifier of nodes in the first virtual DOM and obtains the node identifier of nodes in the second virtual DOM before the update. Then, based on the two types of identifiers, it accurately selects the set of updated nodes from the first node set. Finally, it performs updates only on the real DOM parts corresponding to these sets. The above DOM update method avoids full virtual DOM comparison and full DOM re-rendering, greatly reducing invalid calculations and redundant operations, thereby improving the efficiency of DOM updates.
[0122] Based on any of the above embodiments, the following, in conjunction with Figure 3 The detailed process for determining the update identifier of at least one first node is described.
[0123] Figure 3 This is a schematic diagram illustrating the process of determining the update identifier of at least one first node according to an embodiment of this application. Please refer to... Figure 3 The process includes:
[0124] S301. Obtain the node identifier of at least one first node.
[0125] The node identifier of the first node is used to mark the node content, hierarchical path, and dependencies between parent and child nodes. Optionally, the node identifier of the first node can be obtained from the first node's structural information, attribute information, and context information. For example, the structural information of the first node can be hashed to obtain the structure hash, the attribute information can be hashed to obtain the attribute hash, and the context information can be hashed to obtain the context hash. Then, the attribute hash, structure hash, and context hash of the first node are concatenated to obtain the identifier of the first node.
[0126] The server stores the node identifier of at least one first node, and the node identifier of at least one first node can be obtained from the server.
[0127] S302. In response to data updates, at least one update node is identified in at least one first node, and a change feature identifier for each of the at least one update node is generated; for each update node in the at least one update node, the change feature identifier of the update node is used to indicate the change type and change content of the update node.
[0128] At least one update node is a change node in at least one first node caused by the update of data.
[0129] Optionally, after the data is updated, the data change event can be captured through the Proxy or Reactivity API, and at least one updating node, the change type and change content of each updating node can be determined in at least one node.
[0130] The "Change Type" indicates the specific type of change your node has undergone, clarifying the core operational direction of the node change. The "Change Content" refers to the specific changes made to the node under the corresponding change type, providing a detailed description of the change behavior. For example, the change type could be node addition, node deletion, attribute modification, or content replacement. Taking attribute modification as an example, the change content could be changing the `value` attribute of the `input` tag from '2024' to '2025'.
[0131] The change feature identifier is the update identifier of the update node, used to indicate the content that has changed in the update node.
[0132] Optionally, for any one of the at least one changed node, the change type of the changed node can be hashed to determine the change type hash, and the change content of the changed node can be hashed to obtain the change content hash. Then, the change type hash and the change content hash are concatenated to obtain the change feature identifier of the changed node.
[0133] S303. Determine the update identifier of at least one first node based on the node identifier of at least one first node and the change feature identifier of at least one update node.
[0134] For each of the at least one first node, the update identifier of each first node can be determined in the following way: if the first node is an update node, the node identifier of the first node is updated according to the change feature identifier of the update node corresponding to the first node to obtain the update identifier of the first node; if the first node is not an update node, the node identifier of the first node is determined as the update identifier of the first node.
[0135] For each of the at least one first node, if the first node exists in at least one update node, then the first node is determined to be an update node; if the first node does not exist in at least one update node, then the first node is determined not to be an update node.
[0136] When the first node is an update node, it indicates that the data corresponding to the first node has changed. In this case, the node identifier of the first node can be updated based on the change feature identifier of the update node. Specifically, the part of the identifier corresponding to the change feature identifier is determined in the node identifier of the first node, and then the part of the identifier corresponding to the change feature identifier is replaced with the change feature identifier to obtain the update identifier of the first node.
[0137] For example, assuming the node identifier of the first node is AAA-BBB-CCC, the change feature identifier of the update node corresponding to the first node is DDD, and the partial identifier corresponding to the change feature identifier is CCC, then the update identifier of the first node is determined to be AAA-BBB-DDD.
[0138] This application embodiment efficiently generates the update identifier of the first node through differentiated processing of "updating nodes using change feature identifiers to update node identifiers, and non-updating nodes directly using the original node identifiers". This ensures the accurate carrying of change information of updated nodes and avoids invalid processing of non-updating nodes, thereby improving the efficiency and accuracy of update identifier determination.
[0139] In this embodiment, the node identifier of the first node is first obtained, then the updated node is determined by combining data updates, and a change feature identifier containing the change type and specific content is generated. Finally, a differentiated processing method is adopted for the updated node, using the change feature identifier to update the node identifier, while non-updated nodes directly retain the original node identifier. This efficiently and accurately generates the update identifier for each first node. In this way, the change information of the updated node is fully and accurately carried, while the invalid processing of non-updated nodes is avoided, thus improving the efficiency and accuracy of the update identifier determination.
[0140] Below, for each set of first nodes in at least one set of first nodes, combined with Figure 4 The method for determining the set of updated nodes is explained. Figure 4 This is a schematic diagram illustrating the process of determining the set of update nodes provided in an embodiment of this application. Figure 4 As shown, the process includes:
[0141] S401. Determine the first parent node of the set of first nodes in at least one first node.
[0142] The first parent node is the top-level node of the first node set, that is, the common parent node of all nodes in the first node set, used to represent the hierarchical position and overall state of the entire first node set.
[0143] Optionally, the hierarchy of the first virtual DOM can be traversed, the boundary range of the first node set can be identified, and the first parent node can be determined based on the hierarchy of the first virtual DOM and the boundary range of the first node set.
[0144] S402. Determine the target node set corresponding to the first node set from at least one second node set.
[0145] The second virtual DOM includes at least one set of second nodes, and there is a one-to-one correspondence between the at least one set of second nodes and the at least one set of first nodes. The set of second nodes is a grouping in the second virtual DOM that is formed according to the same division rules as the set of first nodes, and there is a one-to-one correspondence between the set of first nodes and the set of first nodes, that is, one set of first nodes corresponds to one set of second nodes before the update.
[0146] Optionally, based on the hierarchical path of the first node set, a node set with the same hierarchical path as the first node set can be determined in at least one second node set, and then the second node set can be determined as the target node set.
[0147] S403. Determine the second parent node of the target node set in at least one second node.
[0148] The second parent node is the top-level node of the target node set, that is, the common parent node of all nodes in the target node set, used to represent the hierarchical position and overall state of the integrated target node set.
[0149] Optionally, the hierarchy of the second virtual DOM can be traversed, the boundary range of the target node set can be identified, and the second parent node can be determined based on the hierarchy of the second virtual DOM and the boundary range of the target node set.
[0150] S404. Determine whether the first node set is an update node set based on the update identifier of the first parent node and the node identifier of the second parent node.
[0151] Whether the first node set is an update node set can be determined in the following way: determine the degree of difference between the update identifier of the first parent node and the node identifier of the second parent node; if the degree of difference is less than a preset threshold, determine that the first node set is not an update node set; if the degree of difference is greater than or equal to the preset threshold, determine that the first node set is an update node set.
[0152] Optionally, the degree of difference between the update identifier of the first parent node and the node identifier of the second parent node can be determined using an XOR algorithm or a hash difference algorithm. The degree of difference indicates the extent of the difference between the update identifier of the first parent node and the node identifier of the second parent node. A larger degree of difference indicates a greater degree of difference between the update identifier of the first parent node and the node identifier of the second parent node; a smaller degree of difference indicates a smaller degree of difference between the update identifier of the first parent node and the node identifier of the second parent node.
[0153] If the difference is less than a preset threshold, it indicates that the update identifier of the first parent node is the same as the node identifier of the second parent node. In this case, it means that the first node set corresponding to the first parent node is consistent with the target node set corresponding to the second parent node, i.e., the nodes in the first node set have not changed. Therefore, it is determined that this first node set is not the updated node set.
[0154] If the difference is greater than or equal to a preset threshold, it indicates that the update identifier of the first parent node is different from the node identifier of the second parent node. In this case, it means that the first node set corresponding to the first parent node is inconsistent with the target node set corresponding to the second parent node; that is, the nodes in the first node set have changed. Therefore, this first node set is determined to be the updated node set.
[0155] This application embodiment quantifies the difference between the parent node update identifier and the node identifier and combines it with a preset threshold to accurately filter out the set of nodes that need to be updated. This reduces the invalid processing of sets with no substantial changes and ensures that no changed sets are missed, thereby improving the accuracy and efficiency of the determination of the updated node set.
[0156] In this embodiment, instead of traversing and comparing every node in the virtual DOM, a lightweight comparison of parent node identifiers indirectly reflects the overall change status of the corresponding node set. Compared to the Diff comparison method, this reduces the computational load during the comparison process and improves the identification efficiency of updating the node set. Simultaneously, by flexibly controlling the update judgment criteria of the node set through preset thresholds, it ensures that significantly changed node sets are accurately identified and updated, while avoiding unnecessary subtree traversal due to minor changes. This achieves pruning optimization of the virtual DOM comparison while ensuring update accuracy, thereby improving the overall performance and response speed of DOM updates.
[0157] Below, in conjunction with Figure 5 This section explains how to update the DOM and obtain the updated DOM. Figure 5 This is a schematic diagram illustrating the process of determining the updated DOM as provided in an embodiment of this application. Figure 5 As shown, the process includes:
[0158] S501. Determine the update type for each of at least one set of update nodes.
[0159] For each update node set in at least one update node set, the number of update types in the update node set can be one or more, and the update types of the update node set include the update types of each update node in the update node set.
[0160] Optionally, the change feature identifier of each update node in the update node set can be determined, and then the update type of each update node can be determined based on the change feature identifier of each update node.
[0161] S502. Based on the mapping relationship between update type and update priority, and the update type of at least one set of update nodes, determine the priority of each set of update nodes.
[0162] For each update node set in at least one update node set, the priority of the update node set is used to indicate the urgency of the update of the update node set. The higher the priority of the update node set, the higher the urgency of the update of the update node set; the lower the priority of the update node set, the lower the urgency of the update of the update node set.
[0163] For example, suppose the mapping relationship between update type and update priority can be as shown in Table 1:
[0164] Table 1
[0165]
[0166] Assuming that the update types of this set of update nodes include structural updates and attribute updates, the candidate update priority of this more detailed set of nodes is determined to be 1 or 2. Since 2 is greater than 1, the update priority of this set of update nodes is determined to be 2.
[0167] S503. Update the DOM according to the priority of at least one set of update nodes and at least one set of update nodes to obtain the updated DOM.
[0168] The DOM can be updated using the first operation to obtain the updated DOM: For the set of update nodes with priority i, determine the update content and hierarchical path of each first node in the set of update nodes; based on the hierarchical path of each first node in the set of update nodes, determine the set of third nodes corresponding to the set of update nodes in the DOM; based on the update content of each node in the set of update nodes, update the set of third nodes to obtain the updated set of third nodes corresponding to the set of update nodes with priority i; update i to i-1, and repeat the first operation until at least one set of update nodes has been updated; wherein, the updated DOM includes the updated set of third nodes corresponding to at least one set of update nodes, where i is a positive integer, and i is initially the highest priority among the priorities of at least one set of update nodes.
[0169] The third node set is determined by parsing the hierarchical path and calling the native DOM API to identify the actual DOM node that matches the update node set with priority i.
[0170] The updated third-node set is achieved by performing an update operation on the third-node set and retaining references to the latest-state real DOM nodes. The updated DOM is achieved by integrating the updated third-node sets corresponding to all priority update node sets to form a complete and up-to-date real DOM tree.
[0171] Optionally, for each set of update nodes in at least one set of update nodes, if the difference is greater than or equal to a preset threshold, it can also be determined whether the difference is greater than or equal to a preset difference, wherein the preset difference is greater than the preset threshold.
[0172] If the difference is greater than or equal to the preset difference, it indicates a significant difference between the update identifier of the first parent node and the node identifier of the second parent node. In this case, the updated node set and the third node set can be compared by traversing layer by layer and node by node. If the difference is less than the preset difference, it indicates a small difference between the update identifier of the first parent node and the node identifier of the second parent node. In this case, a shallow comparison can be used to compare the updated node set and the third node set.
[0173] This application embodiment, based on priority, combines the updated content of the first node with the hierarchical path to accurately locate and update the corresponding third node set in the DOM. This ensures the orderly execution of tasks with different priorities, achieves the accuracy of DOM updates, avoids redundant operations, and improves update efficiency.
[0174] Optionally, during the DOM update process, for each update node set in at least one update node set, the update node set can also be updated according to the scheduling layer corresponding to the update node set. Specifically, the scheduling layer of the update node set can be determined by a three-layer scheduler based on browser scheduling primitives such as requestIdleCallback, MessageChannel, and postTask. The scheduling layer can be, for example, an immediate layer, an interactive layer, and a background layer. The immediate layer is used to handle updates such as animation frame synchronization and cursor position; for example, updates in the immediate layer need to be completed within 16ms. The interactive layer is used to handle user input-related updates; for example, updates in the interactive layer need to be completed within 50ms. The background layer is used to handle batch updates of non-critical data and can be postponed to idle periods.
[0175] Optionally, to reduce the mutual influence of update tasks between different scheduling layers, when the scheduling layer corresponding to the update node set is the immediate layer, the update tasks of the update node set can be placed in the task queue corresponding to the immediate layer; when the scheduling layer corresponding to the update node set is the interactive layer, the update tasks of the update node set can be placed in the task queue corresponding to the interactive layer; when the scheduling layer corresponding to the update node set is the background layer, the update tasks of the update node set can be placed in the task queue corresponding to the background layer.
[0176] Optionally, for any task queue corresponding to a scheduling layer, tasks of the same source component or the same path node in the task queue can be merged, that is, two sets of update nodes with the same source or the same path can be merged to reduce the number of DOM updates.
[0177] Figure 6 This is a schematic diagram of the DOM updating device provided in an embodiment of this application. Please refer to... Figure 6 The DOM update device 10 may include:
[0178] The determination module 11 is used to determine the update identifier of at least one first node in the first virtual DOM in response to the data update. The first virtual DOM is the virtual DOM after the data update and includes at least one set of first nodes.
[0179] The acquisition module 12 is used to acquire the node identifier of at least one second node in the second virtual DOM, wherein the second virtual DOM is the virtual DOM before the data is updated;
[0180] Processing module 13 is used to determine at least one set of update nodes in at least one set of first nodes based on the update identifier of at least one first node and the node identifier of at least one second node.
[0181] Update module 14 is used to update the DOM based on at least one set of update nodes to obtain the updated DOM.
[0182] In one possible implementation, the determining module 11 is specifically used for:
[0183] Obtain the node identifier of at least one first node;
[0184] In response to data updates, at least one update node is identified in at least one first node, and a change feature identifier for each of the at least one update node is generated; for each update node in the at least one update node, the change feature identifier of the update node is used to indicate the change type and change content of the update node;
[0185] Based on the node identifier of at least one first node and the change feature identifier of at least one update node, determine the update identifier of at least one first node.
[0186] In one possible implementation, the determining module 11 is specifically used for:
[0187] For each of the first nodes in at least one set of first nodes, perform the following operation:
[0188] When the first node is an update node, the node identifier of the first node is updated according to the change feature identifier of the update node corresponding to the first node to obtain the update identifier of the first node.
[0189] If the first node is not the update node, the node identifier of the first node is determined as the update identifier of the first node.
[0190] In one possible implementation, the second virtual DOM includes at least one second node set, and the at least one second node set and at least one first node set are in one-to-one correspondence; the processing module 13 is specifically used for:
[0191] For each set of first nodes in at least one set of first nodes, perform the following operation:
[0192] Determine the first parent node of the set of first nodes in at least one first node;
[0193] Determine the target node set corresponding to the first node set from at least one second node set;
[0194] Determine the second parent node of the target node set in at least one second node;
[0195] Based on the update identifier of the first parent node and the node identifier of the second parent node, determine whether the first node set is an update node set.
[0196] In one possible implementation, the processing module 13 is specifically used for:
[0197] Determine the degree of difference between the update identifier of the first parent node and the node identifier of the second parent node;
[0198] If the difference is less than a preset threshold, the first set of nodes is determined not to be the updated set of nodes.
[0199] If the degree of difference is greater than or equal to a preset threshold, the first set of nodes is determined to be the updated set of nodes.
[0200] In one possible implementation, the update module 14 is specifically used for:
[0201] Determine the update type for each of at least one set of update nodes;
[0202] Based on the mapping relationship between update type and update priority, and the update type of each of the at least one set of update nodes, determine the priority of each of the at least one set of update nodes;
[0203] The DOM is updated based on the priority of at least one set of update nodes and at least one set of update nodes to obtain the updated DOM.
[0204] In one possible implementation, the update module 14 is specifically used for:
[0205] Perform the first operation, which includes: for the set of update nodes with priority i, determine the update content and hierarchical path of each first node in the set of update nodes; determine the set of third nodes corresponding to the set of update nodes in the DOM according to the hierarchical path of each first node in the set of update nodes; update the set of third nodes according to the update content of each node in the set of update nodes, and obtain the updated set of third nodes corresponding to the set of update nodes with priority i.
[0206] Update i to i-1, repeat the first operation until at least one set of updated nodes has been updated; where the updated DOM includes at least one set of updated third nodes corresponding to each set of updated nodes, i is a positive integer, and i is initially the highest priority among the priorities of each set of updated nodes.
[0207] The DOM updating device provided in this application embodiment can execute the technical solution shown in the above method embodiment. Its implementation principle and beneficial effects are similar, and will not be repeated here.
[0208] Figure 7 This is a schematic diagram of the structure of the DOM update device provided in an embodiment of this application. Please refer to... Figure 7The DOM update device 20 may include a memory 21 and a processor 22. Exemplarily, the memory 21 and the processor 22 are interconnected via a bus 23.
[0209] Memory 21 is used to store program instructions;
[0210] The processor 22 is used to execute the program instructions stored in the memory, so that the data processing device 20 performs the method shown in the above method embodiment.
[0211] The data processing device provided in this application embodiment can execute the technical solution shown in the above method embodiment. Its implementation principle and beneficial effects are similar, and will not be described again here.
[0212] This application provides a computer-readable storage medium storing computer-executable instructions, which are used to implement the above-described method when executed by a processor.
[0213] This application embodiment may also provide a computer program product, including a computer program that, when executed by a processor, can implement the above-described method.
[0214] All or part of the steps in the above-described method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a readable memory. When the program is executed, it performs the steps of the above-described method embodiments; and the aforementioned memory (storage medium) includes: read-only memory (ROM), random access memory (RAM), flash memory, hard disk, solid-state drive, magnetic tape, floppy disk, optical disc, and any combination thereof.
[0215] This application describes embodiments with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processing unit of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processing unit of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.
[0216] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.
[0217] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.
[0218] Obviously, those skilled in the art can make various modifications and variations to the embodiments of this application without departing from the spirit and scope of this application. Therefore, if these modifications and variations to the embodiments of this application fall within the scope of the claims of this application and their equivalents, this application also intends to include these modifications and variations.
[0219] In this application, the term "comprising" and its variations can refer to non-limiting inclusion; the term "or" and its variations can refer to "and / or". The terms "first", "second", etc., in this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. In this application, "multiple" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.
Claims
1. A method for updating the Document Object Model (DOM), characterized in that, include: In response to data updates, an update identifier is determined for each of at least one first node in a first virtual DOM, wherein the first virtual DOM is the virtual DOM after the data update, and the first virtual DOM includes at least one set of first nodes; Obtain the node identifier of at least one second node in the second virtual DOM, wherein the second virtual DOM is the virtual DOM before the data is updated; Based on the update identifier of each of the at least one first node and the node identifier of each of the at least one second node, at least one set of update nodes is determined from the at least one set of first nodes; The DOM is updated based on the at least one set of update nodes to obtain the updated DOM.
2. The method according to claim 1, characterized in that, In response to data updates, determine the update identifier of at least one first node in the first virtual DOM, including: Obtain the node identifier of each of the at least one first node; In response to the update of the data, at least one update node is determined among the at least one first node, and a change feature identifier is generated for each of the at least one update node; for each update node among the at least one update node, the change feature identifier of the update node is used to indicate the change type and change content of the update node; The update identifier of each of the at least one first node is determined based on the node identifier of each of the at least one first node and the change feature identifier of each of the at least one update node.
3. The method according to claim 2, characterized in that, Determining the update identifier of each of the at least one first node based on its respective node identifier and the change feature identifier of each of the at least one updating node includes: For each of the at least one first node, the following operations are performed: When the first node is an update node, the node identifier of the first node is updated according to the change feature identifier of the update node corresponding to the first node to obtain the update identifier of the first node. If the first node is not an update node, the node identifier of the first node is determined as the update identifier of the first node.
4. The method according to any one of claims 1-3, characterized in that, The second virtual DOM includes at least one set of second nodes, and the at least one set of second nodes corresponds one-to-one with the at least one set of first nodes; determining at least one set of updated nodes from the at least one set of first nodes based on the update identifiers of the at least one set of first nodes and the node identifiers of the at least one set of second nodes includes: For each set of first nodes in the at least one set of first nodes, perform the following operations: Determine the first parent node of the first node set in the at least one first node; Determine the target node set corresponding to the first node set from the at least one second node set; Determine the second parent node of the target node set in the at least one second node; Based on the update identifier of the first parent node and the node identifier of the second parent node, determine whether the first node set is the update node set.
5. The method according to claim 4, characterized in that, Determining whether the first node set is the updated node set based on the update identifier of the first parent node and the node identifier of the second parent node includes: Determine the degree of difference between the update identifier of the first parent node and the node identifier of the second parent node; If the degree of difference is less than a preset threshold, it is determined that the first set of nodes is not the updated set of nodes; If the degree of difference is greater than or equal to the preset threshold, the first set of nodes is determined to be the set of updated nodes.
6. The method according to any one of claims 1-3, characterized in that, The DOM is updated based on the at least one set of update nodes to obtain the updated DOM, including: Determine the update type for each of the at least one set of update nodes; The priority of each of the at least one set of update nodes is determined based on the mapping relationship between update type and update priority, and the update type of each of the at least one set of update nodes. The DOM is updated according to the priority of each of the at least one set of update nodes and the at least one set of update nodes to obtain the updated DOM.
7. The method according to claim 6, characterized in that, The DOM is updated according to the priority of each of the at least one set of update nodes and the at least one set of update nodes to obtain the updated DOM, including: Perform a first operation, which includes: for an update node set with priority i, determining the update content and hierarchical path of each first node in the update node set; determining a third node set corresponding to the update node set in the DOM based on the hierarchical path of each first node in the update node set; updating the third node set based on the update content of each node in the update node set to obtain the updated third node set corresponding to the update node set with priority i. Update i to i-1, and repeat the first operation until the at least one set of updated nodes completes the update; wherein, the updated DOM includes the updated third node set corresponding to each of the at least one set of updated nodes, i is a positive integer, and i is initially the highest priority among the priorities of the at least one set of updated nodes.
8. A DOM updating device, characterized in that, include: A determination module is configured to, in response to data updates, determine the update identifier of at least one first node in a first virtual DOM, wherein the first virtual DOM is the virtual DOM after the data update, and the first virtual DOM includes at least one set of first nodes; The acquisition module is used to acquire the node identifier of at least one second node in the second virtual DOM, wherein the second virtual DOM is the virtual DOM before the data is updated; The processing module is configured to determine at least one set of update nodes from the set of at least one first node based on the update identifier of each of the at least one first node and the node identifier of each of the at least one second node; An update module is used to update the DOM based on the at least one set of update nodes to obtain an updated DOM.
9. A DOM update device, characterized in that, include: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1 to 7.
10. A non-transitory computer-readable storage medium storing computer instructions, characterized in that, in, The computer instructions are used to cause the computer to perform the method according to any one of claims 1 to 7.