“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

background

Interview question: how do you render 100,000 pieces of data from the background to the front end?

Answer person A: I have A sentence to do not know when say improper say, this what ghost demand.

Answer person B: Roll, back end, I don’t want such data, you can’t give me paging.

Answer C: 100,000 data this how to show, show also can’t finish ah.

Analysis:

Since the interviewer can ask this question, let’s explore the question from a technical point of view and get started:

function loadAll(response) { var html = ""; for (var i = 0; i < 100000; I++) {HTML + = "< li > the title:" + 'I was testing + [I] + "< / li >"; } $("#content").html(html); }Copy the code

The chrome browser down here is very slow, very slow to refresh the page data, it takes about 10 seconds to render the page, it’s very slow, the performance bottleneck is in the process of inserting the HTML strings into the document, Also is $(” # content “). The HTML (HTML); The execution of this code, after all, has 100,000 Li elements to be inserted into the document, so the page rendering is understandably slow.

The solution

Since rendering 100,000 pieces of data at once will cause the page to load slowly, instead of rendering all the data at once, we can render it in batches, say 10,000 pieces at a time, in 10 batches, which may improve the rendering speed of the page. However, if these 13 operations are run in the same code execution process, it seems that far from solving the problem of poor page lag, it will complicate the code. The best way to solve this problem in other languages is to use multithreading. JavaScript does not have multithreading, but setTimeout and setInterval functions work just as well. So, to solve this problem, setTimeout is a great way to do it. The function of the setTimeout function can be thought of as starting a new thread after a specified time to complete the task.

Ajax requests... Function loadAll(response) {var group = group(response); for (var i = 0; i < groups.length; Window.settimeout (function () {var group = groups[I]; var index = i + 1; Return function () {// render loadPart(group, index); }} (), 1); }} 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; }}Copy the code

Think about:

Why would an interviewer ask such a question? Is there a need for that in reality? Let’s think about it from a technical point of view, which is looking at setTimetout. The interviewer is the same person. Of course, there are other solutions to this problem, which can be discussed in the comments section.

Popular past:

  • HTML + CSS interview: the front end of the interview in June 2021 | HTML + CSS
  • Js interview questions: 30 JS interview questions to help me sprint “20K”, rustling
  • Vue Interview questions: Answer these VUE interview questions correctly, am I a qualified intermediate front-end development engineer?
  • Interviewer: Can you write some basic operations of the list by hand