How JavaScript shows tens of thousands of data at once

Online to see an interview question: "If the background to the front tens of thousands of data, how to render the front end to the page?" "And how to answer?" So the office boiling, colleagues discussed open, you say a word I speak my plan. Some say that the direct loop to generate HTML plug into the page, some say it should be handled by paging, and that the interviewer is an idiot, which has tens of thousands of data to the front end of the situation; I think about it, regardless of whether the back end will be idiot to pass tens of thousands of data to the front end, if really encounter this situation, So if the front end gets to the data, directly convert the data into an HTML string, through the DOM operation inserted into the page, will inevitably cause the page to run, I also deliberately wrote a demo test, the code is as follows

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

$.get ("Data.json", function  (response)  {    //response There are about 130,000 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);} 

650) this.width= 650, "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

data.json, and data is presented in the simplest and most brutal way after getting data from Ajax. In the Chrome browser, refresh the page to the data display, my heart, the whole process of about 5 seconds or so of time, the lag is very obvious. I have a general look at the running time of the code, and found that the loop-generated string is not too time consuming, and the performance bottleneck is the process of inserting an HTML string into the document, that is, $ ("#content"). HTML (HTML); The execution of this code, after all, there are 130,000 Li elements to be taken into the document, the page rendering speed is also understandable.

Since rendering 130,000 data at a time will cause the page to load slowly, then we can not render so much data at once, but rather a batch of rendering, such as 10,000 at a time, divided into 13 times to complete, this may be the page rendering speed has improved. However, if these 13 operations run in the same code execution process, it seems that not only does it not solve the bad page lag problem, but it complicates the code. Similar problems in other languages the best solution is to use multi-threading, although JavaScript does not have multi-threading, but settimeout and setinterval two functions can play a similar effect with multithreading. Therefore, in order to solve this problem, the settimeout will be able to work. The function of the settimeout function can be thought of as starting a new thread after a specified time to complete the task.

650) this.width= 650, "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

$.get ("Data.json", function  (response)  {    //response There are about 130,000 data      loadall ( response );}); Function loadall (response)  {    //Group 130,000 data,  each group of 500, altogether 260 groups      var groups = group (response);    for  (var i =  0; i < groups.length; i++)  {         The closure,  maintains the correctness of the I Value         window.settimeout (function  ()  {             var group = groups[i];             var index = i +  1;            return function  ()  {                 //Batch Rendering                  loadpart ( group, index );             }        } (),  1);     }}// Data grouping functions (500 per group) Function group  {    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 Function loadpart ( group, index ) for loading a batch of data  {     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>";     }    //guaranteed order not garbled      while  (index - currindex == 1)  {         $ ("#content"). Append (HTML);         currindex = index;    }} 

650) this.width= 650, "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

< BR style= "margin:0px;padding:0px;" >1. Use Ajax to get the data that needs to be processed, a total of 130,000
2. Group the arrays, each group of 500, altogether 260 groups of
3. Cycle through these 260 sets of data, processing each set of data separately , use the SetTimeout function to open a new thread of execution (async) to prevent the main thread from blocking because of rendering large amounts of data.

loadpart function

while   (index - currindex == 1)  {    $ ("#content"). Append (HTML);     currindex = index;} 

is to ensure consistency in the order in which the HTML is eventually inserted into the document in different threads, so that code that executes at the same time will not be executed while inserting HTML.

In this way, the page is instantly brushed out without the slightest waiting time. From synchronization to asynchronous, although the overall resource consumption of the code increases, but the page can respond instantaneously, and the front-end environment is the user's computer, so a bit of performance loss brought about by the user experience is relatively worthwhile.

Although the example mentioned in the situation is almost impossible in the real world, but in our usual work there will always be some specious scenes, the use of the inside of the processing ideas, may be to solve the problem with some help.

How JavaScript shows tens of thousands of data at once