Method capable of displaying millions of data lists on Web side

Abstract

The invention provides a method capable of displaying millions of data lists on a Web end, which comprises the following steps of: creating an additional independent thread by a Web end query main thread through WebWorker to relieve the pressure of the Web end query main thread, performing batch processing on data interfaces, firstly obtaining all primary key lists of query result data through a back-end interface, and then obtaining all secondary key lists of the query result data through the back-end interface; then grouping the primary key lists to obtain a data detail list, only rendering blocks which can be seen by a current window of a Web end page through a virtual DOM (Document Object Model) technology and a table block rendering technology of the Web end page, and if the scroll bar data is moved, carrying out incremental rendering loading at the same time. The method has the beneficial effects that millions of detail data lists can be checked on a Web end page in a manner of moving the scroll bar without being blocked.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a method capable of displaying a list of millions of data items on a Web terminal. Background Art

[0002] Web terminal refers to the web page terminal of the computer, also called the front end. Web (World Wide Web) is the global wide area network, also known as the World Wide Web. It is a global, dynamic, interactive, cross-platform distributed graphical information system based on hypertext and HTTP. It is a network service built on the Internet, which provides a graphical, easy-to-access and intuitive interface for viewers to find and browse information on the Internet. The documents and hyperlinks organize the information nodes on the Internet into an interconnected mesh structure. A web page is a page in a website. Usually, web pages are the basic elements of a website and are the platform for carrying various website applications. In layman's terms, a website is composed of web pages. The so-called website (Website) refers to a collection of related web pages on the Internet that are made according to certain rules using tools such as HTML to display specific content. Simply put, a website is a communication tool, just like a bulletin board, where users can publish or collect information.

[0003] In general, if a large amount of data is loaded at one time and there are many users at the same time, the pressure on the server will be greatly affected. At this time, it can be processed and displayed through paging. But sometimes users want to load more data on a page and view more data lists at the same time. In this way, paging cannot meet the needs of users. If the amount of data is too large, millions of data will be returned through an interface at one time. If there are multiple users querying at the same time, it will inevitably cause a strong load on the server and database. In severe cases, it may even cause the server and database to crash. Moreover, it not only takes up a lot of computing resources and memory resources of the back-end server, but also the rendering of a large number of nodes on the front end will cause the page to freeze. At this time, the front-end virtual scrolling list is generally used, but most virtual scrolling lists will also cause freezes or even cause the browser to freeze directly when the amount of list data reaches hundreds of thousands. Summary of the invention

[0004] In order to solve the problems in the prior art, the present invention provides a method for displaying a list of millions of data items on a Web side, which can realize the function of viewing a list of millions of detailed data items on a Web page by moving a scroll bar without any lag, thereby solving the problem in the prior art that displaying hundreds of thousands of data on a single page in a Web page list display will cause lag or even freezing.

[0005] A method for displaying a list of millions of data items on a Web terminal of the present invention comprises the following steps:

[0006] Step 1: According to the target to be queried, the user selects the query field in the client, enters the query condition value, and clicks Start Query;

[0007] Step 2: After the Web client receives the start query instruction, the Web client query main thread creates an additional independent thread through WebWorker;

[0008] Step 3: In the independent thread, call the backend interface to query the data, initiate a request through the backend interface to obtain all primary key lists of the query result data, and obtain the total number of all primary key lists of the query result data;

[0009] Step 4: The independent thread transfers the primary key list of the query result data in batches, calls the corresponding data detail interface respectively, and splices the returned detail data list;

[0010] Step 5: After the independent thread completes the processing of the detailed data list, it returns the notification of the completed detailed data list to the Web-side query main thread. After the Web-side query main thread receives the detailed data list, it starts to render and display the detailed data list on the Web-side page through the Web-side virtual DOM technology;

[0011] Step 6: When the rendering display of the Web query main thread fills the current window of the Web page, it will no longer continue to render the detail data list, but will continue to load the detail data list. After the user changes the current window of the Web page by moving the scroll bar, the Web query main thread continues to render and display the detail data list in the changed current window of the Web page, thus realizing the function of viewing a list of millions of detail data on a Web page by moving the scroll bar without lag.

[0012] The present invention is further improved, in step 2, the independent thread created by WebWorker does not affect the operation of the main query thread on the Web side.

[0013] The present invention is further improved in that in step 3, the backend interface only returns the primary key list of the query result data.

[0014] The present invention is further improved, in step 4, the data detail interface returns a corresponding detail data list according to the primary key list transmitted by the independent thread.

[0015] The present invention is further improved. In the step 5, when the Web-side query main thread renders, the table of the Web-side page is divided into several blocks, and the Web-side query main thread only renders the blocks visible in the current window of the Web-side page.

[0016] The present invention is further improved, in step 6, the Web-side query main thread can view the loading progress of the detail data list and the detail data list that has been loaded but not rendered.

[0017] The beneficial effect of the present invention is as follows: the present invention provides a method capable of displaying a list of millions of data items on a Web side, wherein the Web side query main thread creates an additional independent thread through WebWorker to reduce the pressure on the Web side query main thread, and at the same time, the data interface is processed in batches, and first, a list of all primary keys of the query result data is obtained through a back-end interface, and then these primary key lists are grouped to obtain a list of data details, and then, through the virtual DOM technology and the table block rendering technology of the Web side page, only the blocks visible in the current window of the Web side page are rendered, and if the scroll bar data is moved, the incremental rendering and loading will be performed at the same time, and the rendering time can be basically ignored, which is very smooth, greatly improving the response speed of the Web side page without causing the phenomenon of jamming, and solving the problem in the prior art that a single page displays hundreds of thousands of data items and causes jamming or even freezing. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 A flowchart of a method for displaying a list of millions of data items on a Web terminal according to the present invention;

[0019] Figure 2 The present invention is a flowchart of a method for displaying a list of millions of data items on a Web terminal. DETAILED DESCRIPTION

[0020] The present invention is further described in detail below with reference to the accompanying drawings and embodiments.

[0021] See also Figure 1-2 A method for displaying a list of millions of data items on a Web terminal of the present invention comprises the following steps:

[0022] Step 1: According to the target to be queried, the user selects the query field in the client, enters the query condition value, and clicks Start Query.

[0023] Step 2: After the Web end receives the start query instruction, the Web end query main thread creates an additional independent thread through WebWorker; the independent thread created by WebWorker does not affect the operation of the Web end query main thread. Among them, WebWorker is a function of HTML5, which allows JavaScript code to be run in the background thread so that other tasks can be performed in the main thread without affecting the responsiveness of the user interface. Web Worker enables a Web application to run a script operation in a background thread separated from the main execution thread. Its function is to create a multi-threaded operating environment for JS, allowing the main thread to create a worker thread and assign tasks to the latter. While the main thread is running, the worker thread is also running without interfering with each other. After the worker thread runs, the result is returned to the main thread. This allows the main thread to hand over computing-intensive or high-latency tasks to the worker thread for execution, so that the main thread will become relaxed and will not be blocked or slowed down. In this embodiment, the additional independent thread created by WebWorker can reduce the pressure on the Web end query main thread.

[0024] Step 3: In the independent thread, call the backend interface to query the data, initiate a request through the backend interface to obtain all primary key lists of the query result data, and obtain the total number of entries in all primary key lists of the query result data; among them, the backend interface temporarily only returns the primary key list of the query result data.

[0025] Step 4: The independent thread transmits the primary key list of the query result data in batches, calls the corresponding data detail interface respectively, and splices the returned detail data list; the data detail interface is used to return the corresponding detail data list according to the primary key list transmitted by the independent thread. In this embodiment, all primary key lists of the query result data are first obtained through a back-end interface, and then these primary key lists are grouped to obtain the data detail list, which can greatly reduce the pressure on the server and database. If millions of data are obtained at one time, it will be a great test for the back-end interface itself, the server and the database.

[0026] Step 5: After the independent thread completes splicing and processing the details data list, it returns the notification of the spliced ​​details data list to the Web-side query main thread. After the Web-side query main thread receives the details data list, it starts to render and display the details data list on the Web-side page through the Web-side virtual DOM technology; when the Web-side query main thread renders, it divides the table of the Web-side page into several blocks, and the Web-side query main thread only renders the blocks that can be seen in the current window of the Web-side page. Among them, Virtual DOM is a front-end development technology that uses JavaScript objects to simulate and describe the real DOM (Document Object Model) structure. Virtual DOM is not the DOM in the real browser. It is an abstract and lightweight DOM representation method. Virtual DOM exists in the form of JavaScript objects and contains information about DOM nodes, such as tag names, attributes, child nodes, etc. Its main purpose is to improve the performance and development efficiency of Web applications. Through Virtual DOM, developers can operate and modify the UI in memory, and then apply the final difference to the actual DOM, thereby reducing the frequency of DOM operations and improving rendering efficiency. Virtual DOM has been widely used in modern front-end frameworks and libraries, such as React, Vue.js, etc. In this embodiment, the Web end only renders the blocks visible in the current window of the Web end page through Virtual DOM technology and table block rendering technology of the Web end page. If the scroll bar data is moved, it will be incrementally rendered and loaded at the same time. The rendering time can be basically ignored, which is very smooth, greatly improving the response speed of the Web end page and will not cause jamming.

[0027] Step 6: When the Web-side query main thread renders and displays the full current window of the Web-side page, it will no longer continue to render the details data list, but will continue to load the details data list. After the user changes the current window of the Web-side page by moving the scroll bar, the Web-side query main thread continues to render and display the details data list in the changed current window of the Web-side page, realizing the function of viewing a million details data lists on a Web-side page by moving the scroll bar without freezing; the Web-side query main thread can view the loading progress of the details data list and the details data list that has been loaded but not yet rendered. In this embodiment, the Web-side query main thread can view the loading progress of the details data list that has not been loaded, and the Web-side query main thread can also view the details data list that has been loaded but not yet rendered, which will not cause the Web-side page to freeze. Since it takes a certain amount of time to load millions of data, the Web-side query main thread can actively view the data, which improves the user experience.

[0028] As can be seen from the above, the beneficial effects of the present invention are: the present invention provides a method for displaying a list of millions of data items on the Web side, in which the Web side query main thread creates an additional independent thread through WebWorker to reduce the pressure on the Web side query main thread, and at the same time processes the data interface in batches, first obtaining a list of all primary keys of the query result data through a back-end interface, and then grouping these primary key lists to obtain a list of data details, and then through the virtual DOM technology and the table block rendering technology of the Web side page, only the blocks visible in the current window of the Web side page are rendered, and if the scroll bar data is moved, the incremental rendering and loading will be performed at the same time, and the rendering time can be basically ignored, which is very smooth, greatly improving the response speed of the Web side page and not causing the phenomenon of jamming, and solving the problem in the prior art that a single page displays hundreds of thousands of data in the Web side page list display, causing jamming or even freezing.

[0029] The specific implementation modes described above are preferred implementation modes of the present invention, and are not intended to limit the specific implementation scope of the present invention. The scope of the present invention includes but is not limited to the specific implementation modes, and all equivalent changes made according to the present invention are within the protection scope of the present invention.

Claims

1. A method for displaying a list of millions of data items on a Web terminal, characterized in that: The following steps are included: Step 1: According to the target to be queried, the user selects the query field in the client, enters the query condition value, and clicks Start Query; Step 2: After the Web client receives the start query instruction, the Web client query main thread creates an additional independent thread through WebWorker; Step 3: In the independent thread, call the backend interface to query the data, initiate a request through the backend interface to obtain all primary key lists of the query result data, and obtain the total number of all primary key lists of the query result data; Step 4: The independent thread transfers the primary key list of the query result data in batches, calls the corresponding data detail interface respectively, and splices the returned detail data list; Step 5: After the independent thread completes the processing of the detailed data list, it returns the notification of the completed detailed data list to the Web-side query main thread. After the Web-side query main thread receives the detailed data list, it starts to render and display the detailed data list on the Web-side page through the Web-side virtual DOM technology; Step 6: When the rendering display of the Web query main thread fills the current window of the Web page, it will no longer continue to render the detail data list, but will continue to load the detail data list. After the user changes the current window of the Web page by moving the scroll bar, the Web query main thread continues to render and display the detail data list in the changed current window of the Web page, thus realizing the function of viewing a list of millions of detail data on a Web page by moving the scroll bar without lag.

2. The method for displaying a list of millions of data items on a Web terminal as claimed in claim 1, characterized in that: In step 2, the independent thread created by WebWorker does not affect the operation of the main query thread on the Web side.

3. The method for displaying a list of millions of data items on a Web terminal as claimed in claim 2, characterized in that: In step 3, the backend interface only returns the primary key list of the query result data.

4. The method for displaying a list of millions of data items on a Web terminal as claimed in claim 3, characterized in that: In step 4, the data details interface returns a corresponding detail data list according to the primary key list transmitted by the independent thread.

5. The method for displaying a list of millions of data items on a Web terminal as claimed in claim 4, characterized in that: In step 5, when the Web-side query main thread renders, the table of the Web-side page is divided into several blocks, and the Web-side query main thread only renders the blocks visible in the current window of the Web-side page.

6. The method for displaying a list of millions of data items on a Web terminal as claimed in claim 5, characterized in that: In step 6, the Web-side query main thread can view the loading progress of the detail data list and the detail data list that has been loaded but not rendered.

Images