How can JavaScript display tens of thousands of data records and tens of thousands of javascript records at a time?

How can JavaScript display tens of thousands of data records and tens of thousands of javascript records at a time?

A colleague told everyone that he saw an interview question on the Internet: "If tens of thousands of data entries are sent to the front-end in the background, how can the front-end be rendered to the page ?", How to answer? As a result, the Office was boiling, and my colleagues discussed it. You can say your own solution in a word. Some say that the html generated by direct loop traversal is inserted on the page; some say that the page should be used for processing; others say that the interviewer is an idiot, how can I transmit tens of thousands of pieces of data to the front-end? I thought over it, no matter whether the back-end will be an idiot or not, passing tens of thousands of pieces of data to the front-end. If this happens, after the front-end obtains the data, it will directly convert the data into an html string and insert it to the page through the DOM operation, which will inevitably cause choppy page running, for this reason, I also specially wrote a demo for testing. The Code is as follows:

$. Get ("data. json ", function (response) {// response contains about 0.13 million pieces of data loadAll (response) ;}; function loadAll (response) {var html = ""; for (var I = 0; I <response. length; I ++) {var item = response [I]; html + = "<li> title:" + item. title + "content:" + item. content + "</li>" ;}$ ("# content" ..html (html );}

Data. json contains about 0.13 million pieces of data. After ajax is used to obtain the data, the data is displayed in the simplest and most crude way. In chrome browser, refresh the page to display the data, the whole process took about 5 seconds, and the choppy was very obvious. I roughly observed the running time of the code and found that the process of generating strings cyclically is not too time-consuming. The performance bottleneck is the process of inserting html strings into the document, that is, $ ("# content" into .html (html); after all, 0.13 million li elements are stored in the document, the slow page rendering speed is also reasonable.

Since rendering 0.13 million pieces of data at a time will lead to slow page loading speed, we can not render so much data at a time, but batch rendering, such as 10000 pieces at a time and 13 pieces at a time, this may increase the page rendering speed. However, if these 13 operations run in the same code execution process, it does not seem to be able to solve the problem of poor page freezing, but will complicate the code. The best solution for similar problems in other languages is multithreading. Although Javascript does not have multithreading, setTimeout and setInterval functions can achieve the same effect as multithreading. Therefore, to solve this problem, the setTimeout can be used. The setTimeout function can be considered to start a new thread after a specified time to complete the task.

$. Get ("data. json ", function (response) {// response contains about 0.13 million pieces of data loadAll (response) ;}; function loadAll (response) {// group 0.13 million pieces of data, 500 entries in each group, a total of 260 groups var groups = group (response); for (var I = 0; I <groups. length; I ++) {// closure to keep the I value correct window. setTimeout (function () {var group = groups [I]; var index = I + 1; return function () {// batch rendering loadPart (group, index );}} (), 1) ;}}// Data grouping function (500 entries in each group) function group (d Ata) {var result = []; var groupItem; for (var I = 0; I <data. length; I ++) {if (I % 500 = 0) {groupItem! = Null & result. push (groupItem); groupItem = [];} groupItem. push (data [I]);} result. push (groupItem); return result;} var currIndex = 0; // function loadPart (group, index) {var html = ""; for (var I = 0; I <group. length; I ++) {var item = group [I]; html + = "<li> title:" + item. title + index + "content:" + item. content + index + "</li>" ;}// ensure the order is good. while (index-currIndex = 1) {$ ("# content "). append (html); currIndex = index ;}}

The general execution process of the above Code is

1. Get the data to be processed using ajax, with 0.13 million entries in total

2. group the arrays. There are 500 entries in each group. There are 260 groups in total.

3. Loop the 260 sets of data, process each set of data separately, and use the setTimeout Function to start a new execution thread (asynchronous) to prevent the main thread from being blocked by rendering a large amount of data.

This code is included in the loadPart function.

while (index - currIndex == 1) { $("#content").append(html); currIndex = index;}

It is to ensure the consistency of the sequence in which html is finally inserted into the document in different threads, so that the Code executed at the same time does not have to steal each other when html is inserted.

In this way, the page is flushed out instantly without any waiting time. From synchronous to asynchronous, although the overall resource consumption of the Code increases, the page can respond instantly, and the front-end running environment is the user's computer, therefore, the user experience improvement caused by some performance loss is relatively worthwhile.

Although the situations mentioned in the example are almost impossible to appear in the real environment, there will always be some plausible scenarios in our daily work, and we will use the processing ideas in them, it may be helpful for us to solve the problem.

Ps:SetTimeout is not a real multi-thread, but it uses the word thread for convenient expression.

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!