Tree component optimization method and system for processing mass data
By shooting the data of the tree structure into a flat format and rendering only the data in the visual area, the problem of lag in massive data processing is solved, and the performance and user experience of front-end applications are improved.
Patent Information
- Application Number
- CN202411415600.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-11
- Publication Date
- 2025-02-14
AI Technical Summary
When processing tree components with massive data, the existing technology has lag problems, especially when there are too many levels and data, clicking to expand and collapse will cause abnormal page stuttering.
Using virtual list technology, the original data of the tree structure is flattened into a flat data structure, and only the data in the visual area is rendered, and the page scrolling effect is achieved by simulating the scroll bar position.
It greatly shortens the rendering time, reduces unnecessary DOM operations, solves the problem of lag in tree groups when processing massive data, and improves the performance and user experience of front-end applications.
Smart Images
Figure CN119440474A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of front-end development technology, and in particular to a tree component optimization method and system for processing massive data. Background Art
[0002] Large-scale data processing is one of the major challenges in the modern information age. With the rapid development of the Internet, the Internet of Things, and big data technologies, we are faced with an increasing amount of massive data that needs to be processed and analyzed efficiently.
[0003] Front-end methods for processing large amounts of data include paging, lazy loading, using virtual lists, data analysis and filtering, back-end processing, and using indexes and caching. Choosing the right method depends on the specific situation, taking into account performance, user experience, and development complexity.
[0004] When processing massive amounts of data, many problems arise. For example, when there are too many levels and data in the el-table tree-like table, there will be lag when clicking to expand or collapse. The large amount of data causes abnormal page lag. When there are too many levels and data in the el-table tree-like table, there will be lag when clicking to expand or collapse. This is because when there are too many levels and data, too many DOM elements will be rendered, resulting in lag.
[0005] When the el-table tree-like table loads all data at once, all collapsed elements are already loaded, but the style is display:none; when clicking to expand, the display style changes, because the element position changes, the page reflows, and there are many elements, so the overhead is high. Even if the lazy loading method is adopted, the processing method of sending a backend request to load data when clicking to expand has disadvantages; this method will also cause lag when too much expansion and too much DOM loading.
[0006] In summary, as data processing requirements increase, optimizing performance when processing tree structures is essential. This is used in many scenarios when processing massive amounts of data.
[0007] Based on the above situation, the present invention proposes a tree component optimization method and system for processing massive data. Summary of the Invention
[0008] In order to overcome the defects of the prior art, the present invention provides a simple and efficient tree component optimization method and system for processing massive data.
[0009] The present invention is achieved through the following technical solutions:
[0010] A tree component optimization method for processing massive data, characterized by comprising the following steps:
[0011] Step S1: Using a virtual list to implement a virtual tree structure, that is, flattening the original data in the tree structure and converting the hierarchical data into a flat data structure for easier processing and display;
[0012] In step S1, a recursive method is used to flatten the tree-structured data into a flattened format, and the flattened data structure includes the name, ID and path information of each node of the original data of the tree structure.
[0013] Step S2: Calculate the data items in the visible list according to the virtual list, and update the display status of the data items (e.g., whether they are visible) so that the data in the visible area can be correctly displayed on the interface;
[0014] In step S2, by comparing the position and height of each data item with the position and height of the visible area, it is determined whether each data item is within the visible area; the implementation steps are as follows:
[0015] Step S2.1, obtaining the height and scroll position of the visible area, that is, obtaining the height of the visible area (usually the height of the browser window) and the position of the scroll bar (scrollTop);
[0016] Step S2.2, calculate the position (top) and height of each data item in the list;
[0017] Step S2.3: Determine whether the data item is within the visible area:
[0018] If the position (top) and height of a data item in the list are within the height of the visible area and the position of the scroll bar, the corresponding data item is considered to be in the visible area.
[0019] Step S3: Simulate the scrolling effect of the page by setting the scroll bar position scrollTop attribute of the container element.
[0020] In step S3, the scrolling process of the page is simulated by gradually increasing the value of the scroll bar position scrollTop;
[0021] Customize the scroll increment and scroll interval as needed to achieve different scrolling effects.
[0022] The tree component optimization system for processing massive data includes:
[0023] The flattening processing module is responsible for flattening the original data in the tree structure and converting the hierarchical data into a flat data structure for easier processing and display;
[0024] The data item management module is responsible for calculating the data items in the visible list according to the virtual list and updating the display status of the data items (for example, whether they are visible) so that the data in the visible area can be correctly displayed on the interface;
[0025] The simulated scrolling module simulates the scrolling effect of the page by setting the scroll bar position scrollTop property of the container element.
[0026] The flattening processing module uses a recursive method to flatten the tree-structured data into a flattened format. The flattened data structure includes the name, ID and path information of each node of the original data of the tree structure.
[0027] The data item management module determines whether each data item is within the visible area by comparing the position and height of each data item with the position and height of the visible area; the implementation steps are as follows:
[0028] Step S2.1, obtaining the height and scroll position of the visible area, that is, obtaining the height of the visible area (usually the height of the browser window) and the position of the scroll bar (scrollTop);
[0029] Step S2.2, calculate the position (top) and height of each data item in the list;
[0030] Step S2.3: Determine whether the data item is within the visible area:
[0031] If the position (top) and height of a data item in the list are within the height of the visible area and the position of the scroll bar, the corresponding data item is considered to be in the visible area.
[0032] The simulated scrolling module simulates the scrolling process of the page by gradually increasing the value of the scroll bar position scrollTop, and customizes the scroll increment and scroll interval as needed to achieve different scrolling effects.
[0033] A computing device, comprising:
[0034] One or more processors, one or more memories, and one or more programs, wherein the one or more programs are stored in the one or more memories and configured to be executed by the one or more processors, and the one or more programs include instructions for performing any of the above methods.
[0035] A readable storage medium is characterized in that: a computer program is stored on the readable storage medium, and the computer program implements the above method when executed by a processor.
[0036] The beneficial effects of the present invention are: the tree component optimization method and system for processing massive data use virtual lists to implement a virtual tree structure, only rendering data in the visible area, greatly shortening the rendering time, reducing unnecessary DOM operations, solving the problem of lag when the tree group processes massive data, and improving the performance of front-end applications and user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0037] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0038] Attachment Figure 1 Schematic diagram of the tree component optimization method for processing massive data according to the present invention. DETAILED DESCRIPTION
[0039] In order to enable those skilled in the art to better understand the technical solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the embodiments of the present invention. Obviously, the embodiments described are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work should fall within the scope of protection of the present invention.
[0040] Large amounts of tree-structured data can cause severe front-end page lag or even browser crashes. This is because components render all data at once. Excessive data volume and multiple nested layers increase the size of the DOM, leading to significant lag in rendering. Furthermore, the large number of recursive loops during tree expansion also leads to poor performance. To address this issue, only rendering data in the visible area can be used, significantly reducing rendering time.
[0041] The tree component optimization method for processing massive data includes the following steps:
[0042] Step S1: Using a virtual list to implement a virtual tree structure, that is, flattening the original data in the tree structure and converting the hierarchical data into a flat data structure for easier processing and display;
[0043] In step S1, a recursive method is used to flatten the tree-structured data into a flattened format, and the flattened data structure includes the name, ID and path information of each node of the original data of the tree structure.
[0044] Virtual lists are a technique used to optimize the performance of large or long lists, and are particularly common in front-end development. Virtual lists improve page performance and user experience by rendering only the list items within the visible area, rather than the entire list. The details are as follows:
[0045] 1) Performance Optimization: For lists containing large amounts of data, traditional methods of rendering all list items at once can lead to decreased page performance. Virtual lists only render list items within the visible area, reducing the rendering workload and improving page rendering performance.
[0046] 2) Scrolling optimization: The virtual list performs more smoothly when handling scrolling because it only needs to update the list items within the visible area without having to re-render the entire list.
[0047] 3). Memory optimization: Virtual lists can reduce memory usage because they only retain the data of list items within the visible area instead of retaining all list data.
[0048] 4) Fast rendering: Since the virtual list only focuses on the list items in the visible area, when the user scrolls the list, only the list items that have newly entered the visible area need to be updated, without re-rendering all the list items, thereby speeding up the rendering speed of the list.
[0049] Virtual list technology is very useful when processing lists of large data sets. It can improve page performance, reduce resource consumption, and improve user experience.
[0050] The principle of the virtual tree is as follows:
[0051] Virtual DOM structure: Virtual DOM is a lightweight in-memory tree data structure that describes the hierarchical structure of the real DOM. Each virtual DOM node contains information about its position on the page, attributes, and content.
[0052] Cost of DOM operations: Directly operating the real DOM is costly because each operation triggers page re-rendering. In order to reduce this cost, the concept of virtual DOM is introduced.
[0053] Comparison between virtual DOM and real DOM: When the page state changes, the front-end framework will first build a new virtual DOM tree in memory. Then, by comparing the differences between the new and old virtual DOM trees, it will find out the parts that need to be updated.
[0054] Differential updates: The framework will update only the parts of the real DOM that need to change based on the difference information, rather than re-rendering the entire page. This can reduce the number of DOM operations and improve page rendering performance.
[0055] Batch update: Virtual DOM technology also supports batch update, which combines multiple DOM operations into one update, reducing the number of page redraws and improving performance.
[0056] In general, virtual DOM technology optimizes page rendering performance by building a virtual DOM tree in memory and using differential updates, reducing unnecessary DOM operations and improving the performance and user experience of front-end applications.
[0057] The following is an example showing how to flatten the original data in a tree structure:
[0058] Assume we have the following tree-structured raw data:
[0059]
[0060]
[0061] Use a recursive method to flatten the tree-structured data into a flat format:
[0062]
[0063] The above code successfully flattens the original tree-structured data into a flattened data structure, preserving each node's ID, name, and path information. This conversion makes the data easier to process and display, making it suitable for a variety of data manipulation and display needs.
[0064] At this point, if this array is traversed and drawn on the page like list rendering, the order of the nodes obtained is consistent with the order of the nodes when the original data is rendered into a tree structure. The only difference is that the flattened data structure has no indentation and looks like a list, while the original data in the tree structure has indentation and looks like a tree.
[0065] Step S2: Calculate the data items in the visible list according to the virtual list, and update the display status of the data items (e.g., whether they are visible) so that the data in the visible area can be correctly displayed on the interface;
[0066] In step S2, by comparing the position and height of each data item with the position and height of the visible area, it is determined whether each data item is within the visible area; the implementation steps are as follows:
[0067] Step S2.1, obtaining the height and scroll position of the visible area, that is, obtaining the height of the visible area (usually the height of the browser window) and the position of the scroll bar (scrollTop);
[0068] Step S2.2: Calculate the position (top) and height of each data item in the list; this information is usually calculated in advance for subsequent use.
[0069] Step S2.3: Determine whether the data item is within the visible area:
[0070] If the position (top) and height of a data item in the list are within the height of the visible area and the position of the scroll bar, the corresponding data item is considered to be in the visible area.
[0071] Step S3: Simulate the scrolling effect of the page by setting the scroll bar position scrollTop attribute of the container element.
[0072] In step S3, the scrolling process of the page is simulated by gradually increasing the value of the scroll bar position scrollTop;
[0073] Customize the scroll increment and scroll interval as needed to achieve different scrolling effects.
[0074] The data is in a tree structure, which can be flattened on the front end for more efficient data processing and display. This simplifies data operations and reduces the complexity of recursive operations.
[0075] The tree component optimization system for processing massive data includes:
[0076] The flattening processing module is responsible for flattening the original data in the tree structure and converting the hierarchical data into a flat data structure for easier processing and display;
[0077] The data item management module is responsible for calculating the data items in the visible list according to the virtual list and updating the display status of the data items (for example, whether they are visible) so that the data in the visible area can be correctly displayed on the interface;
[0078] The simulated scrolling module simulates the scrolling effect of the page by setting the scroll bar position scrollTop property of the container element.
[0079] The flattening processing module uses a recursive method to flatten the tree-structured data into a flattened format. The flattened data structure includes the name, ID and path information of each node of the original data of the tree structure.
[0080] The data item management module determines whether each data item is within the visible area by comparing the position and height of each data item with the position and height of the visible area; the implementation steps are as follows:
[0081] Step S2.1, obtaining the height and scroll position of the visible area, that is, obtaining the height of the visible area (usually the height of the browser window) and the position of the scroll bar (scrollTop);
[0082] Step S2.2: Calculate the position (top) and height of each data item in the list; this information is usually calculated in advance for subsequent use.
[0083] Step S2.3: Determine whether the data item is within the visible area:
[0084] If the position (top) and height of a data item in the list are within the height of the visible area and the position of the scroll bar, the corresponding data item is considered to be in the visible area.
[0085] The simulated scrolling module simulates the scrolling process of the page by gradually increasing the value of the scroll bar position scrollTop, and customizes the scroll increment and scroll interval as needed to achieve different scrolling effects.
[0086] The computer-readable storage medium stores one or more programs, wherein the one or more programs include instructions, and when the instructions are executed by a computing device, the computing device is caused to perform any one of the above methods.
[0087] The computing device comprises:
[0088] One or more processors, one or more memories, and one or more programs, wherein the one or more programs are stored in the one or more memories and configured to be executed by the one or more processors, and the one or more programs include instructions for performing any of the above methods.
[0089] The embodiment described above is only one specific implementation of the present invention. Common changes and substitutions made by those skilled in the art within the scope of the technical solution of the present invention should be included in the protection scope of the present invention.
Claims
1. A tree component optimization method for processing massive data, characterized by: The following steps are involved: Step S1, using a virtual list to realize a virtual tree structure, that is, flattening the original data of the tree structure, and converting the data with a hierarchical relationship into a flat data structure for processing and display; Step S2, calculating the data items in the visible list according to the virtual list, and updating the display status of the data items so as to correctly display the data in the visible area on the interface; Step S3: Simulate the scrolling effect of the page by setting the scroll bar position scrollTop attribute of the container element.
2. The tree component optimization method for processing massive data according to claim 1, characterized in that: In the step S1, a recursive method is used to flatten the tree-structured data into a flattened format, and the flattened data structure includes the name, ID and path information of each node of the original data of the tree structure.
3. The tree component optimization method for processing massive data according to claim 1, characterized in that: In step S2, by comparing the position and height of each data item with the position and height of the visible area, it is determined whether each data item is within the visible area; the implementation steps are as follows: Step S2.1, obtaining the height and scroll position of the visible area, that is, obtaining the height of the visible area, that is, the height of the browser window, and the position of the scroll bar scrollTop; Step S2.2, calculate the top position and height of each data item in the list; Step S2.3: Determine whether the data item is within the visible area: If the top position and height of a data item in the list are within the height of the visible area and the position of the scroll bar, the corresponding data item is considered to be in the visible area.
4. The tree component optimization method for processing massive data according to claim 1, characterized in that: In step S3, the scrolling process of the page is simulated by gradually increasing the value of the scroll bar position scrollTop; You can customize the scroll increment and scroll interval as needed to achieve different scrolling effects.
5. A tree component optimization system for processing massive data, characterized by: include: The flattening processing module is responsible for flattening the original data in the tree structure and converting the hierarchical data into a flat data structure for easier processing and display. The data item management module is responsible for calculating the data items in the visible list according to the virtual list and updating the display status of the data items (e.g., whether they are visible) so as to correctly display the data in the visible area on the interface; The simulated scrolling module simulates the scrolling effect of the page by setting the scroll bar position scrollTop property of the container element.
6. The tree component optimization system for processing massive data according to claim 5, characterized in that: The flattening processing module uses a recursive method to flatten the tree-structured data into a flattened format, and the flattened data structure includes the name, ID and path information of each node of the original data of the tree structure.
7. The tree component optimization system for processing massive data according to claim 5, characterized in that: The data item management module determines whether each data item is within the visible area by comparing the position and height of each data item with the position and height of the visible area; the implementation steps are as follows: Step S2.1, obtaining the height and scroll position of the visible area, that is, obtaining the height of the visible area, that is, the height of the browser window, and the position of the scroll bar scrollTop; Step S2.2, calculate the top position and height of each data item in the list; Step S2.3: Determine whether the data item is within the visible area: If the top position and height of a data item in the list are within the height of the visible area and the position of the scroll bar, the corresponding data item is considered to be in the visible area.
8. The tree component optimization system for processing massive data according to claim 5, characterized in that: The simulated scrolling module simulates the scrolling process of the page by gradually increasing the value of the scroll bar position scrollTop, and customizes the scroll increment and scroll interval as needed to achieve different scrolling effects.
9. A computer-readable storage medium storing one or more programs, characterized in that: The one or more programs include instructions which, when executed by a computing device, cause the computing device to perform any one of the methods according to claims 1 to 4.
10. A computing device, characterized in that: include: One or more processors, one or more memories, and one or more programs, wherein the one or more programs are stored in the one or more memories and are configured to be executed by the one or more processors, and the one or more programs include instructions for executing any of the methods according to claims 1 to 4.