まず、ここでいう応答速度とは、ページUIの応答速度を指し、1つのユーザーインタフェースにとって、評価が速い基準は何ですか.
ユーザーは速いほうが速いと思います.

UIスレッドの最適化

結局、製品は最終的にユーザーに使用されているので、自分の製品に対してどんな最適化をしても、ユーザーの手の中で使いやすいのは使いやすいので、速いのは速いですが、あなたの開発者がそれがどんな技術を使っているのかではありません.では、ウェブページでは、どのようにして速く見えるのでしょうか.
ユーザーインタフェースの応答速度を向上させるには、一般的に2つの方法があります.

コード品質を向上させ、応答速度を向上させる.

はユーザーにあなたが速いと感じさせます.

応答速度を向上させるには、まずブラウザのUIスレッドについてお話しします.

ブラウザUIスレッド

これは、JavaScriptを実行したり、ユーザーインタフェースを更新したりするプロセスです.
UIスレッドは単純なキューシステムに基づいており、すべてのタスク(UI更新、JavaScript実行)がタスクキューに格納され、タスクはプロセスがアイドルになるまでキューに保存され、アイドルになるとキュー内の次のタスクが再抽出されて実行されます.つまりブラウザにとって、ページに現れるすべてのことは、jsを実行したり、ページを再描画したりするのに1つ1つです.
『You Don't Know JavaScript:Type&Grammar,Async&Performance』の偽コードを引用して、この概念を説明します.

//eventLoop          
var eventLoop = [];
var event;

//'  '  
while(true){
  if(eventLoop.length>0){
    event = eventLoop.shift();
    try{
      event();
    }
    catch(err){
      reportError(err);
    }
  }
}

このコンセプトコードと組み合わせて、実際に私たちのページで発生したすべての操作、リソースの読み取り、解析、ページのレンダリング、jsの実行など、これらのタスクはすべてキューに並んで実行されます.UIスレッドがタスクを実行している間に、ユーザーがこの時点で対話していると、UIが即時に更新されていない可能性があり、UIの更新タスクが作成されない可能性があります.私たちは普段からクリックしても反応せず、ボタンもフィードバックしていないので、UIスレッドが忙しい状態です.
このような場合、jsの実行時間が長すぎるため、現在のブラウザでは実行時間が制限されている場合があり、時間を超えるとプロンプトボックスがポップアップします.このような状況はやはり遭遇する回数が多いと思います==;
単一jsの操作に100 msを超える時間を費やすべきではないという歴史的研究がかなり多い.
私たち自身がウェブページを使っているときも感じますが、私はこのボタンをクリックしてしばらくしてから反応して、完全にこのサイトが遅い感じを与えました.

タイマーを使用してUIスレッドを呼び出す

単一のjsタスクは100ミリ秒以内に完了する必要がありますが、時間がかかるタスクもあります.この場合、タイマを使用してUIスレッドの使用権を譲ることができます.他の人のコードを見たときにsettimeoutタスクを設定したことがあるはずですが、遅延して設定された低い使い方です.これはタイマを使用してUIスレッドを譲ることです.
まず、タイマが遅延するタスクをイベントループキューに追加することはありません.タイマを設定した後、遅延するタスクをキューに追加するだけです.これもタイマの精度が低い可能性があります.時間になると、前に多くのタスクが実行されていない場合は、待つしかありません.

ループの代わりにタイマーを使う

そんなに多く言って、どのような情況の下でタイマーでコードのブロックの分割の運行の最適化をすることができて、とてもよくあるjsの運行時間が長すぎる例は循環で、一部の循環処理関数は複雑すぎてあるいは循環源の大きさが大きすぎて、私達は使用することができて、しかしこれも前述したので、タイマーを使って循環に取って代わって2つの条件を満たす必要があります:処理過程は同期する必要はなくて、データは順序によって処理する必要はありません.この2つの条件を満たすと、簡単な関数を書くことができます.

function processArray(items,process,callback){
  var todos = item.concat();
  setTimeout(function(){
    process(tudos.shift());
    if(tudos.length>0){
      setTimeout(arguments.callee,25);
    }else{
      callback(items);
    }
  })
}

この関数を呼び出して配列に入力すれば、処理方法と完了したループ完了のコールバック関数は、本来のループ時間を変化させるが、ループのたびにUIスレッド(上のタイマがUIスレッドを譲って説明している)を譲り、長いループ全体がUIスレッドを占めてブラウザをロックすることは言うまでもなく、実際の処理時間は長くなったが、ユーザーにとってはもっと速く感じられる.
このタイマの使用は、タスクの分割にも使用できます.実行時間が長すぎる関数を複数の関数に分割して、UI応答速度を速めることができます.
複数の繰り返しタイマを同時に作成すると、すべてのタイマがUIスレッドをプリエンプトしてパフォーマンスに問題が発生することに注意してください.複数のタイマを同時に作成するのではなく、1つのタイマを使用して複数回の操作を行うことが望ましいです.

Web Workerの使用

この機能はjsがマルチスレッドのように動作する機能を提供するものであるが,実際にはそうではない.
まず知っておきたいのは、HTML 5のWeb Workerという特性はホスト機能、すなわちブラウザが提供する機能に属しており、それ自体はJavaScript言語とは関係なく、JS自体にマルチスレッド実行をサポートする機能はありません.
ブラウザ環境では、複数のJavaScriptエンジンインスタンスを提供し、それぞれ独立したスレッドを実行できます.Web workerを使用すると、プログラムを複数のブロックに分割して同時実行することができます.
Web Workerは、通常、次のいくつかの態様で使用されます.

処理密集型数学計算

ビッグデータセットソート

データ処理(圧縮、オーディオ分析、画像処理等)

高トラフィックネットワーク通信from『You Don't Know JavaScript:Type&Grammar,Async&Performance』

ワークをインスタンス化するのは簡単です:var worker1 = new Worker('http://aa.com/b.js')// url js ;
このファイルがWorkerにロードされると、ブラウザは独立したスレッドを起動してWorkerを実行します.
Web workerでは、ほとんどの標準javascriptプロパティが使用されています.

Navigator

XMLHttpRequest

Array, Date, Math, and String

WindowTimers.setTimeout and WindowTimers.setInterval

完全なWeb Workerの使い方は参考にできますhttps://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
Worker間およびプライマリ・プログラム間では、役割ドメインまたはリソースは共有されません.これらの連絡は、基本的なイベント・メッセージ・メカニズムに依存して相互に連絡されています.
Web Worker間のデータ転送
WorkerとWebページのイベントインタフェースによる通信

WebページコードpostMessage()を使用してWorkerにデータを渡す

Workerは、messageイベントを登録することによってウェブページから伝達されたデータworker.onmessage = function(event){}を受信することができ、伝達されたデータはeventを通過することができる.dataアクセス先.これは唯一のWebページとWorkerの通信ルートです.

Web Workerの使用シーンとブラウザのサポートは限られていますが、今では大きなデータを処理したり、UIに関係のない長時間実行スクリプトを処理したりして、大量の文字列を変換したり、ビッグデータセットの検索ソートをしたりするのが一般的です.

ページ要素のレスポンス処理

これは主にユーザー体験の観点から「欺瞞的」にサイトの速度に対するユーザーの印象を高めることです.
ユーザがプログラムと対話するとき,プログラムは直ちに応答しなければならない.
コアは上の文で、すぐに応答を与えて、あなたのプログラムがすぐにタスクを処理することを意味しないで、すぐにフィードバックをしなければなりません.このフィードバックは一般的にトリガインタラクティブ要素の外観を変えることができます.最も一般的なのは、トリガ可能なボタンに様々な状態を追加することです.トリガされていない、トリガされていない、トリガされた後に外観の変化があるほうがいいです.これはユーザーにとって最も直感的で、トリガされたときにタスクが完成するかどうかにかかわらず、すべて直ちに対応する状態を与えてユーザーに私の操作が成功したことを知って、処理して、処理して、フィードバックを与えないインタラクティブな過程はユーザーにどんな問題が発生したと思わせます.