JavaScript は一度に数万のデータサンプルコードを表示します

この記事では主に数万件のデータを一度に表示するためのJavaScriptの実装方法を紹介します。これは非常に優れた参考値です。編集者と一緒に見てみましょう

同僚は、インターネットでインタビューの質問を見たと皆に言いました。フロントエンドはそれをページ上にレンダリングしますか?」、どう答えるでしょうか? その結果、オフィスは騒然とし、あなたと私はそれについて一つずつ話し始めました。 直接ループして HTML を生成し、ページに挿入すべきだという人もいれば、インタビュアーはバカだ、どうやってバックグラウンドで何万ものデータをフロントエンドに送信できるだろうかという人もいました。よく考えてみた 一瞬、バックエンドが何万ものデータをフロントエンドに送信するほど愚かであるかどうかは関係ありません、そうなると、フロントエンドがデータを取得した後、フロントエンドがデータを取得します。データを HTML 文字列に直接変換し、DOM 操作を介して挿入すると、ページの実行に必然的に遅延が発生するため、テスト用のコードも作成しました。フォローします

$.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);
}

data.json には約 130,000 個のデータがあります。ajax でデータを取得した後、データを表示する最も簡単で大雑把な方法は、Chrome ブラウザーでデータを表示することです。プロセス全体に約 5 秒かかりましたが、遅れは明らかでした。 コードの実行時間を大まかに観察したところ、文字列を生成するループのプロセスは実際にはそれほど時間がかからないことがわかりました。パフォーマンスのボトルネックは、ドキュメントに HTML 文字列を挿入するプロセス ( $("#content") です)。 html(html); 結局のところ、このコードを実行するとドキュメントに 130,000 li 要素が挿入されるため、ページのレンダリング速度が遅くなるのは当然です。

130,000個のデータを一度にレンダリングするとページの読み込みが遅くなるため、一度にそれほど多くのデータをレンダリングすることはできませんが、一度に10,000個ずつレンダリングして13回で完了します。ページに影響を与える可能性があります。 レンダリング速度が向上しました。 しかし、これら 13 の操作を同じコード実行プロセスで実行すると、不良ページスタックの問題を解決できないだけでなく、コードが複雑になってしまうようです。 他の言語における同様の問題に対する最善の解決策は、マルチスレッドを使用することです。JavaScript にはマルチスレッドがありませんが、setTimeout と setInterval の 2 つの関数はマルチスレッドと同様の効果をもたらします。 したがって、この問題を解決するには、setTimeout が役立ちます。 setTimeout 関数の機能は、指定された時間の経過後にタスクを完了するために新しいスレッドを開始するとみなすことができます。

$.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;
  }
}

上記のコードの一般的な実行フローは、

1. ajax を使用して、合計 130,000 個の項目を取得します。

2. 配列をそれぞれ合計 500 個の項目にグループ化します。 260 のグループ

3. これらの 260 セットのデータをループし、各データ セットを個別に処理し、setTimeout 関数を使用して新しい実行スレッドを (非同期的に) 開始し、大量のレンダリングによってメイン スレッドがブロックされるのを防ぎます。データの。

このコード

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

は、html が最終的に異なるスレッドでドキュメントに挿入されるときの順序の一貫性を確保するために、loadPart 関数に含まれており、挿入時に同時に実行されるコードがお互いを奪い合うことはありません。 html。

このように実行すると、待ち時間なく瞬時にページが表示されます。 同期から非同期に変更すると、コード全体のリソース消費量は増加しますが、ページは即座に応答できます。また、フロントエンドの実行環境はユーザーのコンピューターであるため、わずかなパフォーマンスの低下によってユーザー エクスペリエンスが向上します。比較的価値があります。

例で挙げた状況は実際の環境ではほとんど起こりませんが、私たちの日常業務では、内部の処理アイデアを使用することが問題解決に役立つ可能性があります。

追記: setTimeout は実際にはマルチスレッドではありませんが、表現の便宜上、スレッドという言葉を借用しています

以上がJavaScript は一度に数万のデータサンプルコードを表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。