[[422053]]

前言

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

js運(yùn)行機(jī)制，來一篇總結(jié)

一、js的基礎(chǔ)知識(shí)點(diǎn)介紹

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

二、相關(guān)概念

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

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

2、JS為什么需要異步?

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

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

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

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

4、任務(wù)隊(duì)列

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

5、Event Loop

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

6、setTimeout(fn,0)

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

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

1、javascript的同步和異步

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

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

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

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

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

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

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

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

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ù)，放入消息隊(duì)列中，等待同步任務(wù)執(zhí)行結(jié)束，讀取消息隊(duì)列執(zhí)行 
*/ 

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

console.log(1); 
setTimeout(function() { 
    console.log(2); 
},1000) 
setTimeout(function() { 
    console.log(3); 
},0) 
console.log(4); 
/* 
    猜測(cè)是：1、4、2、3   但實(shí)際上是：1、4、3、2 
    分析： 
        同步任務(wù)，按照順序一步一步執(zhí)行 
        異步任務(wù)，當(dāng)讀取到異步任務(wù)的時(shí)候，將異步任務(wù)放置到Event table（事件表格） 
中，當(dāng)滿足某種條件或者說指定事情完成了（這里的是時(shí)間分別是達(dá)到了0ms和1000ms）當(dāng)指定 
事件完成了才從Event table中注冊(cè)到Event Queue（事件隊(duì)列），當(dāng)同步事件完成了，便從 
Event Queue中讀取事件執(zhí)行。（因?yàn)?的事情先完成了，所以先從Event table中注冊(cè)到 
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 
    但是事實(shí)上結(jié)果是：1、3、5、4、2 
    為什么是這樣呢？因?yàn)橐酝疆惒降姆绞絹斫忉寛?zhí)行機(jī)制是不準(zhǔn)確的，更加準(zhǔn)確的方式是宏任務(wù)和微任務(wù)： 
    因此執(zhí)行機(jī)制便為：執(zhí)行宏任務(wù) ===> 執(zhí)行微任務(wù) ===> 執(zhí)行另一個(gè)宏任務(wù) ===> 不斷循環(huán) 
        即：在一個(gè)事件循環(huán)中，執(zhí)行第一個(gè)宏任務(wù)，宏任務(wù)執(zhí)行結(jié)束，執(zhí)行當(dāng)前事件循環(huán)中的微任務(wù)， 
執(zhí)行完畢之后進(jìn)入下一個(gè)事件循環(huán)中，或者說執(zhí)行下一個(gè)宏任務(wù) 
*/ 

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

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作為第一個(gè)宏任務(wù)進(jìn)入主線程，遇到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é)束時(shí)各Event Queue的情況，此時(shí)已經(jīng)輸出了1和7。 
    我們發(fā)現(xiàn)了process1和then1兩個(gè)微任務(wù)。 
    執(zhí)行process1,輸出6。 
    執(zhí)行then1，輸出8。 
    好了，第一輪事件循環(huán)正式結(jié)束，這一輪的結(jié)果是輸出1，7，6，8。 
2、 那么第二輪時(shí)間循環(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兩個(gè)微任務(wù)可以執(zhí)行。 
        輸出3。 
        輸出5。 
        第二輪事件循環(huán)結(jié)束，第二輪輸出2，4，3，5。 
3、 第三輪事件循環(huán)開始，此時(shí)只剩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í)行兩個(gè)微任務(wù)process3和then3。 
        輸出10。 
        輸出12。 
        第三輪事件循環(huán)結(jié)束，第三輪輸出9，11，10，12。 
    整段代碼，共進(jìn)行了三次事件循環(huán)，完整的輸出為1，7，6，8，2，4，3，5，9，11，10，12。 
*/ 

總結(jié)

javascript是一門單線程語言;

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

客戶端也是要學(xué)習(xí)前端語言的，以后我們會(huì)講解一些前端的知識(shí)點(diǎn)

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