Tree-type data rendering method combining paging request and preloading

Abstract

The invention relates to a paging request and preloading combined tree data rendering method, which belongs to the field of data processing systems, and comprises the following steps of: initially loading and only rendering top layer node information of the outermost layer; when a next-level node request of a user is received, rolling along with the user or clicking an expansion node, and then loading and rendering corresponding deep-level sub-node data; monitoring the crossing degree of the tree node and the visual parent container, judging whether a next paging request is triggered or not, and realizing preloading of the tree node in combination with the microtask queue; gradually rendering a corresponding number of tree-shaped DOM nodes until a preset maximum number of DOM nodes is reached, and calculating and updating a node list to be rendered; corresponding DOM nodes are searched and taken out from WeakMap cache objects according to the filtered data sources, and after a relation structure is assembled, rendering is conducted, and a new tree is constructed. According to the method, the tree data is requested to be rendered in batches in a paging request mode, and the interface response speed and the rendering speed of an initialized tree interface are increased.

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 an increasing number of video accesses. In order to facilitate users to find and select video devices, a tree structure is usually used to display the structural relationship of video devices. This tree structure has the advantages of intuitiveness and easy navigation in user interface design, but it also has some technical challenges.

[0003] Existing technology solutions: Existing technologies usually render tree data at once so that users can view and select. This solution performs well when facing a small amount of data, can quickly respond to user requests, and provide a smooth user experience.

[0004] However, the prior art has the following problems: when faced with massive amounts of data, the one-time rendering of tree-type data has obvious shortcomings.

[0005] (1) Due to the huge amount of data that needs to be rendered, the response speed of the interface will be significantly affected, causing users to feel delays and freezes 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 on the first screen, and even cause freezes.

[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, which will cause the browser to perform a large amount of calculations and re-arrange the page, further reducing page performance and response speed. In the device tree, there may be complex associations between nodes. When a 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 faced with large amounts of data, further affecting the user experience.

[0008] (4) Traditional virtual scrolling technology dynamically updates the content in the viewport by monitoring page scrolling events, but this method of frequently triggering scrolling events may cause 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 problems existing in the existing technologies in this field are mainly slow rendering of massive tree-type 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 combining paging request and preloading, which renders the tree data in batches in the form of paging request, thereby improving the interface response speed and the rendering speed of the initialization tree interface.

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

[0012] S1, when the outermost layer data structure is requested for the first time, only the top-level node information of the outermost layer is initially loaded and rendered; when the user's request for the next layer of nodes is further received, the corresponding deep-level child node data is loaded and rendered as the user scrolls or clicks to expand the node, so as to achieve batch rendering in the form of paged requests;

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

[0014] S3, monitoring the intersection degree between the tree node and the visual parent container, judging whether to trigger the next paging request according to the intersection degree, and realizing preloading of the tree node in combination with the JavaScript micro-task queue, including: setting an intersection threshold, when judging 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 the current data and rendering it, so as to realize preloading;

[0015] S4, according to the paging requests that come one after another, gradually render a corresponding number of tree-shaped DOM nodes until the number of DOM nodes reaches a 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;

[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 taken out from the WeakMap cache object according to the filtered data source, assembled into a relational structure, and then rendered and constructed a new tree.

[0017] Furthermore, in S2, WeakMap is used to associate the data object of each node of the tree with the corresponding DOM node, monitor the window size change or scroll event, and dynamically calculate the visible area of ​​the parent container; according to 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 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.

[0019] Furthermore, in S3, Promise chain calls or async / await asynchronous functions are used to ensure the order of data request 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] Further, in S3, when it is determined that the intersection degree between the tree node and the visible 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, and the number of DOM nodes to be rendered is increased or decreased according to the intersection between the DOM nodes and the parent container and the dynamics of the existing data source.

[0023] Further, 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 keywords and data sources 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 by the WeakMap.

[0025] Furthermore, in S5, a Promise object or a callback function is used to process 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. Paging request rendering: The present invention renders the tree data in batches in the form of paging requests, which not only reduces the rendering time of the initialization page and the interface response time, but also avoids the problem of page performance degradation and poor user experience caused by rendering massive data at one time.

[0028] 2. Dynamic rendering quantity: The present invention determines the rendering quantity of tree nodes by calculating the height of the nearest visible parent container of the tree, rather than rendering the entire tree. This dynamic rendering quantity method can be adjusted according to actual needs and user operations, thereby optimizing page performance and user experience.

[0029] 3. Preloading mechanism: The present invention triggers the next paging request by monitoring the intersection of tree nodes and visual parent containers, and implements preloading of tree nodes in combination with JavaScript microtask queues. This preloading mechanism can reduce user interface waiting time, improve page response speed, and enhance user experience. Loading is triggered by container intersection thresholds, and there is no need to frequently monitor scroll bar events and calculate absolute positioning top values ​​to render pages, effectively avoiding page layout confusion and logic problems caused by monitoring and calculation.

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

[0031] 5. The present invention adopts a lazy loading solution. When the page is initially loaded, only the root node is rendered. As the user scrolls or clicks to expand the node, the child node data is loaded and rendered on demand. This can not only significantly shorten the page first screen rendering time, but also reduce unnecessary resource consumption.

[0032] 6. The device tree of the present invention, which uses the container intersection situation and the lazy loading solution, can handle scrolling and rendering problems more flexibly. It determines whether to request new data according to the intersection situation of the node and the visual container to achieve lazy loading and preloading, avoids frequent monitoring of scrolling events and complex calculations, and also improves the user experience of data loading.

[0033] 7. The present invention only renders the node content in the visible area. When a user operates a node, only the state of the node and its child nodes needs to be updated without re-rendering the entire device tree. This can effectively reduce rendering changes and improve the fluency and response speed of page operations.

[0034] 8. In the video playback page, especially when playing on multiple screens, the performance of the page is particularly important. The method of the present invention adopts a lazy loading solution to ensure that the page remains smooth when playing the video. The preloading solution based on the cross threshold is combined with a reasonable task queue execution, which has a positive impact on the web page performance and user experience, and will not cause the video playback to freeze or delay due to the rendering problem of the device tree. At the same time, since only the node content in the visible area is rendered, the user can also feel a smoother and more natural page operation process when operating the device tree. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] The accompanying drawings are only used to illustrate specific embodiments and are not considered to limit the present invention. In the entire drawings, the same reference symbols represent the same components. Obviously, the drawings described below are only some embodiments recorded in the embodiments of the present invention. For those of ordinary skill in the art, other drawings can also be obtained based on these drawings.

[0036] Figure 1 It is a flowchart of a tree data rendering method combining paging request and preloading according to an embodiment of the present invention;

[0037] Figure 2 The diagram is a schematic diagram of a tree data rendering method combining paging request and preloading according to an embodiment of the present invention. DETAILED DESCRIPTION

[0038] In order to enable those skilled in the art to better understand the technical solutions in the embodiments of the present invention, the technical solutions of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all of the embodiments. It should be understood that these descriptions are only exemplary and are not intended to limit the scope of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in the field without making creative work should fall within the scope of protection of the present invention.

[0039] Furthermore, in the following description, descriptions of well-known structures and technologies are omitted to avoid unnecessarily obscuring the concepts disclosed in the present invention.

[0040] In the description of the present invention, it should be noted that, unless otherwise clearly specified and limited, the orientation or position relationship indicated by the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inside", "outside", etc. is based on the orientation or position relationship shown in the drawings, which is only for the convenience of describing the present invention and simplifying the description, and does 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 a limitation of the present invention. In addition, the terms "first", "second", and "third" are only used for descriptive purposes 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 it can be indirectly connected through an intermediate medium, or it can be a connection between the 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 shown in the accompanying drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Instead, they are merely examples of methods and systems consistent with some aspects of the present invention as detailed in the appended claims.

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

[0043] Pagination 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 data rendering method combining paging request and preloading, comprising the following steps:

[0046] S1, when the outermost data structure is requested for the first time, the initial loading only renders the top-level node information of the outermost layer; when the user's request for the next level node is further received, the corresponding deep-level child node data is loaded and rendered as the user scrolls or clicks to expand the node, so as to realize batch rendering based on paged requests.

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

[0048] In summary, the present invention renders the tree data in batches in the form of paging requests, and then requests the deep sub-node data of the node after the user manually clicks on a node. This method not only reduces the rendering time of the initialization page and the interface response time, but also avoids the problem of page performance degradation and poor user experience caused by rendering massive data at one time.

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

[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; according to 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 key-value pair set is constructed using the WeakMap constructor, and the reference addresses of each DOM of the tree are stored in the key-value pair set. The data object of each node is used as the key, and the node DOM is used as the value. Because the key-value pair set constructed by WeakMap is a weak reference, memory overflow can be avoided. WeakMap is specially designed for managing key-value pairs, and its performance is better than Object in high-frequency read and write operations such as tree operations.

[0052] The present invention determines the number of tree nodes to be rendered by calculating the height of the tree's nearest visible parent container, thereby 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 visible parent container, determines whether to trigger the next paging request based on the degree of intersection, and implements preloading of the tree node 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 degree 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 degree between the judgment tree node and the visual parent container reaches the intersection threshold, the next paging data is requested and the DOM node is constructed. The node subordinate data is requested and rendered in paging form.

[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 order 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, triggers the next paging request by monitoring the intersection of tree nodes and visual parent containers, and realizes the preloading of tree nodes in combination with JavaScript microtask queues. 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 executed in conjunction with a reasonable task queue, which has a positive impact on web page performance and user experience, and will not cause video playback to freeze or delay due to the rendering problem of the device tree. At the same time, since only the node content in the visible area is rendered, the user 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 one after another, gradually render a 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, and the number of DOM nodes that need to be rendered is increased or decreased based on the intersection of DOM nodes and parent containers combined with the dynamics of existing data sources.

[0062] In an embodiment of the present invention, a maximum number of DOM nodes is set to limit the number of nodes rendered simultaneously. WeakMap and existing data sources are used to dynamically manage DOM nodes. When new data arrives, the list of nodes to be rendered is calculated and updated according to the visible area of ​​the parent container and the size of the node. 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 the number of tree DOM nodes reaches the set maximum number due to continuous requests for paging data, the DOM to be rendered is dynamically increased or decreased based on the intersection of the DOM and the parent container and the existing data source. Compared with the traditional virtual list, the present invention does not need to perform complex top positioning calculations and monitor scroll events, which greatly improves the development efficiency and difficulty, and can effectively avoid page bugs caused by calculations and the performance consumption of the browser 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 taken out from the WeakMap cache object according to the filtered data source, assembled into a relational structure, and then rendered and constructed a new tree.

[0066] Specifically, create a Web Worker instance to perform data filtering operations in the background thread. When the user performs a keyword search, the search keyword and data source are sent to the Web Worker instance, and wait for it to return the filtered results. In the WebWorker, the corresponding nodes are filtered out from the existing data source, and in the main thread, the tree structure is updated according to the filtered data source and the DOM nodes cached in the WeakMap. That is, according to the filtered data source, the corresponding DOM is taken out from the WeakMap cache object, 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, and retrieve the corresponding DOM from the WeakMap cache object according to the filtered data source, assemble it into a relational structure, and then render a new tree. The relevant operations of the data source are executed in a separate thread to avoid blocking the main thread of the page. This optimized search function can improve search efficiency, reduce user waiting time, and improve user experience.

[0069] In view of the problems of slow rendering of massive tree-type data and poor page performance, the tree-type data rendering method combining paging request and preloading provided by the present invention requests the rendering of tree-type data in batches in the form of paging request, thereby improving the interface response speed and the rendering speed of the initialization tree interface. The number of tree nodes to be rendered is determined by calculating the height of the tree's most recent visible parent container, rather than rendering in full. In addition, the next paging request is triggered by monitoring the intersection of the tree node and the visible parent container. The preloading of the tree node can be achieved by combining the threshold of the intersection with the JavaScript microtask queue, thereby reducing the waiting time of the user interface. Efficient tree-type data rendering is achieved, and the page response speed and user experience are improved.

[0070] The method of the present invention greatly improves the speed and efficiency of rendering massive tree-type data through paging request and preloading technology, reduces the delay and jamming of users in the process of waiting for data loading, and improves user experience. Loading is triggered by container crossing threshold, and there is no need to frequently monitor scroll bar events and calculate absolute positioning top values ​​to render pages, effectively avoiding page layout confusion and logic problems caused by monitoring and calculation.

[0071] The tree-type data rendering method combining paging request and preloading provided by the present invention can be applied in scenarios where a large amount of data needs to be processed, such as video control operation panel, alarm task creation, equipment organization relationship display, etc.

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

[0073] When a user performs a keyword search, the present invention filters out corresponding nodes from an existing data source, retrieves the corresponding DOM from a weakMap cache object based on the filtered data source, and renders a new tree after assembling it into a relational structure in a background thread, thereby quickly responding to the user's search operation and avoiding blocking the main task.

[0074] The present invention triggers the preloading condition by the intersection of the node and the parent container, and does not need to frequently monitor the scrolling event. Compared with the traditional virtual scrolling, it does not need to perform top positioning calculation, which can effectively avoid the page bug caused by calculation and the performance consumption of the browser by event monitoring.

[0075] The preloading solution based on the cross threshold and the task queue can reasonably schedule page resources, improve the smoothness of data loading and user perception experience. In WeakMap, object data is used as the key to associate data with DOM. This is very helpful for tree data rendering, which requires searching DOM through data and searching data through DOM. It can quickly help users find data in the application. Use weak references to store data sources to avoid memory leaks. WeakMap is specially designed for managing key-value pairs. In high-frequency read and write operations such as tree operations, its performance is better than Object. When searching for keywords, WebWorker can be used to execute the construction process of tree data in the background thread to avoid blocking the UI rendering of the main thread.

[0076] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the embodiments of the present invention, rather than to limit them. Although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions recorded in the above embodiments, or replace some of the technical features therein by equivalents; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention. Any changes or replacements that can be easily thought of by those skilled in the art within the technical scope disclosed in the present invention should be covered within the protection scope 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 requested for the first time, the initial loading only renders the top-level node information of the outermost level; When receiving a request for a node at the next level from the user, the user scrolls or clicks to expand the node, and then loads and renders the corresponding deep-level child node data to achieve batch rendering in a paged request style; S2, calculates the number of tree node DOMs that need to be rendered based on the visible area of ​​the parent container; S3, monitoring the intersection degree between the tree node and the visual parent container, judging whether to trigger the next paging request according to the intersection degree, and realizing preloading of the tree node in combination with the JavaScript micro-task queue, including: setting an intersection threshold, when judging 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 the current data and rendering it, so as to realize preloading; S4, according to the paging requests that come one after another, gradually render a corresponding number of tree-shaped DOM nodes until the number of DOM nodes reaches a 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; 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 taken out from the WeakMap cache object according to the filtered data source, assembled into a relational structure, and then rendered and constructed a new tree.

2. According to claim 1, a tree data rendering method combining paging request and preloading 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; according to 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 data rendering method combining paging request and preloading according to claim 2 is characterized in that: The method of associating the data object of each node of the tree with the corresponding DOM node by using WeakMap 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.

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

5. The tree data rendering method combining paging request and preloading according to claim 1, 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 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 visible parent container reaches the intersection threshold, the next page data is requested and a DOM node is constructed.

7. The tree 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 the DOM nodes and the parent container and the dynamics of the existing data source.

8. The tree 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 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 the 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 according to the filtered data source and the DOM nodes cached by WeakMap.

10. The tree 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