JavaScript displays tens of thousands of data example codes at one time

This article mainly introduces the implementation method of JavaScript displaying tens of thousands of data at one time. It has a very good reference value. Let’s take a look at it with the editor.

A colleague told everyone that he saw an interview question on the Internet: "If the backend transmits tens of thousands of data to the front end, how will the front end do it?" Rendered to the page?", how to answer? As a result, the office was abuzz, and colleagues began to discuss it. You and I expressed our plans one by one. Some said that it should be directly looped to generate html and inserted into the page; some said that paging should be used; some said that the interviewer was an idiot, how could the background transmit tens of thousands of data to the front end? I thought about it carefully After a while, it doesn’t matter whether the back-end is stupid enough to send tens of thousands of data to the front-end. If this happens, then after the front-end obtains the data, it will directly convert the data into an html string and insert it through DOM operations. When reaching the page, it will inevitably lead to lag in the page operation. For this reason, I also specially wrote a demo to test it. The code is as follows

$.get("data.json", function (response) {
 //response里大概有13万条数据
 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);
}

There are about 130,000 in data.json About pieces of data, after obtaining the data through ajax, display the data in the simplest and crudest way. In the Chrome browser, refresh the page to display the data. I counted in my mind. The whole process took about 5 seconds, and it was very laggy. obvious. I roughly observed the running time of the code and found that the process of looping to generate strings is actually not too time-consuming. The performance bottleneck is the process of inserting HTML strings into documents, which is $("#content") .html(html); After all, there are 130,000 li elements to be inserted into the document when executing this code. It is reasonable that the page rendering speed is slow.

Since rendering 130,000 pieces of data at one time will cause the page to load slowly, we can not render so much data at once, but render it in batches, such as 10,000 pieces at a time and complete it in 13 times, like this It may improve the rendering speed of the page. However, if these 13 operations are run in the same code execution process, it seems that not only can it not solve the bad page stuck problem, but it will complicate the code. The best solution to similar problems in other languages ​​is to use multi-threading. Although Javascript does not have multi-threading, the two functions setTimeout and setInterval can have similar effects to multi-threading. Therefore, to solve this problem, setTimeout can come into play. The function of the setTimeout function can be seen as starting a new thread to complete the task after the specified time.

$.get("data.json", function (response) {
  //response里大概有13万条数据
  loadAll( response );
});

function loadAll(response) {
  //将13万条数据分组， 每组500条，一共260组
  var groups = group(response);
  for (var i = 0; i < groups.length; i++) {
    //闭包， 保持i值的正确性
    window.setTimeout(function () {
      var group = groups[i];
      var index = i + 1;
      return function () {
        //分批渲染
        loadPart( group, index );
      }
    }(), 1);
  }
}

//数据分组函数（每组500条）
function group(data) {
  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>";
  }
  //保证顺序不错乱
  while (index - currIndex == 1) {
    $("#content").append(html);
    currIndex = index;
  }
}

The general execution flow of the above code is

1. Use ajax to obtain the data that needs to be processed, a total of 130,000 pieces

2. Group the arrays into 500 items each, for a total of 260 groups

3. Loop through these 260 groups of data, process each group of data separately, and use the setTimeout function to start a new execution thread (asynchronously) to prevent the main The thread is blocked due to rendering large amounts of data.

There is this code in the loadPart function

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

to ensure the consistency of the order when html is finally inserted into the document in different threads, so as not to Codes executed at the same time usurp each other when inserting HTML.

By executing in this way, the page will be refreshed instantly without any waiting time. When changing from synchronous to asynchronous, although the overall resource consumption of the code increases, the page can respond instantly. Moreover, the running environment of the front-end is the user's computer, so the improvement in user experience brought by the slight performance loss is relatively worth it. .

Although the situations mentioned in the examples are almost impossible to occur in real environments, there are always some plausible scenarios in our daily work. Using the processing ideas inside may help us solve the problem. There is some help.

ps: setTimeout is not really multi-threaded, but for the convenience of expression, the word thread is borrowed

The above is the detailed content of JavaScript displays tens of thousands of data example codes at one time. For more information, please follow other related articles on the PHP Chinese website!