[[422053]]

前言

之前我們一直說要介紹下前端的知識點，一直沒空總結(jié)，這不來了;

js運行機制，來一篇總結(jié)

一、js的基礎(chǔ)知識點介紹

• js作為瀏覽器腳本語言，它的主要用途是與用戶互動，以及操作DOM，因此js是單線程，也避免了同時操作同一個DOM的矛盾問題;
• 為了利用多核CPU的計算能力，H5的Web Worker實現(xiàn)的“多線程”實際上指的是“多子線程”，完全受控于主線程，且不允許操作DOM;
• js引擎存在monitoring process進程，會持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會去Event Queue那里檢查是否有等待被調(diào)用的函數(shù)。這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為Event Loop(事件循環(huán));
• 所有同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧(execution context stack);
• 如果在微任務(wù)執(zhí)行期間微任務(wù)隊列加入了新的微任務(wù)，會將新的微任務(wù)加入隊列尾部，之后也會被執(zhí)行;

二、相關(guān)概念

1、JS為什么是單線程的?

• JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢?這樣能提高效率啊。
• JavaScript的單線程，與它的用途有關(guān)。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復(fù)雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節(jié)點上添加內(nèi)容，另一個線程刪除了這個節(jié)點，這時瀏覽器應(yīng)該以哪個線程為準?
• 所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線程，這已經(jīng)成了這門語言的核心特征，將來也不會改變;
• 為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創(chuàng)建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質(zhì);

2、JS為什么需要異步?

如果JS中不存在異步，只能自上而下執(zhí)行，如果上一行解析時間很長，那么下面的代碼就會被阻塞。對于用戶而言，阻塞就意味著"卡死"，這樣就導致了很差的用戶體驗;

3、JS單線程又是如何實現(xiàn)異步的呢?

既然JS是單線程的，只能在一條線程上執(zhí)行，又是如何實現(xiàn)的異步呢?

是通過的事件循環(huán)(event loop)，理解了event loop機制，就理解了JS的執(zhí)行機制。

4、任務(wù)隊列

• "任務(wù)隊列"是一個事件的隊列(也可以理解成消息的隊列)，IO設(shè)備完成一項任務(wù)，就在"任務(wù)隊列"中添加一個事件，表示相關(guān)的異步任務(wù)可以進入"執(zhí)行棧"了。主線程讀取"任務(wù)隊列"，就是讀取里面有哪些事件;
• "任務(wù)隊列"中的事件，除了IO設(shè)備的事件以外，還包括一些用戶產(chǎn)生的事件(比如鼠標點擊、頁面滾動等等)。只要指定過回調(diào)函數(shù)，這些事件發(fā)生時就會進入"任務(wù)隊列"，等待主線程讀取。
• 所謂"回調(diào)函數(shù)"(callback)，就是那些會被主線程掛起來的代碼。異步任務(wù)必須指定回調(diào)函數(shù)，當主線程開始執(zhí)行異步任務(wù)，就是執(zhí)行對應(yīng)的回調(diào)函數(shù);
• "任務(wù)隊列"是一個先進先出的數(shù)據(jù)結(jié)構(gòu)，排在前面的事件，優(yōu)先被主線程讀取。主線程的讀取過程基本上是自動的，只要執(zhí)行棧一清空，"任務(wù)隊列"上第一位的事件就自動進入主線程。但是，由于存在后文提到的"定時器"功能，主線程首先要檢查一下執(zhí)行時間，某些事件只有到了規(guī)定的時間，才能返回主線程。
• 讀取到一個異步任務(wù)，首先是將異步任務(wù)放進事件表格(Event table)中，當放進事件表格中的異步任務(wù)完成某種事情或者說達成某些條件(如setTimeout事件到了，鼠標點擊了，數(shù)據(jù)文件獲取到了)之后，才將這些異步任務(wù)推入事件隊列(Event Queue)中，這時候的異步任務(wù)才是執(zhí)行棧中空閑的時候才能讀取到的異步任務(wù);

5、Event Loop

• 主線程從"任務(wù)隊列"中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為Event Loop(事件循環(huán));
• Event Loop是javascript的執(zhí)行機制

6、setTimeout(fn,0)

• setTimeout(fn,0)的含義是，指定某個任務(wù)在主線程最早可得的空閑時間執(zhí)行，也就是說，盡可能早得執(zhí)行。它在"任務(wù)隊列"的尾部添加一個事件，因此要等到同步任務(wù)和"任務(wù)隊列"現(xiàn)有的事件都處理完，才會得到執(zhí)行。
• HTML5標準規(guī)定了setTimeout()的第二個參數(shù)的最小值(最短間隔)，不得低于4毫秒，如果低于這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設(shè)為10毫秒。另外，對于那些DOM的變動(尤其是涉及頁面重新渲染的部分)，通常不會立即執(zhí)行，而是每16毫秒執(zhí)行一次。這時使用requestAnimationFrame()的效果要好于setTimeout()。
• 需要注意的是，setTimeout()只是將事件插入了"任務(wù)隊列"，必須等到當前代碼(執(zhí)行棧)執(zhí)行完，主線程才會去執(zhí)行它指定的回調(diào)函數(shù)。要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會在setTimeout()指定的時間執(zhí)行

三、js執(zhí)行機制介紹

1、javascript的同步和異步

• 單線程就意味著，所有任務(wù)需要排隊，前一個任務(wù)結(jié)束，才會執(zhí)行后一個任務(wù)。如果前一個任務(wù)耗時很長，后一個任務(wù)就不得不一直等著。
• 如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑著的，因為IO設(shè)備(輸入輸出設(shè)備)很慢(比如Ajax操作從網(wǎng)絡(luò)讀取數(shù)據(jù))，不得不等著結(jié)果出來，再往下執(zhí)行。
• JavaScript語言的設(shè)計者意識到，這時主線程完全可以不管IO設(shè)備，掛起處于等待中的任務(wù)，先運行排在后面的任務(wù)。等到IO設(shè)備返回了結(jié)果，再回過頭，把掛起的任務(wù)繼續(xù)執(zhí)行下去。
• 于是，所有任務(wù)可以分成兩種，一種是同步任務(wù)(synchronous)，另一種是異步任務(wù)(asynchronous)。同步任務(wù)指的是，在主線程上排隊執(zhí)行的任務(wù)，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行后一個任務(wù);異步任務(wù)指的是，不進入主線程、而進入"任務(wù)隊列"(task queue)的任務(wù)，只有"任務(wù)隊列"通知主線程，某個異步任務(wù)可以執(zhí)行了，該任務(wù)才會進入主線程執(zhí)行。

• 同步和異步任務(wù)分別進入不同的執(zhí)行"場所"，同步的進入主線程，異步的進入Event Table并注冊函數(shù)。
• 當Event Table中指定的事情完成時，會將這個函數(shù)移入Event Queue。
• 主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會去Event Queue讀取對應(yīng)的函數(shù)，進入主線程執(zhí)行。
• 上述過程會不斷重復(fù)，也就是常說的Event Loop(事件循環(huán))。
• 我們不禁要問了，那怎么知道主線程執(zhí)行棧為空啊?js引擎存在monitoring process進程，會持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會去Event Queue那里檢查是否有等待被調(diào)用的函數(shù);

2、JavaScript的宏任務(wù)與微任務(wù)

你是否覺得同步異步的執(zhí)行機制流程就是JavaScript執(zhí)行機制的全部?不是的，JavaScript除了廣義上的的同步任務(wù)何異步任務(wù)，其對任務(wù)還有更精細的定義：

• macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval
• micro-task(微任務(wù))：Promise，process.nextTick

不同類型的任務(wù)會進入對應(yīng)的Event Queue。

事件循環(huán)的順序，決定js代碼的執(zhí)行順序。進入整體代碼(宏任務(wù))后，開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始，找到其中一個任務(wù)隊列執(zhí)行完畢，再執(zhí)行所有的微任務(wù)。

3、實例來說明JavaScript的執(zhí)行機制

3.1、同步

console.log(1); 
console.log(2); 
console.log(3); 
/* 
    執(zhí)行結(jié)果：1、2、3 
    同步任務(wù)，按照順序一步一步執(zhí)行 
*/ 

3.2、同步和異步

console.log(1); 
setTimeout(function() { 
    console.log(2); 
},1000) 
console.log(3); 
/* 
    執(zhí)行結(jié)果：1、3、2 
    同步任務(wù)，按照順序一步一步執(zhí)行 
    異步任務(wù)，放入消息隊列中，等待同步任務(wù)執(zhí)行結(jié)束，讀取消息隊列執(zhí)行 
*/ 

3.3、異步任務(wù)進一步分析

console.log(1); 
setTimeout(function() { 
    console.log(2); 
},1000) 
setTimeout(function() { 
    console.log(3); 
},0) 
console.log(4); 
/* 
    猜測是：1、4、2、3   但實際上是：1、4、3、2 
    分析： 
        同步任務(wù)，按照順序一步一步執(zhí)行 
        異步任務(wù)，當讀取到異步任務(wù)的時候，將異步任務(wù)放置到Event table（事件表格） 
中，當滿足某種條件或者說指定事情完成了（這里的是時間分別是達到了0ms和1000ms）當指定 
事件完成了才從Event table中注冊到Event Queue（事件隊列），當同步事件完成了，便從 
Event Queue中讀取事件執(zhí)行。（因為3的事情先完成了，所以先從Event table中注冊到 
Event Queue中，所以先執(zhí)行的是3而不是在前面的2） 
*/ 

3.4、宏任務(wù)和微任務(wù)

console.log(1); 
setTimeout(function() { 
    console.log(2) 
},1000); 
new Promise(function(resolve) { 
    console.log(3); 
    resolve(); 
} 
).then(function() { 
    console.log(4) 
}); 
console.log(5); 
/* 
    以同步異步的方式來判斷的結(jié)果應(yīng)該是：1、3、5、2、4 
    但是事實上結(jié)果是：1、3、5、4、2 
    為什么是這樣呢？因為以同步異步的方式來解釋執(zhí)行機制是不準確的，更加準確的方式是宏任務(wù)和微任務(wù)： 
    因此執(zhí)行機制便為：執(zhí)行宏任務(wù) ===> 執(zhí)行微任務(wù) ===> 執(zhí)行另一個宏任務(wù) ===> 不斷循環(huán) 
        即：在一個事件循環(huán)中，執(zhí)行第一個宏任務(wù)，宏任務(wù)執(zhí)行結(jié)束，執(zhí)行當前事件循環(huán)中的微任務(wù)， 
執(zhí)行完畢之后進入下一個事件循環(huán)中，或者說執(zhí)行下一個宏任務(wù) 
*/ 

3.5、是否徹底理解JavaScript執(zhí)行機制實例

console.log('1'); 
setTimeout(function() { 
    console.log('2'); 
    process.nextTick(function() { 
        console.log('3'); 
    }) 
    new Promise(function(resolve) { 
        console.log('4'); 
        resolve(); 
    }).then(function() { 
        console.log('5') 
    }) 
}) 
process.nextTick(function() { 
    console.log('6'); 
}) 
new Promise(function(resolve) { 
    console.log('7'); 
    resolve(); 
}).then(function() { 
    console.log('8') 
}) 
setTimeout(function() { 
    console.log('9'); 
    process.nextTick(function() { 
        console.log('10'); 
    }) 
    new Promise(function(resolve) { 
        console.log('11'); 
        resolve(); 
    }).then(function() { 
        console.log('12') 
    }) 
}) 
/* 
1、 第一輪事件循環(huán)流程分析如下： 
    整體script作為第一個宏任務(wù)進入主線程，遇到console.log，輸出1。 
    遇到setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)Event Queue中。我們暫且記為setTimeout1。 
    遇到process.nextTick()，其回調(diào)函數(shù)被分發(fā)到微任務(wù)Event Queue中。我們記為process1。 
    遇到Promise，new Promise直接執(zhí)行，輸出7。then被分發(fā)到微任務(wù)Event Queue中。我們記為then1。 
    又遇到了setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)Event Queue中，我們記為setTimeout2。 
    宏任務(wù)Event Queue   微任務(wù)Event Queue 
    setTimeout1         process1 
    setTimeout2         then1 
    上表是第一輪事件循環(huán)宏任務(wù)結(jié)束時各Event Queue的情況，此時已經(jīng)輸出了1和7。 
    我們發(fā)現(xiàn)了process1和then1兩個微任務(wù)。 
    執(zhí)行process1,輸出6。 
    執(zhí)行then1，輸出8。 
    好了，第一輪事件循環(huán)正式結(jié)束，這一輪的結(jié)果是輸出1，7，6，8。 
2、 那么第二輪時間循環(huán)從setTimeout1宏任務(wù)開始： 
    首先輸出2。接下來遇到了process.nextTick()，同樣將其分發(fā)到微任務(wù)Event Queue中， 
記為process2。new Promise立即執(zhí)行輸出4，then也分發(fā)到微任務(wù)Event Queue中，記為then2。 
    宏任務(wù)Event Queue     微任務(wù)Event Queue 
    setTimeout2           process2 
                          then2 
    第二輪事件循環(huán)宏任務(wù)結(jié)束，我們發(fā)現(xiàn)有process2和then2兩個微任務(wù)可以執(zhí)行。 
        輸出3。 
        輸出5。 
        第二輪事件循環(huán)結(jié)束，第二輪輸出2，4，3，5。 
3、 第三輪事件循環(huán)開始，此時只剩setTimeout2了，執(zhí)行。 
        直接輸出9。 
        將process.nextTick()分發(fā)到微任務(wù)Event Queue中。記為process3。 
        直接執(zhí)行new Promise，輸出11。 
        將then分發(fā)到微任務(wù)Event Queue中，記為then3。 
    宏任務(wù)Event Queue     微任務(wù)Event Queue 
                            process3 
                            then3      
    第三輪事件循環(huán)宏任務(wù)執(zhí)行結(jié)束，執(zhí)行兩個微任務(wù)process3和then3。 
        輸出10。 
        輸出12。 
        第三輪事件循環(huán)結(jié)束，第三輪輸出9，11，10，12。 
    整段代碼，共進行了三次事件循環(huán)，完整的輸出為1，7，6，8，2，4，3，5，9，11，10，12。 
*/ 

總結(jié)

javascript是一門單線程語言;

Event Loop是javascript的執(zhí)行機制;

客戶端也是要學習前端語言的，以后我們會講解一些前端的知識點

本文轉(zhuǎn)載自微信公眾號「Android開發(fā)編程」