【11】JavaScriptスレッドメカニズムとイベントメカニズム

JavaScriptスレッド機構とイベント機構
一、プロセスとスレッド
プロセス(process)

プログラムは一回実行して、それは一面の独特なメモリの空間を占有します.

は、windowsタスクマネージャを介してプロセスを見ることができる.

スレッド(thread)

は、プロセス内の独立した実行ユニットである.

はプログラム実行の完全な流れである.

はCPUの最小スケジューリングユニットである.

プロセスとスレッドの図解
関連知識

アプリケーションは、あるプロセスのスレッド上で実行しなければならない.

プロセスの中に少なくとも1つのスレッドがあります.メインスレッドは、プロセスが起動したら自動的に作成されます.

のプロセスで複数のスレッドを同時に実行することもできます.プログラムはマルチスレッドで実行されていると言います.

プロセス内のデータは、複数のスレッドで直接共有されてもよい.

以上のプロセス間のデータは直接共有できない.

スレッド池(thread pool):複数のスレッドオブジェクトを格納する容器で、スレッドオブジェクトの繰り返し利用を実現する.

関連問題
(1)プロセスとマルチスレッドとは?

マルチプロセス実行:1つのアプリケーションは、複数のインスタンス実行を同時に開始することができます.

マルチスレッド:一つのプロセスで複数のスレッドが同時に実行されます.

(2)単スレッドとマルチスレッドの比較?

マルチスレッド

の利点:CPUの利用率を効果的に向上させることができる.

欠点:

は、マルチスレッドオーバーヘッドを作成する.

スレッド間のオーバーヘッドの切り替え.

デッドロックと状態同期問題.

シングルスレッド

の利点:プログラムの順序は簡単で分かりやすい.

欠点:効率が低い.

(3)JSはシングルスレッドですか?それともマルチスレッドですか?

JSはシングルスレッドで実行されています.

が、H5のWeb Workersを使用してマルチスレッドを実行することができる.

(4)ブラウザの実行はシングルスレッドですか?それともマルチスレッドですか?

ブラウザはマルチスレッドで動作します.

(5)ブラウザの実行はシングルプロセスですか?それともマルチプロセスですか?

には単一プロセスがあります.

旧版Firefox

旧版IE

には多くのプロセスがあります.

Chrome

新版Firefox

新版IE

ブラウザはどうやってマルチプロセスで実行されているかを確認しますか?

タスクマネージャ=>プロセス

二、ブラウザのカーネル
(1)ブラウザのカーネルは、ブラウザの実行をサポートする最も核心的なプログラムである.
(2)ブラウザのカーネルが異なる:

Chrome、Safari:webkit

Firefox:Gecko

IE:Trident

360、犬などの国内ブラウザ:Trident+webkit

(3)カーネルは多くのモジュールで構成されています.

メインスレッド

jsエンジンモジュール:jsプログラムのコンパイルと実行を担当する.

html、cssドキュメント解析モジュール:ページテキストの解析を担当する.

DOM/CSSモジュール:DOM/CSSのメモリ内の関連処理を担当する.

レイアウトとレンダリングモジュール:ページのレイアウトと効果の描画(メモリ内のオブジェクト)

を担当する.

分スレッド

タイマーモジュール:タイマーの管理を担当します.

DOMイベント応答モジュール:イベントの管理を担当する.

ネットワーク要求モジュール:サーバ要求を担当する(従来／ajax).

三、タイマーによる思考
(1)タイマーは本当にタイミングで実行されますか?

タイマーは、本当のタイミングで実行することを保証していません.

は一般的に少し遅れます.

     

document.getElementById('btn').onclick = function () {
  var start = Date.now()
  console.log('      ...')
  setTimeout(function () {
    console.log('      ', Date.now()-start)
  }, 200)
  console.log('      ...')
}

上記のコールバック関数に長時間のタスクを追加します.

document.getElementById('btn').onclick = function () {
  var start = Date.now()
  console.log('      ...')
  setTimeout(function () {
    console.log('      ', Date.now()-start)
  }, 200)
  console.log('      ...')
  //          
  for (var i = 0; i < 1000000000; i++) {}
}

結果:
同期タスクが完了したら、非同期タスクが実行されます.
(2)タイマーのコールバック関数は、ライン分けで実行されますか?

は、主スレッドで実行され、jsは単スレッドである.

(3)タイマーはどうやって実現されますか?

イベントサイクルモデル(後述).

四、JSは単一スレッドで実行されます.
(1)jsの実行がシングルスレッドであることをどう証明しますか?

setTimeout()のコールバック関数は、メインスレッドで実行される.

タイマー・コールバック関数は、ランスタックのコードが全部実行された後にのみ実行可能である.

(2)なぜjsは、マルチスレッドモードではなく、シングルスレッドモードを使用するのですか?

JavaScriptの単一スレッドは、その用途に関連している.

は、ブラウザスクリプト言語として、JavaScriptの主な用途は、ユーザとの対話と、動作DOMである.

これは単一スレッドしかないと決定しました.そうでないと複雑な同期問題をもたらします.
(3)コードの分類:

初期化コード

コールバックコード

(4)jsエンジン実行コードの基本的な流れ

は、初期化コードを先に実行します.いくつかの特別なコードが含まれています.コールバック関数(非同期実行)

設定タイマー

バインディング傍受

送信ajax要求

の後に、ある時点でコールバックコードが実行されます.

五、ブラウザのイベントサイクル(ポーリング)モデル
ブラウザのイベント循環モデルの原理図
関連の重要な概念
(1)実行スタック

execution stack

のすべてのコードはこの空間で実行されます.

(2)ブラウザのカーネル

browser core

jsエンジンモジュール(メインスレッドで処理)

他のモジュール(メイン/ライン処理)

(3)ジョブキュー(callback queue)task queue(4)メッセージ・キュー(callback queue)message queue(5)イベントキュー(callback queue) event queue(6)イベントポーリング

event loop

は、ジョブキューからコールバック関数を取り出して、実行スタックに処理する.

(7)イベント駆動モデルevent-driven interaction model(8)要求応答モデル request-response model実行プロセス
(1)すべてのコードの分類:

は、バインディングdomイベントの傍受を含み、タイマーを設定し、ajaxに要求されたコードを送信する実行コードを初期化する.

コールバック実行コード:コールバックロジックを処理します.

(2)jsエンジン実行コードの基本的な流れ:

イニシャルコード=>コールバックコード

(3)モデルの2つの重要な構成部分:

イベント管理モジュール

レガシー

(4)モデルの運転フロー:
(a)イニシャルコードを実行し、イベントコールバック関数を対応モジュールに渡して管理する.
(b)イベントが発生すると、管理モジュールは、コールバック関数とデータをコールバック列に追加します.
(c)最初のコードが実行された後(一定の時間がかかるかもしれない)のみ、コールバックキューのコールバック関数を介して実行されます.
六、H5 Web Workers(マルチスレッド)
紹介する

Web Workersは、HTML5が提供するJavascriptマルチスレッドソリューションである.

は、ユーザーインターフェースを凍結せずに、いくつかの大きな計算量のコードをWeb Workerによって実行することができます.

しかし、サブスレッドは完全にメインストリームによって制御され、DOMを動作させてはならない.したがって、この新しい標準はJavaScript単スレッドの本質を変えていない.
使用

関連API

Worker:コンストラクタは、線分路で実行されるjsファイルをロードする.

Worker.prototype.onmessage:他のスレッドを受信するためのコールバック関数.

Worker.prototype.postMessage:メッセージを他のスレッドに送信する.

は、ライン分けで実行されるJSファイル

を作成する.

var onmessage = function (event){ //       
    console.log('onMessage()22');
    var upper = event.data.toUpperCase();//  event.data        
    postMessage( upper );//             
}

は、メインスレッド内のJSにメッセージを送信し、フィードバック

を設定する.

//    Worker                   URL
var worker = new Worker("worker.js");  
//  worker        
worker.onmessage = function (event) {     
    console.log(event.data);             
};
// worker    
worker.postMessage("hello world");    

図解
応用練習

          （Fibonacci sequence）   

F（0）=0，F（1）=1，..... F（n）=F(n-1)+F(n-2)

直接メインスレッドにいます.

var fibonacci =function(n) {
    return n <2 ? n : fibonacci(n -1) + fibonacci(n -2);
};
console.log(fibonacci(48));

は、Web Workersを使用してスレッドを分けている:

メインスレッド:

var worker = new Worker('worker2.js');
worker.addEventListener('message', function (event) {
    var timer2 = new Date().getTime();
    console.log('  ：' + event.data, '  :' + timer2, '  ：' + ( timer2 - timer ));
}, false);
var timer = new Date().getTime();
console.log('    : ', '  :' + timer);
setTimeout(function () {
    console.log('              ', '  :' + new Date().getTime());
}, 1000);
worker.postMessage(40);
console.log('            ', '  :' + new Date().getTime());

分スレッド:

var fibonacci =function(n) {
    return n <2 ? n : fibonacci(n -1) + fibonacci(n -2);
};
var onmessage = function(event) {
    var n = parseInt(event.data, 10);
    postMessage(fibonacci(n));
};

足りない

は遅いです

は、ドメインをまたいでJSをロードすることができません.

worker内のコードはDOMにアクセスできません.

は、各ブラウザがこの新機能をサポートしているわけではない.