背景
インタビューの質問: [バックエンドは 100,000 個のデータをフロントエンドに渡しますが、フロントエンドとしてそれをページ上にどのようにレンダリングしますか? ]
回答者A：言っていいのか迷っていることがありますが、これはどのようなニーズですか？
回答者 B:あっちへ行ってください、バックエンド、この種のデータは要りません。ページングしてもらえませんか?
回答 C: 100,000 件のデータを表示するにはどうすればよいですか? すべてを見ることさえできません。
分析します:
彼はこれを尋ねることができるので、この質問を技術的な観点から検討して始めましょう。
function loadAll(response) {
var html = "";
for (var i = 0; i < 100000; i++) {
html += "<li>title:" + '我正在测试'+[i] + "</li>";
}
$("#content").html(html);
}
Chrome ブラウザは非常に遅れます。ページ データの更新に非常に遅れます。ページのレンダリングに約 10 秒かかります。遅れは非常に明らかです。パフォーマンスのボトルネックは、HTML 文字列をドキュメントに挿入するプロセスにあります。パフォーマンスのボトルネックHTML 文字列をドキュメントに挿入する処理中、つまり $("#content").html(html); の実行中です。結局のところ、ドキュメントに挿入される li 要素は 100,000 個あります。内部では、ページのレンダリング速度が遅いことは理解できます。
解決
一度に10万個のデータをレンダリングするとページの読み込みが遅くなるため、一度にそれほど多くのデータをレンダリングすることはできず、一度に1万個ずつレンダリングして10回で完了するなど、バッチでレンダリングすると影響を受ける可能性があります。ページのレンダリング速度が向上しました。しかし、これら 13 の操作を同じコード実行プロセスで実行すると、不良ページスタックの問題を解決できないだけでなく、コードが複雑になってしまうようです。他の言語における同様の問題に対する最善の解決策は、マルチスレッドを使用することです。JavaScript にはマルチスレッドがありませんが、setTimeout と setInterval の 2 つの関数はマルチスレッドと同様の効果をもたらします。したがって、この問題を解決するには、setTimeout が役立ちます。setTimeout 関数の機能は、指定された時間の経過後にタスクを完了するために新しいスレッドを開始するとみなすことができます。
ajax 请求。。。。
function loadAll(response) {
//将10万条数据分组， 每组500条，一共200组
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;
}
}
考える：
なぜ彼はそのような質問をするのでしょうか? 実際にそのような需要はあるのでしょうか? 技術的な観点から考えると、実際に setTimetout の知識ポイントを調べています。面接官は薬を変えずにスープだけ変えた。もちろん、この問題には実際には他の解決策もあり、コメント エリアで議論したり学ぶことができます。