深刻理解JavaScript執行（單線程的JS）

1、介紹

隨着js不斷深刻，你可能會慢慢的好奇，用了這麼久的js，殊不知道這js在瀏覽器怎麼被執行的，很尷尬，哈哈。因此，我查閱不少資料來總結JS的執行過程，也分享出來，和你們一塊兒學習。

本篇主要講單線程的JS
涉及的名詞：JS引擎，單線程，執行棧，執行上下文（execution context）

2、JS引擎

JS引擎是瀏覽器的重要組成部分，主要用於讀取並執行js。就是這傢伙執行js的，但它不止於執行js。

各大瀏覽器的JS引擎：

瀏覽器	Js引擎
Chrome	V8
Firefox	SpiderMonkey
IE	Chakra（查克拉）
Safari	Nitro/JavaScript Core
Opera	Carakan

雖然每一個瀏覽器的JS引擎都不一樣，但他們執行js機制大體相同。

3、JS執行是單線程

單線程是指Js引擎執行Js時只分了一個線程給他執行，也就是執行js時是單線程的。

先通俗的瞭解線程

• 有人可能會疑惑，線程是什麼？

我直接舉個直觀點例子吧，你打開一個瀏覽器(應用程序)，那瀏覽器就是一個進程。打開瀏覽器後要作不少事情(各類分工)：發送請求，接受請求，渲染頁面，執行js等等這些就是一個個線程。

我這裏只是簡單的說一下，具體的你們能夠找計算機操做系統資料深刻學習。

Js爲何是單線程

• 有可能有疑惑，爲何js執行要單線程，若是多線程不是能夠執行得快一點嗎？

這個要回到Js歷史了，布蘭登·艾奇(Brendan Eich)老哥用10天創造js。當時js用來幹嗎，簡單的瀏覽器交互，驗證，操做一下dom是吧。那把它設計成那麼複雜幹什麼，並且若是多線程的話，操做dom會出現麻煩的事情，假設一個線程讀取DOM節點數據的同時，另外一個線程把那個DOM節點刪了，呵呵。因此js一個線程就夠了，也就是一步一步順序運行下來。

證實一下js執行是單線程

單線程只能一個個排着隊執行，因此執行如下代碼會致使阻塞（有個while死循環），不會彈出hello

while(1){}
alert('hello');
複製代碼

4、執行棧

爲了實現js執行時的單線程，js引擎維護着一個執行棧。（先進後出）

來個例子：運行這段代碼時執行棧是怎麼作的。

//運行代碼
sayHello();
function sayHello(){
    var message = getMessage();
    console.log(message);
}
function getMessage(){
    return 'hello';
}

複製代碼

執行棧代碼模擬

//執行棧
var exeStack = [];
//先壓如全局執行環境
exeStack.push('globalContext');
//遇到執行sayHello函數，ok，壓進去
exeStack.push('sayHello');
//執行sayHello函數發現，還有個getMessage函數，ok，壓進棧
exeStack.push('getMessage');
//執行完了getMessage函數，彈棧
exeStack.pop();
//繼續執行sayHello函數，又發現有console.log這個傢伙，ok，你進棧
exeStack.push('console.log');
//執行了console後，輸出hello，console 彈棧
exeStack.pop();
//這時sayHello執行完，彈棧
exeStack.pop();
//最後整個代碼執行完，全局環境彈棧
exeStack.pop();
複製代碼

執行棧圖示：

這裏主要是js在執行時的一個整體過程，可是大家可能會疑惑，壓進棧裏面的一塊塊（抽象）東西到底包含的是什麼？
我能夠告訴大家是，執行上下文，global是指全局的的執行上下文，其餘的是函數執行上下文，那到底這些上下文包含什麼，我會在下一篇寫。

5、小結

這篇主要是將js單線程是什麼，而且怎麼實現單線程的。有個整體js執行過程的印象，接下來會講解更多裏面的東西。就像是挖掘機同樣，深挖下去。

若是你以爲困難，那也許就是在進步