Tree data rendering method combining pagination request and preloading

Abstract

The application relates to a tree data rendering method combining pagination request and preloading, and belongs to the field of data processing systems.The method comprises the following steps: initially loading only top node information of the outermost level; when receiving a next-level node request of a user, following the user's scrolling or clicking to expand the node, loading and rendering corresponding deep-level child node data; listening to the cross degree of the tree node and the visible parent container, judging whether the next pagination request is triggered, and combining a micro task queue to realize preloading of the tree node; rendering a corresponding number of tree DOM nodes step by step until the preset maximum number of DOM nodes is reached, calculating and updating a node list to be rendered; according to a filtered data source, finding and taking out corresponding DOM nodes in a WeakMap cache object, assembling the DOM nodes into a relational structure, and then rendering and constructing a new tree. The method can batch request and render tree data in the form of pagination request, and improves the interface response speed and the rendering speed of the initialization tree interface.

Description

Technical Field

[0001] The present invention belongs to the field of data processing systems, and in particular relates to a tree-type data rendering method combining paging request and preloading. Background Art

[0002] In modern data processing systems, the development of video services has led to a continuous increase in the number of video access points. To facilitate user search and selection of video devices, a tree structure is often used to display the corresponding structural relationships of video devices. This tree structure has the advantages of intuitiveness and easy navigation in user interface design, but it also presents some technical challenges.

[0003] Existing technology solutions: Existing technologies typically render tree-like data all at once for users to view and select. This solution works well for small amounts of data, responding quickly to user requests and providing a smooth user experience.

[0004] However, the existing technology has the following problems: when faced with massive data, the method of rendering tree-type data at one time has obvious shortcomings.

[0005] (1) Due to the large amount of data that needs to be rendered, the response speed of the interface will be significantly affected, causing users to experience delays and lags while waiting for data to load. When there are a large number of video devices, loading and rendering the entire device tree at once will cause the page to take too long to render the first screen, and even cause lags.

[0006] (2) Due to the particularity of the tree structure, the selection of a node may cause the corresponding relationship of the entire tree to change, thus requiring the page to be re-rendered. This will cause the browser to perform a large amount of calculations and rearrange the page, further reducing page performance and response speed. In the device tree, there may be complex associations between nodes. When the user operates a node (such as expanding, collapsing, selecting, etc.), it may trigger updates or rendering changes of related nodes. If the device tree is fully rendered, this operation may cause the entire page to be re-rendered, thus affecting performance.

[0007] (3) JavaScript's single-threaded task processing method is prone to blocking other tasks when facing large amounts of data, further affecting the user experience.

[0008] (4) Traditional virtual scrolling technology dynamically updates the content within the viewport by monitoring page scroll events. However, this method of frequently triggering scroll events may lead to performance loss. In addition, virtual scrolling usually requires the use of absolute positioning combined with the calculation of the top value to achieve dynamic display of content. This calculation method is complex and prone to errors, which can easily cause page layout problems or rendering bugs.

[0009] In summary, the main problems with existing technologies in this field are slow rendering of massive tree-based data, poor page performance, and poor user experience while waiting for data loading and page response. Summary of the Invention

[0010] In view of the above deficiencies in the prior art, the purpose of the present invention is to provide a tree data rendering method that combines paging requests and preloading, rendering tree data in batches in the form of paging requests, improving the interface response speed and the rendering speed of the initialization tree interface.

[0011] The present invention proposes a tree-type data rendering method combining paging request and preloading, comprising:

[0012] S1, when the outermost layer of the data structure is first requested, only the top-level node information of the outermost layer is initially loaded and rendered; when the user further requests the next layer of nodes, the corresponding deeper sub-node data is loaded and rendered as the user scrolls or clicks to expand the node, thus achieving batch rendering based on paged requests;

[0013] S2, calculates the number of tree node DOMs that need to be rendered based on the parent container's visible area;

[0014] S3, monitoring the degree of intersection between the tree node and the visual parent container, determining whether to trigger the next paging request based on the intersection degree, and implementing preloading of the tree node in conjunction with the JavaScript micro-task queue, including: setting an intersection threshold, and when it is determined that the intersection degree between the tree node and the visual parent container reaches the intersection threshold, triggering the next paging request, creating a task in the micro-queue, automatically requesting the next page of current data and rendering it to implement preloading;

[0015] S4, based on the incoming paging requests, gradually render the corresponding number of tree-shaped DOM nodes until the number of DOM nodes reaches the preset maximum number of DOM nodes, and calculate and update the list of nodes to be rendered based on the visible area of ​​the parent container and the size of the nodes;

[0016] S5, when the user's keyword search instruction is detected, the corresponding nodes are filtered out from the existing data source, and the corresponding DOM nodes are searched and retrieved from the WeakMap cache object according to the filtered data source, assembled into a relational structure, and then rendered and a new tree is constructed.

[0017] Furthermore, in S2, WeakMap is used to associate the data object of each node of the tree with the corresponding DOM node, monitor window size changes or scroll events, and dynamically calculate the visible area of ​​the parent container; based on the size of the visible area and the size of the node, the number of tree node DOMs that need to be rendered is calculated, and the corresponding nodes are rendered.

[0018] Furthermore, the use of WeakMap to associate the data object of each node of the tree with the corresponding DOM node includes: using the WeakMap constructor to construct a key-value pair set, and storing the reference address of each DOM of the tree into the key-value pair set, wherein the data object of each node is used as the key and the node DOM is used as the value.

[0019] Furthermore, in S3, Promise chain calls or async / await asynchronous functions are used to ensure the sequential nature of data requests and rendering.

[0020] Furthermore, in S3, the intersection threshold is set to 50%; when the intersection area between the last node currently loaded and the edge of the parent container is 50%, a request for the next page of data is triggered.

[0021] Furthermore, in S3, when it is determined that the intersection degree between the tree node and the visual parent container reaches the intersection threshold, the next page data is requested and a DOM node is constructed.

[0022] Furthermore, in S4, WeakMap and existing data sources are used to dynamically manage DOM nodes. According to the intersection between DOM nodes and parent containers and the dynamics of existing data sources, the number of DOM nodes that need to be rendered is increased or decreased.

[0023] Furthermore, in S4, if the current number of DOM nodes exceeds the maximum number of DOM nodes, some DOM nodes outside the upper scrolling visible area are removed.

[0024] Furthermore, in S5, a Web Worker instance is created to perform data filtering operations in a background thread; the search keyword and data source are sent to the Web Worker instance, and the filtered results are waited for to be returned; in the main thread, the tree structure is updated according to the filtered data source and the DOM nodes cached in the WeakMap.

[0025] Furthermore, in S5, a Promise object or a callback function is used to handle the communication and data transfer between the Web Worker and the main thread.

[0026] The beneficial effects of the present invention are as follows:

[0027] 1. Paged request rendering: The present invention renders tree-type data in batches in the form of paged requests, which not only reduces the rendering time of the initialization page and the interface response time, but also avoids the problems of page performance degradation and poor user experience caused by rendering massive amounts of data at one time.

[0028] 2. Dynamic rendering quantity: This method determines the number of tree nodes to render by calculating the height of the tree's nearest visible parent container, rather than rendering all of them. This dynamic rendering quantity can be adjusted based on actual needs and user operations, thereby optimizing page performance and user experience.

[0029] 3. Preloading Mechanism: This invention triggers the next paging request by monitoring the intersection of a tree node with its visual parent container, and uses a JavaScript microtask queue to preload tree nodes. This preloading mechanism reduces user interface latency, improves page responsiveness, and enhances the user experience. By triggering loading based on the container intersection threshold, page rendering eliminates the need for frequent monitoring of scrollbar events and calculation of absolute top values, effectively avoiding page layout errors and logic issues caused by these monitoring and calculations.

[0030] 4. Optimized Search Functionality: When a user performs a keyword search, the present invention can quickly filter out the corresponding nodes from the existing data source, retrieve the corresponding DOM from the WeakMap cache object based on the filtered data source, assemble the relational structure, and then render a new tree. Data source-related operations are executed in a separate thread to avoid blocking the main page thread. This optimized search function can improve search efficiency, reduce user wait time, and enhance the user experience.

[0031] 5. This invention uses a lazy loading solution. When a page is initially loaded, only the root node is rendered. As the user scrolls or clicks to expand a node, the child node data is loaded and rendered on demand. This not only significantly shortens the initial page rendering time but also reduces unnecessary resource consumption.

[0032] 6. This invention utilizes a device tree that combines container intersection with a lazy loading solution to more flexibly handle scrolling and rendering issues. This approach uses the intersection of nodes and visual containers to determine whether to request new data, enabling lazy loading and preloading. This avoids frequent scroll event monitoring and complex calculations, and improves the user experience with data loading.

[0033] 7. This invention only renders node content within the visible area. When a user operates a node, only the state of that node and its child nodes needs to be updated, without re-rendering the entire device tree. This effectively reduces rendering changes and improves the smoothness and responsiveness of page operations.

[0034] 8、In the video playing page, especially in multi-screen playing, the performance of the page is particularly important. The method of the present application can ensure the page to remain smooth when playing the video by using the lazy loading scheme. The preloading scheme based on the cross threshold cooperates with the reasonable task queue execution, which has a positive influence on the webpage performance and user experience, and will not cause the video playing to be stuck or delayed due to the rendering problem of the device tree. At the same time, since only the node content of the visible area is rendered, the user can also feel a more smooth and natural page operation process when operating the device tree. BRIEF DESCRIPTION OF DRAWINGS

[0035] The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiments of the application and together with the description serve to explain the principles of the application. In the drawings:

[0036] Figure 1 A flow chart of a tree type data rendering method combining page request and preloading for an embodiment of the present application;

[0037] Figure 2 A schematic diagram of a tree type data rendering method combining page request and preloading for an embodiment of the present application. DETAILED DESCRIPTION

[0038] In order to make the personnel in the art better understand the technical solutions in the embodiments of the present application, the technical solutions of the present application will be clearly and completely described below in conjunction with the drawings. Obviously, the described embodiments are a part of the embodiments of the present application, rather than all the embodiments. It should be understood that these descriptions are exemplary, and are not used to limit the scope of the present application. Based on the embodiments of the present application, all other embodiments obtained by those of ordinary skill in the art without creative labor should belong to the scope of protection of the present application.

[0039] In addition, in the following description, the description of the well-known structures and technologies is omitted to avoid unnecessary confusion of the concepts disclosed in the present application.

[0040] In the description of the present invention, it should be noted that, unless otherwise expressly specified and limited, the terms "center", "up", "down", "left", "right", "vertical", "horizontal", "inside", "outside" and the like indicate orientations or positional relationships based on the orientations or positional relationships shown in the accompanying drawings, and are only for the convenience of describing the present invention and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as limiting the present invention. In addition, the terms "first", "second" and "third" are used for descriptive purposes only and cannot be understood as indicating or implying relative importance. The terms "installed", "connected" and "connected" should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection, or an indirect connection through an intermediate medium, or it can be a communication between the internal parts of two elements. For those of ordinary skill in the art, the specific meanings of the above terms in the present invention can be understood according to specific circumstances.

[0041] Exemplary embodiments will be described in detail herein, examples of which are illustrated in the accompanying drawings. In the following description, when referring to the drawings, like numbers in different figures represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all possible embodiments consistent with the present invention. Rather, they are merely examples of methods and systems consistent with certain aspects of the present invention, as detailed in the appended claims.

[0042] The technical terms involved in the present invention are explained below:

[0043] Paging request: Divide a large amount of data into several pages and request them step by step.

[0044] Preloading: Load the data to be displayed when the task queue is idle.

[0045] like Figure 1 and Figure 2 As shown, the present invention proposes a tree-type data rendering method combining paging request and preloading, comprising the following steps:

[0046] S1, when the outermost layer data structure is first requested, the initial loading and rendering is only the top-level node information of the outermost layer; when the user further receives the next-level node request, it follows the user to scroll or click to expand the node, and then loads and renders the corresponding deep-level child node data to achieve batch rendering based on page requests.

[0047] In this step, a lazy loading solution is used. Specifically, when the outermost data structure is first requested, only the necessary top-level node information is loaded to reduce initial loading time and network overhead. That is, when the page is initially loaded, only the root node is rendered. As the user scrolls or clicks to expand a node, the child node data is loaded and rendered on demand, and the visible area of ​​the parent container is calculated. This approach not only significantly shortens the page's first screen rendering time but also reduces unnecessary resource consumption.

[0048] In summary, the present invention renders tree-structured data in batches using paging requests. When a user manually clicks a node, the system then requests the data for its deeper subnodes. This approach not only reduces initial page rendering time and interface response time, but also avoids the issues of page performance degradation and poor user experience caused by rendering massive amounts of data at once.

[0049] S2, calculates the number of tree node DOMs that need to be rendered based on the parent container's visible area.

[0050] Specifically, WeakMap is used to associate the data object of each node of the tree with the corresponding DOM node, monitor window size changes or scroll events, and dynamically calculate the visible area of ​​the parent container; based on the size of the visible area and the size of the node, the number of tree node DOMs that need to be rendered is calculated, and the corresponding nodes are rendered.

[0051] Specifically, a WeakMap constructor is used to construct a key-value pair set, into which references to each DOM node in the tree are stored. Each node's data object serves as the key, and the node's DOM node serves as the value. Because the key-value pair set constructed by WeakMap is a weak reference, memory overflows are avoided. WeakMap is specifically designed for managing key-value pairs, and its performance outperforms Object in high-frequency read and write operations such as tree operations.

[0052] This invention determines the number of tree nodes to render by calculating the height of the tree's nearest visible parent container, achieving dynamic rendering rather than full rendering. This dynamic rendering method can be adjusted according to actual needs and user operations, thereby optimizing page performance and user experience.

[0053] S3 monitors the degree of intersection between the tree node and the visual parent container, determines whether to trigger the next paging request based on the degree of intersection, and implements preloading of tree nodes in combination with the JavaScript microtask queue.

[0054] Specifically, a cross threshold is set according to actual needs, and the cross threshold is used to determine the degree of intersection between the current node and the parent container.

[0055] When the intersection between the judgment tree node and the visual parent container reaches the intersection threshold, the next paging request is triggered. That is, when the intersection between the judgment tree node and the visual parent container reaches the intersection threshold, the next page of data is requested and the DOM node is constructed. The node's subordinate data is requested and rendered in a paging manner.

[0056] For example, the intersection threshold is set to 50%; when the intersection area between the last node currently loaded and the edge of the parent container is 50%, the request for the next page of data is triggered.

[0057] In this step, Promise chain calls or async / await asynchronous functions are used to ensure the sequential nature of data request and rendering.

[0058] Create a task in the micro queue to automatically request the next page of the current data and render it to avoid blocking the main thread, ensure the smoothness of other interactions on the page, achieve the purpose of preloading, and prevent blocking other interactions on the page.

[0059] The present invention adopts a preloading mechanism to trigger the next paging request by monitoring the intersection of tree nodes and visual parent containers, and combines JavaScript micro-task queues to realize the preloading of tree nodes. This preloading mechanism can reduce the waiting time of the user interface, improve the page response speed, and enhance the user experience. The preloading scheme based on the cross threshold is combined with a reasonable task queue execution, which has a positive impact on web page performance and user experience, and will not cause video playback to be stuck or delayed due to rendering problems of the device tree. At the same time, since only the node content in the visible area is rendered, users can also feel a smoother and more natural page operation process when operating the device tree.

[0060] S4, according to the paging requests that come in successively, gradually render the corresponding number of tree-shaped DOM nodes until the number of DOM nodes reaches the preset maximum number of DOM nodes, and calculate and update the list of nodes to be rendered according to the visible area of ​​the parent container and the size of the node.

[0061] Specifically, WeakMap and existing data sources are used to dynamically manage DOM nodes. Based on the intersection between DOM nodes and parent containers and the dynamics of existing data sources, the number of DOM nodes that need to be rendered is increased or decreased.

[0062] In this embodiment of the present invention, a maximum number of DOM nodes is set to limit the number of nodes that can be rendered simultaneously. DOM nodes are dynamically managed using a WeakMap and existing data sources. When new data arrives, the list of nodes to be rendered is calculated and updated based on the visible area of ​​the parent container and the size of the nodes. Nodes that need to be displayed are created, and nodes that are no longer visible are destroyed.

[0063] refer to Figure 2If the current number of DOM nodes exceeds the maximum number of DOM nodes, some DOM nodes outside the upper scroll visible area will be removed.

[0064] In summary, in this step, a fixed number of tree DOM nodes are always rendered. When paging data is continuously requested and the number of tree DOM nodes reaches the set maximum, the DOM to be rendered is dynamically increased or decreased based on the intersection between the DOM and the parent container and the existing data source. Compared to traditional virtual lists, this method eliminates the need for complex top positioning calculations and scroll event monitoring, greatly improving development efficiency and difficulty, effectively avoiding page bugs caused by calculations and the performance drain on the browser caused by event monitoring.

[0065] S5, when the user's keyword search instruction is detected, the corresponding nodes are filtered out from the existing data source, and the corresponding DOM nodes are searched and retrieved from the WeakMap cache object according to the filtered data source, assembled into a relational structure, and then rendered and a new tree is constructed.

[0066] Specifically, a Web Worker instance is created to perform data filtering operations in a background thread. When a user performs a keyword search, the search keyword and data source are sent to the Web Worker instance, and it waits for the filtered results to be returned. In the Web Worker, the corresponding nodes are filtered from the existing data source. In the main thread, the tree structure is updated based on the filtered data source and the DOM nodes cached in the WeakMap. Specifically, the corresponding DOM nodes are retrieved from the WeakMap cache object based on the filtered data source, assembled into a relational structure, and then the new tree is rendered.

[0067] In an embodiment of the present invention, a Promise object or a callback function is used to process the communication and data transfer between the Web Worker and the main thread.

[0068] When a user performs a keyword search, the present invention can quickly filter out the corresponding nodes from the existing data source, retrieve the corresponding DOM from the WeakMap cache object based on the filtered data source, assemble it into a relational structure, and then render a new tree. Data source related operations are executed in a separate thread to avoid blocking the main page thread. This optimized search function can improve search efficiency, reduce user waiting time, and enhance the user experience.

[0069] In view of the problems of slow rendering of massive tree data and low page performance, the tree data rendering method combining pagination request and preloading provided by the present application renders the tree data in batches in the form of pagination request, improves the interface response speed and the rendering speed of the initialization tree interface. The rendering quantity of the tree node is determined by calculating the height of the nearest visible parent container of the tree, instead of full rendering. The next pagination request is triggered by listening to the intersection of the tree node and the visible parent container, and the preloading of the tree node is realized according to the threshold of the intersection and the JavaScript micro task queue, so as to reduce the user interface waiting time. Efficient tree data rendering is realized, and the page response speed and user experience are improved.

[0070] The method of the present application greatly improves the speed and efficiency of massive tree data rendering through pagination request and preloading technology, reduces the delay and lag of users in the data loading process, and improves the user experience. The loading is triggered by the container intersection threshold, and it is not necessary to frequently listen to the scroll bar event and calculate the absolute positioning top value to render the page, so as to effectively avoid the page layout disorder and logical problems caused by listening and calculation.

[0071] The tree data rendering method combining pagination request and preloading provided by the present application can be applied in scenarios requiring to process a large amount of data, such as video control operation panel, alarm task creation, device organization relationship display, etc.

[0072] The present application triggers the preloading condition by listening to the intersection of the tree node and the parent container, and this preloading mechanism cooperates with the event queue to reduce the user interface waiting time, improve the page response speed, and enhance the user experience.

[0073] When the user performs a keyword search, the present application filters out the corresponding node from the existing data source, takes out the corresponding dom in the weakMap cache object according to the filtered data source, assembles the relationship structure in the background thread, and then renders the new tree, so as to quickly respond to the search operation of the user and avoid blocking the main line task.

[0074] The present application triggers the preloading condition according to the intersection of the node and the parent container, and it is not necessary to frequently listen to the scroll event. Compared with the traditional virtual scroll, it is not necessary to perform top positioning calculation, and the page bug caused by calculation and the performance consumption of the browser caused by event listening can be effectively avoided.

[0075] A preloading solution based on a cross-threshold, combined with a task queue, can rationally schedule page resources, improving data loading smoothness and user experience. In WeakMap, object data is used as a key to associate data with the DOM. This is very helpful for tree-based data rendering, which requires searching the DOM and then searching the DOM for data. It can quickly help users find data in the application. Weak references are used to store data sources to avoid memory leaks. WeakMap is specifically designed for managing key-value pairs, and its performance is superior to Object in high-frequency read and write operations such as tree operations. When searching for keywords, WebWorker can be used to execute the tree data construction process in a background thread, avoiding blocking the main thread's UI rendering.

[0076] Finally, it should be noted that the above embodiments are merely illustrative of the technical solutions of the embodiments of the present invention, and are not intended to limit them. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they may still modify the technical solutions described in the aforementioned embodiments, or replace some of the technical features therein with equivalents; and such modifications or replacements do not deviate from the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention. Any changes or replacements that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be covered by the scope of protection of the present invention.

Claims

1. A tree data rendering method combining paging request and preloading, characterized in that: include: S1, when the outermost data structure is first requested, the initial loading only renders the top-level node information of the outermost level; When receiving a request for a next-level node from the user, the application follows the user's scrolling or clicking to expand the node, and then loads and renders the corresponding deep-level child node data to achieve batch rendering based on paged requests. S2, calculates the number of tree node DOMs that need to be rendered based on the parent container's visible area; S3, monitoring the degree of intersection between the tree node and the visual parent container, determining whether to trigger the next paging request based on the intersection degree, and implementing preloading of the tree node in conjunction with the JavaScript micro-task queue, including: setting an intersection threshold, and when it is determined that the intersection degree between the tree node and the visual parent container reaches the intersection threshold, triggering the next paging request, creating a task in the micro-queue, automatically requesting the next page of current data and rendering it to implement preloading; S4, based on the incoming paging requests, gradually render the corresponding number of tree-shaped DOM nodes until the number of DOM nodes reaches the preset maximum number of DOM nodes, and calculate and update the list of nodes to be rendered based on the visible area of ​​the parent container and the size of the nodes; S5, when the user's keyword search instruction is detected, the corresponding nodes are filtered out from the existing data source, and the corresponding DOM nodes are searched and retrieved from the WeakMap cache object according to the filtered data source, assembled into a relational structure, and then rendered and a new tree is constructed.

2. The tree-type data rendering method combining paging request and preloading according to claim 1 is characterized in that: In S2, WeakMap is used to associate the data object of each node of the tree with the corresponding DOM node, monitor window size changes or scroll events, and dynamically calculate the visible area of ​​the parent container; based on the size of the visible area and the size of the node, the number of tree node DOMs that need to be rendered is calculated, and the corresponding nodes are rendered.

3. The tree-type data rendering method combining paging request and preloading according to claim 2 is characterized in that: The method of using WeakMap to associate the data object of each node of the tree with the corresponding DOM node includes: using the WeakMap constructor to build a key-value pair set, and storing the reference address of each DOM of the tree into the key-value pair set, wherein the data object of each node is used as the key and the node DOM is used as the value.

4. The tree-type data rendering method combining paging request and preloading according to claim 1 is characterized in that: In S3, use Promise chain calls or async / await asynchronous functions to ensure the order of data requests and rendering.

5. The tree-type data rendering method combining paging request and preloading according to claim 1 is characterized in that: In S3, the intersection threshold is set to 50%; when the intersection area between the last node currently loaded and the edge of the parent container is 50%, a request for the next page of data is triggered.

6. The tree-type data rendering method combining paging request and preloading according to claim 1, characterized in that: In S3, when it is determined that the intersection degree between the tree node and the visual parent container reaches the intersection threshold, the next page data is requested and a DOM node is constructed.

7. The tree-type data rendering method combining paging request and preloading according to claim 1, characterized in that: In S4, WeakMap and existing data sources are used to dynamically manage DOM nodes. The number of DOM nodes that need to be rendered is increased or decreased based on the intersection between DOM nodes and parent containers and the dynamics of existing data sources.

8. The tree-type data rendering method combining paging request and preloading according to claim 7, characterized in that: In S4, if the current number of DOM nodes exceeds the maximum number of DOM nodes, some DOM nodes outside the upper scrolling visible area are removed.

9. The tree-type data rendering method combining paging request and preloading according to claim 1, characterized in that: In S5, a Web Worker instance is created to perform data filtering operations in a background thread; the search keyword and data source are sent to the Web Worker instance, and the Web Worker instance is waited for to return the filtered results; In the main thread, the tree structure is updated based on the filtered data source and the DOM nodes cached in the WeakMap.

10. The tree-type data rendering method combining paging request and preloading according to claim 1, characterized in that: In S5, Promise objects or callback functions are used to handle communication and data transfer between Web Workers and the main thread.

Images