High-performance rendering interaction method and system for super-large-scale attribute data

Abstract

The invention belongs to the technical field of computer software, and particularly relates to a high-performance rendering interaction method and system for super-large-scale attribute data. The method comprises the following steps: firstly, converting nested tree data into a flat structure and establishing a node expansion state mapping table; through a dynamic node injection engine, according to a current development state and a virtual rolling window position, calculating and only rendering nodes in a user visual range in real time; node reuse is realized by using a DOM recovery pool, so that memory occupation is greatly reduced; and according to the unfolding / folding operation of the user, asynchronously loading the sub-tree data as required and dynamically updating the rendering view. The system comprises a data flattening and state management module, a dynamic node introduction engine, a node rendering and recovery pool module, a virtual rolling and positioning service module and an asynchronous data loader. According to the method, the problems of browser memory overflow, operation lagging and scrolling white screen during rendering of a node tree structure of more than ten thousand levels are thoroughly solved, and smooth interaction and immediate response of massive tree data are realized.

Description

Technical Field

[0001] This invention belongs to the field of computer software technology, specifically relating to a high-performance rendering and interaction method and system for ultra-large-scale attribute data, particularly a method and system for efficiently rendering and interacting with massive node tree structures in a browser, specifically applicable to web applications that need to process tens of thousands or more of node tree data, such as large enterprise organizational charts, cloud storage file system browsers, and ultra-large-scale product category catalogs. Background Technology

[0002] Tree Views are a core component in web applications for displaying hierarchical data. However, when dealing with extremely large amounts of data (more than 10,000 nodes), existing technologies face insurmountable performance bottlenecks.

[0003] 1. The disaster of recursive rendering: Traditional methods use recursion to render the entire tree, resulting in a linear correlation between the number of DOM elements and the number of nodes. Rendering more than 10,000 DOM elements will exhaust browser memory, causing the page to freeze or crash, resulting in a very poor user experience;

[0004] 2. Interaction response delay: Expanding or collapsing a parent node will trigger DOM operations (show / hide) on a large number of its child nodes, causing browser reflow and repaint processes and their time consumption. The operation feedback delay can be several seconds or even longer.

[0005] 3. Disjointed scrolling experience: For large tree structures, even when some nodes are collapsed, the overall height remains enormous. Native scrolling cannot handle this, resulting in inaccurate scrollbar control and severe white screens during scrolling.

[0006] 4. Poor search and traversal performance: When performing node searches or global traversals on the front end, operating on a huge tree-shaped JavaScript object is extremely slow.

[0007] While existing technologies such as simple lazy loading (asynchronous subtree loading) can only alleviate the initial loading pressure, they cannot solve the performance problems caused by the excessive number of nodes after a large number of sibling nodes are expanded. Therefore, there is an urgent need in this field for a technical solution that fundamentally solves the performance problems of rendering and interacting with massive node tree structures, so as to systematically solve the above-mentioned problems. Summary of the Invention

[0008] (a) Technical problems to be solved

[0009] The technical problem this invention aims to solve is to overcome the shortcomings of existing tree control technology and provide a high-performance rendering and interaction method and system for ultra-large-scale attribute data. This method aims to achieve the following objectives:

[0010] 1. Constant memory usage: Decouples the number of DOM elements in the browser from the total amount of data, and only relates to the number of nodes in the current visible area, thus completely avoiding memory overflow;

[0011] 2. Real-time interactive feedback: Any unfolding, collapsing, or scrolling operation receives a millisecond-level response, with no lag whatsoever;

[0012] 3. Smooth scrolling experience: Enables smooth scrolling of ultra-large trees, with precise scroll bar control and no white screen phenomenon;

[0013] 4. Supports data exceeding 10,000: Through an asynchronous loading mechanism, it supports loading subtree data from the server on demand.

[0014] (II) Technical Solution

[0015] To address the aforementioned technical problems, this invention provides a high-performance rendering interaction method for ultra-large-scale attribute data, the method comprising the following steps:

[0016] Step S101: Receive the original nested tree data and convert it into a flat list of nodes containing parent node identifiers and depth information;

[0017] Step S102: Establish and maintain a node expansion state mapping table to independently manage the expansion and collapse states of each non-leaf node;

[0018] Step S103: The dynamic node injection engine calculates the set of nodes that need to be rendered based on the node expansion state mapping table and the window position provided by the virtual scroll controller.

[0019] Step S104: The node renderer uses elements from the DOM recycling pool to render and update the node collection;

[0020] Step S105: In response to the user's expand or collapse operation, update the node expand state mapping table and trigger the dynamic node injection engine to recalculate and render, dynamically injecting or removing the DOM structure of the corresponding child node;

[0021] Step S106: The virtual scroll controller calculates the starting node of the current window based on the scrolling event through the node positioning service, and repeatedly triggers steps S103 to S104 to achieve smooth scrolling;

[0022] Specifically, the DOM recycling pool in step S104 recycles and stores the DOM elements corresponding to nodes that are removed from the viewport due to scrolling or collapsing operations. When a new node needs to be rendered, the pool is used to retrieve the same type of node for content and style updates, thereby achieving efficient reuse of DOM elements and avoiding frequent creation and destruction.

[0023] In step S106, the node positioning service pre-calculates the cumulative height and absolute position of all expanded nodes in the fully expanded tree species based on the node expansion status mapping table and the fixed height of each node, and establishes an index to enable virtual scrolling to quickly locate the starting node corresponding to any scrolling position.

[0024] Specifically, step S105, which involves responding to user operations, includes: when a user requests to expand a node, if the data of its child nodes does not exist locally, an asynchronous data loader is triggered to request the child data of the node from the server. The returned data is dynamically added to the flat node list, thereby realizing asynchronous on-demand loading and infinite expansion of the tree.

[0025] Furthermore, this invention also provides a high-performance rendering interaction method for ultra-large-scale attribute data. The core of the method lies in constructing a system that separates data state from the rendering view, and achieving on-demand rendering of the tree through dynamic node injection and virtual scrolling technology. The method includes the following steps:

[0026] Step 1. Data flattening and state initialization;

[0027] The input nested tree data is recursively expanded and transformed into a flat array of nodes; each node contains metadata such as unique ID, parent node ID, depth, and whether it is a leaf node.

[0028] Initialize a node expansion state mapping table (usually a JavaScript object or Map) to record the expansion state (true / false) of each non-leaf node; initially, usually only the root node or the first few levels of nodes are in the expansion state.

[0029] Step 2. Calculate the set of visible nodes (the core work of the dynamic node injection engine);

[0030] The engine expands the state mapping table based on the current node and performs a depth-first traversal (DFT) of the entire tree structure, starting from the root node.

[0031] During the traversal, only nodes in the "expanded" state and their direct child nodes are collected (until an unexpanded node is encountered), forming a "logically fully expanded" linear node list.

[0032] Combining the viewport range (startIndex, endIndex) provided by virtual scrolling, a subset of nodes that need to be actually rendered is extracted from the above linear list;

[0033] Step 3. Node rendering and recycling:

[0034] The node renderer receives a subset of nodes that need to be rendered;

[0035] It maintains a DOM element recycling pool; for nodes that need to be newly rendered, it searches the pool for idle DOM elements that match the type and updates their content (such as text, icons, indentation) and style (such as depth-based paddingLeft) directly.

[0036] If no idle element is available, a new DOM element is created.

[0037] For nodes that are removed from the viewport, their DOM elements are not destroyed, but are placed in the recycling pool for reuse.

[0038] Step 4. Handle user interaction;

[0039] Expand operation: The user clicks the node expand icon; the node expand state mapping table is updated, and the node expanded: true is set; the dynamic node injection engine is triggered to recalculate the visible node set; the engine will insert the node's child nodes into the correct positions in the calculated linear list; the node renderer injects the DOM elements corresponding to the child nodes into the current DOM tree;

[0040] Collapse operation: The process is the reverse of expansion. After updating the state table, the new list calculated by the engine will no longer contain the child nodes of the node, and the node renderer will move the DOM elements of these child nodes back to the recycling pool.

[0041] Scrolling operation: The virtual scroll controller calculates the new viewport extent, triggering the engine to recalculate the subset of nodes that need to be rendered;

[0042] Step 5. Node positioning and virtual scrolling;

[0043] The node positioning service pre-calculates the absolute position (offset TOP value) of each node in the "logically fully expanded tree"; the calculation depends on the expanded state and the fixed height of each node.

[0044] Step 6. Asynchronous data loading;

[0045] When a user attempts to expand a node, but its child node data does not exist in the local flat list, the asynchronous data loader is triggered.

[0046] The loader requests the child node data of the node from the server, dynamically adds it to the flat node list after obtaining it, and immediately executes steps 2-4 to render the newly expanded subtree.

[0047] Furthermore, the present invention also provides a high-performance rendering interaction system for ultra-large-scale attribute data, the system being used to execute the method described above, the system comprising:

[0048] Data flattening and state management module: used to process raw tree data and maintain a list of flattened nodes and a node expansion state mapping table;

[0049] Dynamic node injection engine: The core calculation module, which calculates the set of nodes to be rendered based on the state mapping table and the viewport position;

[0050] Node rendering and recycling pool module: responsible for rendering, updating and reusing DOM elements;

[0051] Virtual Scrolling and Positioning Service Module: Manages scrolling logic and provides node position calculation services;

[0052] Asynchronous data loader: Used to load subtree data from the server on demand.

[0053] (III) Beneficial Effects

[0054] Compared with the prior art, the technical solution of the present invention has the following significant advantages by adopting the above-mentioned technical measures:

[0055] 1. Significant performance improvement: The number of DOM elements is reduced from O(N) to O(Visible_N). A tree with tens of thousands of nodes only needs to render tens to hundreds of DOM elements, resulting in extremely low memory usage and fundamentally eliminating crashes and lag.

[0056] 2. Significantly improved interactive experience: Expand / collapse operations involve only the insertion / removal of a small number of DOM nodes, with extremely fast response speeds, reaching millisecond levels;

[0057] 3. Precise and smooth scrolling: Virtual scrolling technology makes scrolling the tree of ten thousand nodes as smooth as a normal list, without any white screen.

[0058] 4. Strong technical versatility: The solution does not depend on any specific front-end framework (it can be implemented with React / Vue), and has strong universality and extensibility.

[0059] This invention systematically solves various technical problems in rendering and interacting with massive node tree structures through innovative technical solutions, providing a complete, efficient, and reliable solution for browsers to efficiently render and interact with massive node tree structures in Web applications. Attached Figure Description

[0060] Figure 1 : A schematic diagram of the overall system architecture and the collaborative operation of the core modules of this invention.

[0061] Figure 2 A diagram illustrating data processing and DOM changes before and after the expansion operation of the dynamic node injection engine. Detailed Implementation

[0062] To make the objectives, contents, and advantages of the present invention clearer, the specific embodiments of the present invention will be described in further detail below with reference to the accompanying drawings and examples.

[0063] To address the aforementioned technical problems, this invention provides a high-performance rendering interaction method for ultra-large-scale attribute data, the method comprising the following steps:

[0064] Step S101: Receive the original nested tree data and convert it into a flat list of nodes containing parent node identifiers and depth information;

[0065] Step S102: Establish and maintain a node expansion state mapping table to independently manage the expansion and collapse states of each non-leaf node;

[0066] Step S103: The dynamic node injection engine calculates the set of nodes that need to be rendered based on the node expansion state mapping table and the window position provided by the virtual scroll controller.

[0067] Step S104: The node renderer uses elements from the DOM recycling pool to render and update the node collection;

[0068] Step S105: In response to the user's expand or collapse operation, update the node expand state mapping table and trigger the dynamic node injection engine to recalculate and render, dynamically injecting or removing the DOM structure of the corresponding child node;

[0069] Step S106: The virtual scroll controller calculates the starting node of the current window based on the scrolling event through the node positioning service, and repeatedly triggers steps S103 to S104 to achieve smooth scrolling;

[0070] Specifically, the DOM recycling pool in step S104 recycles and stores the DOM elements corresponding to nodes that are removed from the viewport due to scrolling or collapsing operations. When a new node needs to be rendered, the pool is used to retrieve the same type of node for content and style updates, thereby achieving efficient reuse of DOM elements and avoiding frequent creation and destruction.

[0071] In step S106, the node positioning service pre-calculates the cumulative height and absolute position of all expanded nodes in the fully expanded tree species based on the node expansion status mapping table and the fixed height of each node, and establishes an index to enable virtual scrolling to quickly locate the starting node corresponding to any scrolling position.

[0072] Specifically, step S105, which involves responding to user operations, includes: when a user requests to expand a node, if the data of its child nodes does not exist locally, an asynchronous data loader is triggered to request the child data of the node from the server. The returned data is dynamically added to the flat node list, thereby realizing asynchronous on-demand loading and infinite expansion of the tree.

[0073] Furthermore, this invention also provides a high-performance rendering interaction method for ultra-large-scale attribute data. The core of the method lies in constructing a system that separates data state from the rendering view, and achieving on-demand rendering of the tree through dynamic node injection and virtual scrolling technology. The method includes the following steps:

[0074] Step 1. Data flattening and state initialization;

[0075] The input nested tree data is recursively expanded and transformed into a flat array of nodes; each node contains metadata such as unique ID, parent node ID, depth, and whether it is a leaf node.

[0076] Initialize a node expansion state mapping table (usually a JavaScript object or Map) to record the expansion state (true / false) of each non-leaf node; initially, usually only the root node or the first few levels of nodes are in the expansion state.

[0077] Step 2. Calculate the set of visible nodes (the core work of the dynamic node injection engine);

[0078] The engine expands the state mapping table based on the current node and performs a depth-first traversal (DFT) of the entire tree structure, starting from the root node.

[0079] During the traversal, only nodes in the "expanded" state and their direct child nodes are collected (until an unexpanded node is encountered), forming a "logically fully expanded" linear node list.

[0080] Combining the viewport range (startIndex, endIndex) provided by virtual scrolling, a subset of nodes that need to be actually rendered is extracted from the above linear list;

[0081] Step 3. Node rendering and recycling:

[0082] The node renderer receives a subset of nodes that need to be rendered;

[0083] It maintains a DOM element recycling pool; for nodes that need to be newly rendered, it searches the pool for idle DOM elements that match the type and updates their content (such as text, icons, indentation) and style (such as depth-based paddingLeft) directly.

[0084] If no idle element is available, a new DOM element is created.

[0085] For nodes that are removed from the viewport, their DOM elements are not destroyed, but are placed in the recycling pool for reuse.

[0086] Step 4. Handle user interaction;

[0087] Expand operation: The user clicks the node expand icon; the node expand state mapping table is updated, and the node expanded: true is set; the dynamic node injection engine is triggered to recalculate the visible node set; the engine will insert the node's child nodes into the correct positions in the calculated linear list; the node renderer injects the DOM elements corresponding to the child nodes into the current DOM tree;

[0088] Collapse operation: The process is the reverse of expansion. After updating the state table, the new list calculated by the engine will no longer contain the child nodes of the node, and the node renderer will move the DOM elements of these child nodes back to the recycling pool.

[0089] Scrolling operation: The virtual scroll controller calculates the new viewport extent, triggering the engine to recalculate the subset of nodes that need to be rendered;

[0090] Step 5. Node positioning and virtual scrolling;

[0091] The node positioning service pre-calculates the absolute position (offset TOP value) of each node in the "logically fully expanded tree"; the calculation depends on the expanded state and the fixed height of each node.

[0092] Step 6. Asynchronous data loading;

[0093] When a user attempts to expand a node, but its child node data does not exist in the local flat list, the asynchronous data loader is triggered.

[0094] The loader requests the child node data of the node from the server, dynamically adds it to the flat node list after obtaining it, and immediately executes steps 2-4 to render the newly expanded subtree.

[0095] Furthermore, the present invention also provides a high-performance rendering interaction system for ultra-large-scale attribute data, the system being used to execute the method described above, the system comprising:

[0096] Data flattening and state management module: used to process raw tree data and maintain a list of flattened nodes and a node expansion state mapping table;

[0097] Dynamic node injection engine: The core calculation module, which calculates the set of nodes to be rendered based on the state mapping table and the viewport position;

[0098] Node rendering and recycling pool module: responsible for rendering, updating and reusing DOM elements;

[0099] Virtual Scrolling and Positioning Service Module: Manages scrolling logic and provides node position calculation services;

[0100] Asynchronous data loader: Used to load subtree data from the server on demand.

[0101] Example 1

[0102] The following example demonstrates the development of a large file system browser. Figure 2 The following diagram illustrates specific embodiments of the present invention.

[0103] 1. Technology selection: Vue3 framework with Composition API.

[0104] 2. Key Implementation:

[0105] Data is flattened using a ref to store an array of flat nodes: const flatNodes = ref([]).

[0106] The node expands the state map using a reactive object: const expandedStateMap = reactive({}).

[0107] The dynamic node injection engine encapsulates a computed property `visibleNodes`, which calculates the array of nodes to be rendered based on `expandedStateMap` and `scrollTop`.

[0108] Node rendering uses Vue's v-for to render visibleNodes, but can be achieved through custom directives or... <teleport>DOM reuse is achieved by using a recycling pool.

[0109] Virtual scrolling uses a computed property to calculate the total height of the container: containerHeight.value = visibleNodes.value.length * itemHeight.

[0110] Asynchronous loading: In the callback function of the expand event, check if the node has a children property. If not, call fetchChildNodes(nodeId).

[0111] Core code implementation:

[0112]

[0113]

[0114] 3. Results: When rendering a directory tree containing 10,000 files and folders, the browser only renders about 100 DOM elements. Operations such as expanding deep folders and fast scrolling are incredibly smooth with no performance issues.

[0115] The above description is only a preferred embodiment of the present invention. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the technical principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.< / teleport>

Claims

1. A high-performance rendering and interaction method for ultra-large-scale attribute data, characterized in that, The method includes the following steps: Step S101: Receive the original nested tree data and convert it into a flat list of nodes containing parent node identifiers and depth information; Step S102: Establish and maintain a node expansion state mapping table to independently manage the expansion and collapse states of each non-leaf node; Step S103: The dynamic node injection engine calculates the set of nodes that need to be rendered based on the node expansion state mapping table and the window position provided by the virtual scroll controller. Step S104: The node renderer uses elements from the DOM recycling pool to render and update the node collection; Step S105: In response to the user's expand or collapse operation, update the node expand state mapping table and trigger the dynamic node injection engine to recalculate and render, dynamically injecting or removing the DOM structure of the corresponding child node; Step S106: The virtual scroll controller calculates the starting node of the current window through the node positioning service based on the scroll event, and repeatedly triggers steps S103 to S104 to achieve smooth scrolling.

2. The high-performance rendering interaction method for ultra-large-scale attribute data as described in claim 1, characterized in that, The DOM recycling pool in step S104 specifically involves recycling and storing the DOM elements corresponding to nodes that are removed from the viewport due to scrolling or collapsing operations. When a new node needs to be rendered, the pool is used to retrieve nodes of the same type for content and style updates, thereby achieving efficient reuse of DOM elements and avoiding frequent creation and destruction.

3. The high-performance rendering interaction method for ultra-large-scale attribute data as described in claim 1, characterized in that, The node positioning service in step S106 pre-calculates the cumulative height and absolute position of all expanded nodes in the fully expanded tree species based on the node expansion status mapping table and the fixed height of each node, and establishes an index to enable virtual scrolling to quickly locate the starting node corresponding to any scrolling position.

4. The high-performance rendering interaction method for ultra-large-scale attribute data as described in claim 1, characterized in that, The step S105, which involves responding to user operations, specifically includes: when a user requests to expand a node, if the data of its child nodes does not exist locally, an asynchronous data loader is triggered to request the child data of the node from the server. The returned data is dynamically added to the flat node list, thereby realizing asynchronous on-demand loading and infinite expansion of the tree.

5. A high-performance rendering interaction method for ultra-large-scale attribute data, characterized in that, The core of the method lies in constructing a system that separates "data state from rendering view," achieving on-demand rendering of the tree through dynamic node injection and virtual scrolling technology. The method includes the following steps: Step 1. Data flattening and state initialization; Step 2. Calculate the set of visible nodes; Step 3. Node rendering and recycling: Step 4. Handle user interaction; Step 5. Node positioning and virtual scrolling.

6. The high-performance rendering interaction method for ultra-large-scale attribute data as described in claim 5, characterized in that, Step 1. Data flattening and state initialization; The input nested tree data is recursively expanded and transformed into a flat array of nodes; each node contains metadata such as unique ID, parent node ID, depth, and whether it is a leaf node. Initialize a node expansion state mapping table to record the expansion state of each non-leaf node; initially, usually only the root node or the first few levels of nodes are in the expansion state.

7. The high-performance rendering interaction method for ultra-large-scale attribute data as described in claim 6, characterized in that, Step 2: Calculate the set of visible nodes; The engine expands the state mapping table based on the current node and traverses the entire tree structure in a depth-first manner, starting from the root node. During the traversal, only nodes in the "expanded" state and their direct child nodes are collected (until an unexpanded node is encountered), forming a "logically fully expanded" linear node list. Based on the viewport range provided by virtual scrolling, a subset of nodes that need to be actually rendered is extracted from the linear list above; Step 3. Node rendering and recycling: The node renderer receives a subset of nodes that need to be rendered; It maintains a DOM element recycling pool; for nodes that need to be newly rendered, it searches the pool for idle DOM elements of the same type and updates their content and styles directly. If no idle element is available, a new DOM element is created. For nodes that are removed from the viewport, their DOM elements are not destroyed, but are placed in the recycling pool for reuse.

8. The high-performance rendering interaction method for ultra-large-scale attribute data as described in claim 7, characterized in that, Step 4. Process user interaction; Expand operation: The user clicks the node expand icon; Update the node's expanded state mapping table and set expanded: true for the node; The dynamic node injection engine is triggered to recalculate the set of visible nodes; the engine will then insert the child nodes of that node into the correct positions in the calculated linear list. The node renderer injects the DOM elements corresponding to the child nodes into the current DOM tree; Collapse operation: The process is the reverse of expansion. After updating the state table, the new list calculated by the engine will no longer contain the child nodes of the node, and the node renderer will move the DOM elements of these child nodes back to the recycling pool. Scrolling operation: The virtual scroll controller calculates the new viewport extent, triggering the engine to recalculate the subset of nodes that need to be rendered; Step 5. Node positioning and virtual scrolling; The node positioning service pre-calculates the absolute position (offset TOP value) of each node in the "logically fully expanded tree"; the calculation depends on the expanded state and the fixed height of each node.

9. The high-performance rendering interaction method for ultra-large-scale attribute data as described in claim 8, characterized in that, Step 6. Asynchronous data loading; When a user attempts to expand a node, but its child node data does not exist in the local flat list, the asynchronous data loader is triggered. The loader requests the child node data of the node from the server, dynamically adds it to the flat node list after obtaining it, and immediately executes steps 2-4 to render the newly expanded subtree.

10. A high-performance rendering and interactive system for ultra-large-scale attribute data, characterized in that, The system is used to perform the method according to any one of claims 1-9, the system comprising: Data flattening and state management module: used to process raw tree data and maintain a list of flattened nodes and a node expansion state mapping table; Dynamic node injection engine: The core calculation module, which calculates the set of nodes to be rendered based on the state mapping table and the viewport position; Node rendering and recycling pool module: responsible for rendering, updating and reusing DOM elements; Virtual Scrolling and Positioning Service Module: Manages scrolling logic and provides node position calculation services; Asynchronous data loader: Used to load subtree data from the server on demand.

Images