DOM (Document Object Model) structure comparison method and device for DOM reconstruction, equipment and medium

Abstract

The invention provides a DOM (Document Object Model) structure comparison method and device for DOM reconstruction, equipment and a medium, and the method comprises the following steps: when a remote browser opens a set website, injecting a JavaScript code; the JavaScript code obtains first HTML (Hypertext Markup Language) content of the current page; when the user operates the page, the operation is synchronized to the remote browser, and second HTML content of the current page of the remote browser is obtained at the same time; analyzing the first HTML content to obtain a first DOM structure, analyzing the second HTML content to obtain a second DOM structure, comparing the first DOM structure with the second DOM structure to obtain a comparison result, and then caching the second HTML content; the comparison result is sent to the client, and the client directly performs incremental updating of the current page according to the comparison result; and the method is suitable for scenes requiring accurate DOM updating.

Description

[0001] This invention relates to the field of remote browser update technology, and in particular to a method, apparatus, device, and medium for DOM reconstruction and DOM structure comparison. Background Technology

[0002] In remote browser development, DOM structure comparison is a common requirement, especially when implementing dynamic updates and optimizing performance. However, DOM structure comparison presents several challenges, rendering traditional text comparison tools (such as git diff) unsuitable for DOM structure comparison. The following issues arise during the comparison process: 1. The DOM structure is complex and lacks unique identifiers: DOM structures are typically complex and lack unique identifiers (such as id or data-* attributes). This makes it difficult to accurately locate corresponding nodes when comparing two DOM structures, resulting in numerous and inaccurate comparison results. For example, two DOM structures may differ on some nodes, but these differences may be insignificant or only localized.

[0003] 2. Deleted nodes leading to accidental deletion: During the comparison process, if a node is deleted, traditional comparison methods may mistakenly delete other important nodes. This is because traditional comparison methods are usually based on differences in lines of text, rather than on the structure of DOM nodes. For example, deleting a parent node might lead to the mistaken deletion of all its child nodes, which is unacceptable in practical applications.

[0004] 3. Limitations of plain text comparison: Traditional text comparison tools (such as git diff) compare text based on line-by-line differences. This method works for plain text files but not for DOM structures. The DOM structure is tree-like and requires comparison by "node," not by "line." Plain text comparison can cause changes to the root node, preventing remote browsers from performing incremental updates. If the entire dataset arrives, the increased bandwidth can cause page flickering, making it impossible for users to interact with the page. For example, if the page refreshes while the user is interacting with the data, previous actions may be cleared.

[0005] This means that when using a remote browser, the client and server can only perform a full update. As a result, when the user is using the browser, the client page refreshes due to the server's data update, interrupting the user's operation and requiring the user to start over. Summary of the Invention

[0006] The technical problem to be solved by the present invention is to provide a DOM structure comparison method, apparatus, device and medium for DOM reconstruction, which takes into account both static structure comparison and dynamic scene adaptation, ensuring the accuracy of difference identification and optimizing the performance of client application patches, and is particularly suitable for scenarios that require precise DOM updates.

[0007] In a first aspect, the present invention provides a method for comparing DOM structures in DOM reconstruction, comprising the following steps: Step S1: When the designated website is opened in a remote browser, inject a piece of JavaScript code for injecting unique identifiers of DOM nodes and listening for DOM changes; Step S2: JavaScript code retrieves the first HTML content of the current page and caches it. Step S3: When the user interacts with the page, the interaction is synchronized to the remote browser, and the second HTML content of the current page of the remote browser is obtained at the same time. Step S4: Parse the first HTML content to obtain the first DOM structure, parse the second HTML content to obtain the second DOM structure, compare the first DOM structure and the second DOM structure to obtain the comparison result, and then cache the second HTML content; Step S5: Send the comparison results to the client, and the client will directly perform incremental updates to the current page based on the comparison results.

[0008] Secondly, the present invention provides a DOM structure comparison device for DOM reconstruction, comprising: The code injection module injects a piece of JavaScript code when the designated website is opened in a remote browser. This code is used for injecting unique identifiers of DOM nodes and listening for DOM changes. Get the current content module: JavaScript code retrieves the first HTML content of the current page and caches it. The module for obtaining changed content synchronizes the user's interaction with the page to a remote browser and simultaneously retrieves the second HTML content of the current page in the remote browser. The DOM comparison module parses the first HTML content to obtain the first DOM structure, parses the second HTML content to obtain the second DOM structure, compares the first DOM structure with the second DOM structure to obtain the comparison result, and then caches the second HTML content; The update module sends the comparison results to the client, which then performs an incremental update of the current page based on the comparison results.

[0009] Thirdly, the present invention 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 program to implement the method described in the first aspect.

[0010] Fourthly, the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in the first aspect.

[0011] One or more technical solutions provided by this invention have at least the following technical effects or advantages: 1. Resolve the issue of missing node identifiers. By automatically injecting a unique carry_id into all DOM nodes (including nodes within the Shadow DOM), a stable identity is provided for each node. This avoids misjudgments caused by similar node structures but different positions, making the comparison results more accurate and reducing redundant differences and the risk of accidental deletion.

[0012] 2. Supports dynamic DOM scenarios By using MutationObserver to listen for DOM changes, carry_id is added to dynamically added nodes in real time to ensure that dynamically generated content can also be included in the comparison system, thus adapting to the dynamic rendering features of modern front-end frameworks (such as React and Vue).

[0013] 3. Structured comparison is more reliable than plain text comparison. By performing structured comparisons at the "node" level, rather than comparing text lines like git diff, it can accurately identify operations such as adding, deleting, changing attributes, and modifying text in nodes. This avoids root node changes and full re-rendering issues caused by pure text comparisons, fundamentally solving the problem of page flickering.

[0014] 4. Description of fine-grained differences The DiffType class defines various difference types (addition, deletion, replacement, attribute change, text change) to make the difference results more granular. For example, when only the text content changes, there is no need to replace the entire node; only the text needs to be updated, reducing unnecessary DOM operations.

[0015] 5. Compatible with Shadow DOM It specifically performs recursive processing on nodes within the Shadow DOM, supports DOM comparison within enclosed components, and is compatible with modern component-based development models.

[0016] 6. Efficiently generate executable patches The output has a clear structure, including the operation type, target node path, and data. The client can directly apply patches based on this information without re-rendering the entire page, thus improving update efficiency.

[0017] In summary, this solution balances static structure comparison and dynamic scene adaptation, ensuring the accuracy of difference identification while optimizing the performance of client application patches. It is particularly suitable for scenarios that require precise DOM updates (such as collaborative editing and real-time UI synchronization).

[0018] The above description is merely an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention and to implement it in accordance with the contents of the specification, and in order to make the above and other objects, features and advantages of the present invention more apparent and understandable, specific embodiments of the present invention are described below. Attached Figure Description

[0019] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0020] Figure 1 This is a flowchart of the method in Embodiment 1 of the present invention; Figure 2 This is a schematic diagram of the device in Embodiment 2 of the present invention. Detailed Implementation

[0021] The overall concept of the technical solution in this application is as follows: Step S1: Inject a piece of JavaScript to generate custom attributes, and simultaneously listen for dynamically added nodes to add custom attributes. Step S2: Obtain the entire DOM and then compare. The specific implementation is as follows: 1. Inject a piece of JavaScript to generate custom attributes, and simultaneously listen for dynamically added nodes to add custom attributes. / / Define a method to recursively add carry_id to all elements (including elements within the shadow DOM). function addCarryIdRecursively(root) { / / Process all elements under the current root node root.querySelectorAll('*').forEach(element => { if (element.nodeType === Node.ELEMENT_NODE && !element.getAttribute('carry_id')) { element.setAttribute('carry_id',createCarryId(element?.tagName)) } / / If the element has a shadow DOM, recursively process the elements within the shadow DOM. if (element.shadowRoot) { addCarryIdRecursively(element.shadowRoot) } }) } / / Define a method to handle new nodes and add carry_id function processAddedNodes(addedNodes) { addedNodes.forEach(node ​​=> { if (node.nodeType === Node.ELEMENT_NODE) ​​{ / / Add carry_id to the newly added element if (!node.getAttribute('carry_id')) { node.setAttribute('carry_id', createCarryId(node?.tagName)) } / / Recursively process all child elements of the newly added element (including elements within the shadow DOM). addCarryIdRecursively(node) } }) } / / Use MutationObserser to listen for changes in the DOM structure, only listening for changes in child nodes, for handling dynamically added nodes. const mainObserver = new MutationObserver(mutations => { mutations.forEach(mutation => { / / Only process newly added nodes if (mutation.type === 'childList' && mutation.addedNodes.length> 0) { processAddedNodes(mutation.addedNodes) } }) }) / / Start listening for changes in the main document if (document) { mainObserver.observe(document, { childList: true, subtree: true }) console.log('[Main Observer] Started listening for changes in the main document') } 2. Perform a structured comparison of the DOM. # Define the difference type class DiffType(Enum): """Differential Operation Types""" ADD = "diff_add" # Add a new node REMOVE = "diff_remove" # Delete node REPLACE = "diff_replace" # Replace node ATTRIBUTE_CHANGE = "diff_attribute_change" # Node attribute change TEXT_CHANGE = "diff_text_change" # Changes to node text content # Define the difference structure @dataclass class DiffOperation: type: DiffType #Difference type path: str # Element path, value is the attribute value defined in our slice. is_shadowdom: bool = False # Whether it is a shadow dom data: Optional[Dict[str, Any]] = None # Manipulate data # Define the comparison method def compute_diff(self, old_html: str, new_html: str) -> List[DiffOperation]: """ Calculate the difference between two HTML documents - based on carry_id Args: old_html: Old HTML content new_html: New HTML content Returns: Difference Operation List """ operations = [] old_soup = BeautifulSoup(old_html, 'html.parser') new_soup = BeautifulSoup(new_html, 'html.parser') # Establish carry_id mapping old_carry_id_map = self._build_carry_id_map(old_soup) new_carry_id_map = self._build_carry_id_map(new_soup) # Get all top-level elements (excluding script tags and comments) old_root_elements = self._get_root_elements(old_soup) new_root_elements = self._get_root_elements(new_soup) old_html_element = old_root_elements[0] new_html_element = new_root_elements[0] html_path = self._generate_carry_id_path(new_html_element) self._diff_elements_by_carry_id( old_html_element, new_html_element, html_path, operations, old_carry_id_map, new_carry_id_map ) # A detailed comparison of the differences between the two nodes and their child nodes def _diff_elements_by_carry_id(self, old_element: Tag, new_element:Tag, path: str, operations: List[DiffOperation], old_carry_id_map: Dict[str, Tag], new_carry_id_map: Dict[str, Tag]): """ Based on carry_id, recursively compare the differences between two elements. """ # 1. Compare tag names if old_element.name != new_element.name: operations.append(DiffOperation( type=DiffType.REMOVE, path=old_element.get('carry_id'), )) operations.append(DiffOperation( type=DiffType.ADD, path=path, data={'html': str(new_element)} )) return # 2. Comparison of attributes self._diff_attributes(old_element, new_element, path, operations) # 3. Comparing direct text content (excluding the text of child elements), document comparison requires special handling. old_direct_text = self._get_direct_text(old_element) new_direct_text = self._get_direct_text(new_element) if old_direct_text != new_direct_text: # A special note here is needed: if non-plain text nodes are included, the order must be carefully considered. if self._has_non_text_node(old_element) or self._has_non_text_node(new_element): operations.append(DiffOperation( type=DiffType.REPLACE, path=path, data={'html': str(new_element)} )) else: # When the direct text content changes, a TEXT_CHANGE operation is generated. operations.append(DiffOperation( type=DiffType.TEXT_CHANGE, path=path, data={'text': new_direct_text} )) return # 4. Comparing child elements - based on carry_id old_children = self._get_element_children(old_element) new_children = self._get_element_children(new_element) # This involves recursively comparing all child nodes. self._diff_children_by_carry_id( old_children, new_children, path, operations, old_carry_id_map, new_carry_id_map ) The format of the result generated by the dom diff of this invention is as follows: [ { "type": "diff_attribute_change", / / Difference type "path": "DIV_9qwzm7gyakk", / / Path to the differing node "is_shadowdom": false, / / Whether it is a shadow dom "data": { / / Specific difference data "changed": { / / Property value changed "class": [ "input__container", "focused" ] }, "removed": [] / / Attributes removed } } ]; Specific examples of differences: [ { "type": "diff_add", "path": "KAT-OPTION_y1vjvhk0do", "is_shadowdom": true, "data": { "html": "<!-- --> <!-- --> ", "css": [ "*, :host { box-sizing: border-box;}" ] } }, { "type": "diff_attribute_change", "path": "DIV_9qwzm7gyakk", "is_shadowdom": false, "data": { "changed": { "class": [ "input__container", "focused" ] }, "removed": [] } }, { "type": "diff_replace", "path": "CASINO-ICON_18ubgj85p6p", "is_shadowdom": false, "data": { "html": " <kat-icon aria-label="\"chevron-up\"" carry_id="\"KAT-ICON_ujjdn4f5wm\"" class="\"\"" name="\"chevron-up\"" size="\"small\"">< / kat-icon> " } }, { "type": "diff_remove", "path": "CASINO-ICON_3usfgst126p", } ] As shown above, the generation results of this invention are very intuitive. Example

[0022] like Figure 1 As shown, this embodiment provides a DOM structure comparison method for DOM reconstruction, including the following steps: Step S1: When the designated website is opened in a remote browser, inject a piece of JavaScript code for injecting unique identifiers of DOM nodes and listening for DOM changes; Step S2: JavaScript code retrieves the first HTML content of the current page and caches it. Step S3: When the user interacts with the page, the interaction is synchronized to the remote browser, and the second HTML content of the current page of the remote browser is obtained at the same time. Step S4: Parse the first HTML content to obtain the first DOM structure, parse the second HTML content to obtain the second DOM structure, compare the first DOM structure and the second DOM structure to obtain the comparison result, and then cache the second HTML content; Step S5: Send the comparison results to the client, and the client will directly perform incremental updates to the current page based on the comparison results.

[0023] In this embodiment, preferably, step S1 specifically involves: when a designated website is opened in a remote browser, injecting a piece of JavaScript code to generate a custom attribute carry_id for all DOM nodes. This custom attribute carry_id serves as a unique identifier for the DOM node, and the path of the DOM element is determined based on the custom attribute carry_id; and monitoring for new DOM nodes across the entire page and generating custom attributes for the new DOM nodes.

[0024] In this embodiment, preferably, step S4 specifically involves: parsing the first HTML content to obtain a first DOM structure, parsing the second HTML content to obtain a second DOM structure, comparing the first DOM structure and the second DOM structure to obtain a comparison result, and then caching the second HTML content. The first DOM structure and the second DOM structure are compared based on the custom attribute carry_id to generate a structured comparison result; Difference type definitions include: addition type, deletion type, replacement type, attribute change type, and text change type; The difference structure includes: difference type, element path, whether it is a Shadow DOM node, and the data to be manipulated; The first and second DOM structures construct a mapping relationship between new and old nodes based on the custom attribute carry_id; recursively comparing elements starting from the root element generates a list of differences. The recursive comparison logic is as follows: First, compare the node tag names; if they are different, generate a replacement operation and the corresponding replacement type. Then, compare the node attributes; if they are different, generate the attribute change type. Next, compare the node text content; if they are different, generate the text change type. Each node needs to undergo the above comparison. The final comparison result is obtained, and the data in the comparison result is stored in the difference structure format.

[0025] Based on the same inventive concept, this application also provides an apparatus corresponding to the method in Embodiment 1, as detailed in Embodiment 2. Example

[0026] like Figure 2 As shown, this embodiment provides a DOM structure comparison device for DOM reconstruction, including: The code injection module injects a piece of JavaScript code when the designated website is opened in a remote browser. This code is used for injecting unique identifiers of DOM nodes and listening for DOM changes. Get the current content module: JavaScript code retrieves the first HTML content of the current page and caches it. The module for obtaining changed content synchronizes the user's interaction with the page to a remote browser and simultaneously retrieves the second HTML content of the current page in the remote browser. The DOM comparison module parses the first HTML content to obtain the first DOM structure, parses the second HTML content to obtain the second DOM structure, compares the first DOM structure with the second DOM structure to obtain the comparison result, and then caches the second HTML content; The update module sends the comparison results to the client, which then performs an incremental update of the current page based on the comparison results.

[0027] In this embodiment, preferably, the injected code module specifically performs the following: when a designated website is opened in a remote browser, a piece of JavaScript code is injected to generate a custom attribute carry_id for all DOM nodes. This custom attribute carry_id serves as a unique identifier for the DOM node, and the path of the DOM element is determined based on the custom attribute carry_id; and the module listens for new DOM nodes on the entire page and generates custom attributes for the new DOM nodes.

[0028] In this embodiment, preferably, the DOM comparison module specifically performs the following steps: parsing the first HTML content to obtain a first DOM structure, parsing the second HTML content to obtain a second DOM structure, comparing the first DOM structure and the second DOM structure to obtain a comparison result, and then caching the second HTML content. The first DOM structure and the second DOM structure are compared based on the custom attribute carry_id to generate a structured comparison result; Difference type definitions include: addition type, deletion type, replacement type, attribute change type, and text change type; The difference structure includes: difference type, element path, whether it is a Shadow DOM node, and the data to be manipulated; The first and second DOM structures construct a mapping relationship between new and old nodes based on the custom attribute carry_id; recursively comparing elements starting from the root element generates a list of differences. The recursive comparison logic is as follows: First, compare the node tag names; if they are different, generate a replacement operation and the corresponding replacement type. Then, compare the node attributes; if they are different, generate the attribute change type. Next, compare the node text content; if they are different, generate the text change type. Each node needs to undergo the above comparison. The final comparison result is obtained, and the data in the comparison result is stored in the difference structure format.

[0029] Since the apparatus described in Embodiment 2 of the present invention is an apparatus used to implement the method of Embodiment 1 of the present invention, those skilled in the art can understand the specific structure and variations of the apparatus based on the method described in Embodiment 1 of the present invention, and therefore will not be described again here. All apparatuses used in the method of Embodiment 1 of the present invention fall within the scope of protection of the present invention.

[0030] Based on the same inventive concept, this application provides an electronic device embodiment corresponding to Embodiment 1, as detailed in Embodiment 3. Example

[0031] This embodiment provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it can implement any of the implementation methods in Embodiment 1.

[0032] Since the electronic device described in this embodiment is the device used to implement the method in Embodiment 1 of this application, those skilled in the art can understand the specific implementation method and various variations of the electronic device in this embodiment based on the method described in Embodiment 1 of this application. Therefore, how the electronic device implements the method in the embodiment of this application will not be described in detail here. Any device used by those skilled in the art to implement the method in the embodiment of this application falls within the scope of protection of this application.

[0033] Based on the same inventive concept, this application provides a storage medium corresponding to Embodiment 1, as detailed in Embodiment 4. Example

[0034] This embodiment provides a computer-readable storage medium storing a computer program thereon. When the computer program is executed by a processor, it can implement any of the implementation methods in Embodiment 1.

[0035] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0036] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will 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 processor 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 processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0037] 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.

[0038] 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.

[0039] While specific embodiments of the present invention have been described above, those skilled in the art should understand that the specific embodiments described are merely illustrative and not intended to limit the scope of the invention. Equivalent modifications and variations made by those skilled in the art in accordance with the spirit of the invention should be covered within the scope of protection of the claims of the present invention.

Claims

1. A method for DOM structure comparison in DOM reconstruction, characterized in that: Includes the following steps: Step S1: When the designated website is opened in a remote browser, inject a piece of JavaScript code for injecting unique identifiers of DOM nodes and listening for DOM changes; Step S2: JavaScript code retrieves the first HTML content of the current page and caches it. Step S3: When the user interacts with the page, the interaction is synchronized to the remote browser, and the second HTML content of the current page of the remote browser is obtained at the same time. Step S4: Parse the first HTML content to obtain the first DOM structure, parse the second HTML content to obtain the second DOM structure, compare the first DOM structure and the second DOM structure to obtain the comparison result, and then cache the second HTML content; Step S5: Send the comparison results to the client, and the client will directly perform incremental updates to the current page based on the comparison results.

2. The DOM structure comparison method for DOM reconstruction according to claim 1, characterized in that: Step S1 specifically involves: when the designated website is opened in a remote browser, injecting a piece of JavaScript code to generate a custom attribute carry_id for all DOM nodes. This custom attribute carry_id serves as a unique identifier for the DOM node, and the path of the DOM element is determined based on the custom attribute carry_id; and listening for new DOM nodes on the entire page and generating custom attributes for the new DOM nodes.

3. The DOM structure comparison method for DOM reconstruction according to claim 1, characterized in that: Step S4 specifically involves: parsing the first HTML content to obtain a first DOM structure, parsing the second HTML content to obtain a second DOM structure, comparing the first DOM structure and the second DOM structure to obtain a comparison result, and then caching the second HTML content. The first DOM structure and the second DOM structure are compared based on the custom attribute carry_id to generate a structured comparison result; Difference type definitions include: addition type, deletion type, replacement type, attribute change type, and text change type; The difference structure includes: difference type, element path, whether it is a Shadow DOM node, and the data to be manipulated; The first and second DOM structures construct a mapping relationship between new and old nodes based on the custom attribute carry_id; the comparison is recursively performed starting from the root element to generate a list of differences. The recursive comparison logic is as follows: First, compare the node tag names; if they are different, generate a replacement operation and the corresponding replacement type. Then, compare the node attributes; if they are different, generate the attribute change type. Next, compare the node text content; if they are different, generate the text change type. Each node needs to undergo the above comparison. The final comparison result is obtained, and the data in the comparison result is stored in the difference structure format.

4. A DOM structure comparison device for DOM reconstruction, characterized in that: include: The code injection module injects a piece of JavaScript code when the designated website is opened in a remote browser. This code is used for injecting unique identifiers of DOM nodes and listening for DOM changes. Get the current content module: JavaScript code retrieves the first HTML content of the current page and caches it. The module for obtaining changed content synchronizes the user's interaction with the page to a remote browser and simultaneously retrieves the second HTML content of the current page in the remote browser. The DOM comparison module parses the first HTML content to obtain the first DOM structure, parses the second HTML content to obtain the second DOM structure, compares the first DOM structure with the second DOM structure to obtain the comparison result, and then caches the second HTML content; The update module sends the comparison results to the client, which then performs an incremental update of the current page based on the comparison results.

5. The DOM structure comparison device for DOM reconstruction according to claim 4, characterized in that: The injected code module specifically works as follows: when a designated website is opened in a remote browser, a piece of JavaScript code is injected to generate a custom attribute carry_id for all DOM nodes. This custom attribute carry_id serves as a unique identifier for the DOM node, and the path of the DOM element is determined based on the custom attribute carry_id. It also listens for new DOM nodes on the entire page and generates custom attributes for the new DOM nodes.

6. The DOM structure comparison device for DOM reconstruction according to claim 4, characterized in that: The DOM comparison module specifically involves: parsing the first HTML content to obtain a first DOM structure, parsing the second HTML content to obtain a second DOM structure, comparing the first DOM structure with the second DOM structure to obtain a comparison result, and then caching the second HTML content. The first DOM structure and the second DOM structure are compared based on the custom attribute carry_id to generate a structured comparison result; Difference type definitions include: addition type, deletion type, replacement type, attribute change type, and text change type; The difference structure includes: difference type, element path, whether it is a Shadow DOM node, and the data to be manipulated; The first and second DOM structures construct a mapping relationship between new and old nodes based on the custom attribute carry_id; the comparison is recursively performed starting from the root element to generate a list of differences. The recursive comparison logic is as follows: First, compare the node tag names; if they are different, generate a replacement operation and the corresponding replacement type. Then, compare the node attributes; if they are different, generate the attribute change type. Next, compare the node text content; if they are different, generate the text change type. Each node needs to undergo the above comparison. The final comparison result is obtained, and the data in the comparison result is stored in the difference structure format.

7. 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 program, it implements the method as described in any one of claims 1 to 3.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1 to 3.

Images