JavaScript の単一スレッドを理解する timer_javascript スキル-jsチュートリアル-php.cn

JavaScript の単一スレッドを理解する timer_javascript スキル

WBOY

リリース： 2016-05-16 15:14:17

オリジナル

7766 人が閲覧しました

1. JavaScript エンジンはシングルスレッドです

以下のコードからわかるように、setTimeout を使用する最初のコードは無限ループであるため、次の 2 つのタイマーは実行されません。

<script type="text/javascript">
 setTimeout( function(){ while(true){} } , 100); 
 setTimeout( function(){ alert('你好!setTimeout'); } , 200); 
 setInterval( function(){ alert('你好!setInterval'); } , 200); 
</script>

ログイン後にコピー

ブラウザのカーネルはマルチスレッドであり、カーネルの制御下で相互に連携して、ブラウザには少なくとも 3 つの常駐スレッド (JavaScript エンジンスレッド、GUI レンダリングスレッド、ブラウザイベントトリガースレッド) が実装されています。。

JavaScript エンジンは、イベント駆動型のシングルスレッド実行に基づいています。JS エンジンは、タスクキュー内のタスクの到着を待ってから、それらを処理します。ブラウザには、JS プログラムを実行する JS スレッドが 1 つだけあります。時間。
GUI レンダリングスレッドは、ブラウザインターフェイスのレンダリングを担当します。このスレッドは、インターフェイスを再描画する必要がある場合 (Repaint)、または特定の操作によってリフローが発生した場合に実行されます。ただし、GUI レンダリングスレッドと JS エンジンは相互に排他的であることに注意してください。JS エンジンが実行されると、GUI スレッドは一時停止され、GUI の更新はキューに保存され、JS エンジンが実行されるとすぐに実行されます。アイドル。
ブラウザーのイベントトリガースレッド。イベントがトリガーされると、スレッドは保留キューの最後にイベントを追加し、JS エンジンによる処理を待ちます。これらのイベントは、JavaScript エンジンによって現在実行されているコードブロック (setTimeOut など)、またはブラウザカーネルの他のスレッド (マウスクリック、AJAX 非同期リクエストなど) から発生する可能性があります。ただし、JS のシングルスレッド関係により、すべてのイベントが発生します。これらのイベントは、JS エンジンによる処理のためにキューに入れられる必要があります。

上の図からわかるように、ブラウザーの JavaScript エンジンはイベント駆動型です。ここでのイベントは、ブラウザーによって割り当てられたさまざまなタスクとみなすことができます。JavaScript エンジンはタスクの到着を待っています。タスクキューでは、シングルスレッドの関係により、これらのタスクはキューに入れられ、エンジンによって次々に処理される必要があります。

t1、t2....tn は異なる時点を表し、tn の下にある対応する小さな四角はその時点のタスクを表します。

t1 時間:

1. GUI レンダリングスレッド
2. ブラウザイベントトリガースレッド:
t1 期間では、ユーザーが最初にマウスボタンをクリックします。このクリックはブラウザのイベントトリガースレッドによってキャプチャされ、マウスクリックイベントが形成されます。図からわかるように、このイベントは JavaScript エンジンスレッドに対して非同期に送信されます。タスクキューの最後では、エンジンが t1 でタスクを処理しているため、このマウスクリックイベントは処理を待機しています。
3. タイミングトリガースレッド:
ここでのブラウザモデルのタイミングカウンタは、JavaScript エンジンによってカウントされません。これは、JavaScript エンジンがブロックされたスレッド状態にある場合、時間の計測とトリガーのタイミングを外部に依存する必要があるためです。したがって、キュー内のタイミングイベントは非同期イベントです。
4. この t1 の期間中に、マウスクリックイベントがトリガーされた後、以前に設定された setTimeout タイミングも到着します。このとき、JavaScript エンジンに対して、タイミングトリガースレッドが非同期タイミングイベントを生成し、タスクキューに入れます。このイベントは、クリックイベントコールバックの後にキューに入れられ、処理を待機します。同様に、t1 期間内に setInterval タイマーも追加されます。これはインターバルタイマーであるため、これら 2 つのイベントはキューの最後にキューに入れられます。処理される。
5. Ajax 非同期リクエスト:
ブラウザは新しい http スレッドリクエストを開きます。コールバックが事前に設定されている場合、リクエストのステータスが変化すると、非同期スレッドはステータス変更イベントを生成し、JavaScript エンジンの処理キューに入れて処理を待ちます。
2. タスクの実行順序が異なり、表示結果も異なります

1) setTimeout 関数は使用されません

ここでは、インターネット上にあるコード例を使用して説明します。

<a href="#" id="doBtn">do something</a>
<div id="status"></div>
<script type="text/javascript">
  var doBtn = document.getElementById('doBtn')
   , status = document.getElementById('status');

  function sleep(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn.onclick = function(e) {
   status.innerHTML = 'doing...please wait...'; 
   sleep(3000); // 模拟一个耗时较长的计算过程，3s
   status.innerHTML = 'done'; 
   return false;
  };
</script>

ログイン後にコピー

上記のコードをFirefoxで実行しました。計画では、「何かをする」ボタンをクリックし、次に「実行中...お待ちください...」を表示し、次にスリープを実行し、最後に「完了」を表示する予定です。

しかし、結果として、クリック後、ブラウザは約 3 秒間停止し、最終的には直接完了と表示されます。

分析によると、status.innerHTML を設定する場合、GUI レンダリングスレッドを実行する必要がありますが、JavaScript エンジンスレッドは引き続き実行され、JavaScript エンジンスレッドと GUI レンダリングスレッドは相互に排他的であることがわかります。したがって、最後に「done」が表示されます。

2) setTimeout 関数を使用します

<a href="#" id="doBtn2">do something timer</a>
<div id="status2"></div>
<script type="text/javascript">
  var doBtn2 = document.getElementById('doBtn2')
   , status2 = document.getElementById('status2');

  function sleep2(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn2.onclick = function(e) {
   status2.innerHTML = 'doing...please wait...'; 
   setTimeout(function() {
   sleep2(3000); 
   status2.innerHTML = 'done'; 
   }, 100); 
   return false;
  };
</script>

ログイン後にコピー

「doing...please wait...」の後に setTimeout を追加して実行を遅らせ、ブラウザにレンダリング時間を与えます。このとき、「doing...please wait...」という文字が表示されます。次にスリープ機能を実行し、最後に「done」を表示します。

一部のネットユーザーは、この問題が Firefox では機能しないことに気づきました。その後、私はコードを修正し、ページ構造がロードされた後にローカル変数の宣言と onclick のバインディングを追加しました。、、スクリプト操作を再度実行します。

<script type="text/javascript">
  function sleep(ms) {
  //...
  }
  window.onload = function() {
   var doBtn = document.getElementById('doBtn'),
   status = document.getElementById('status');
   
   var doBtn2 = document.getElementById('doBtn2')
    , status2 = document.getElementById('status2');
    
   doBtn.onclick = function(e) {
    //...
   };
   doBtn2.onclick = function(e) {
    //...
   };
  };
</script>

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。