午夜骚逼免费,亚洲最新AV网站,又粗又大又黄,操小骚逼操,亚州日中文字暮,97久久97欧美精品A片,伊人av大香蕉,色欲影视淫香淫色

作者 | 可達(dá)呱呱鴨

寫在前面

校招筆試中我們經(jīng)常會遇到這樣一個(gè)問題：

寫出下面代碼的運(yùn)行結(jié)果：
console.log('1');
setTimeout(function () {
 ? ?console.log('2');
}, 0);
setTimeout(function () {
 ? ?console.log('3');
}, 2000);
console.log('4');

看完這道題的我自信的寫下了答案：?1,2,4,3

面試官：為什么是這個(gè)答案？

我：首先打印?1，遇到定時(shí)器，等待時(shí)間為0，所以打印?2，又遇到一個(gè)定時(shí)器，等待時(shí)間為2秒，所以先打印?4，兩秒后打印?3。

然后就......

與這段代碼相關(guān)的知識點(diǎn)就是JavaScript事件循環(huán)機(jī)制，下面將從有關(guān)的基本概念出發(fā)，先了解了相關(guān)的概念，才能更好的理解事件循環(huán)的機(jī)制原理。以下都是自己的個(gè)人理解，如有不正確的地方，歡迎大家在評論區(qū)拍磚。

線程與進(jìn)程

關(guān)于線程與進(jìn)程的關(guān)系可以用下面的圖進(jìn)行說明：

進(jìn)程好比圖中的工廠，有單獨(dú)的專屬自己的工廠資源。
線程好比圖中的工人，多個(gè)工人在一個(gè)工廠中協(xié)作工作，工廠與工人是?1:n的關(guān)系。
多個(gè)工廠之間獨(dú)立存在。

而官方的說法是：

進(jìn)程是?CPU資源分配的最小單位。
線程是?CPU調(diào)度的最小單位。

從更直觀的例子來看，可以打開任務(wù)管理器查看，第一個(gè)?tab便是進(jìn)程列表，每一個(gè)進(jìn)程占有的?CPU資源和內(nèi)存資源的比例很直觀的展示出來。

為什么js是單線程

初學(xué)計(jì)算機(jī)語言的時(shí)候，無論是?C、C++還是?JAVA，都是支持多線程，偏偏?JavaScript是單線程，不支持多線程，這也跟?JavaScript的作用有關(guān)，都知道?JavaScript是主要運(yùn)行在瀏覽器的腳本語言，最終操作的是頁面的?DOM結(jié)構(gòu)，當(dāng)兩個(gè)?JavaScript腳本同時(shí)修改頁面的同一個(gè)?DOM節(jié)點(diǎn)時(shí)，瀏覽器該執(zhí)行哪個(gè)呢？所以當(dāng)時(shí)設(shè)計(jì)?JavaScript時(shí)，便要求當(dāng)前修改操作完成后方可進(jìn)行下一步修改操作。

瀏覽器是支持多進(jìn)程

同樣我們打開瀏覽器的任務(wù)管理器，以下圖為例：

瀏覽器的每一個(gè)?tab頁都是一個(gè)進(jìn)程，有對應(yīng)的內(nèi)存占用空間、?CPU使用量以及進(jìn)程ID。新打開一個(gè)?tab頁時(shí)，都會新建一個(gè)進(jìn)程，所以就有一個(gè)?tab頁對應(yīng)一個(gè)進(jìn)程的說法，但是這種說法又是錯(cuò)誤的，因?yàn)闉g覽器有自己的優(yōu)化機(jī)制，當(dāng)我們打開多個(gè)空白的?tab頁時(shí)，瀏覽器會將這多個(gè)空白頁的進(jìn)程合并為一個(gè)，從而減少了進(jìn)程的數(shù)量個(gè)數(shù)。

瀏覽器內(nèi)核

瀏覽器內(nèi)核中有多個(gè)進(jìn)程在同步工作，今天涉及到的瀏覽器的進(jìn)程主要包括以下進(jìn)程：

Browser 進(jìn)程

主進(jìn)程，主要負(fù)責(zé)頁面管理以及管理其他進(jìn)程的創(chuàng)建和銷毀等，常駐的線程有：
GUI渲染線程
JS引擎線程
事件觸發(fā)線程
定時(shí)器觸發(fā)線程
HTTP請求線程
GUI渲染線程
主要負(fù)責(zé)頁面的渲染，解析HTML、CSS，構(gòu)建DOM樹，布局和繪制等。
當(dāng)界面需要重繪或者由于某種操作引發(fā)回流時(shí)，將執(zhí)行該線程。
該線程與JS引擎線程互斥，當(dāng)執(zhí)行JS引擎線程時(shí)，GUI渲染會被掛起，當(dāng)任務(wù)隊(duì)列空閑時(shí)，JS引擎才會去執(zhí)行GUI渲染。
JS引擎線程
該線程當(dāng)然是主要負(fù)責(zé)處理?JavaScript腳本，執(zhí)行代碼。
也是主要負(fù)責(zé)執(zhí)行準(zhǔn)備好待執(zhí)行的事件，即定時(shí)器計(jì)數(shù)結(jié)束，或者異步請求成功并正確返回時(shí)，將依次進(jìn)入任務(wù)隊(duì)列，等待?JS引擎線程的執(zhí)行。
當(dāng)然，該線程與?GUI渲染線程互斥，當(dāng)?JS引擎線程執(zhí)行?JavaScript腳本時(shí)間過長，將導(dǎo)致頁面渲染的阻塞。
事件觸發(fā)線程
主要負(fù)責(zé)將準(zhǔn)備好的事件交給?JS引擎線程執(zhí)行。
比如?setTimeout定時(shí)器計(jì)數(shù)結(jié)束，?ajax等異步請求成功并觸發(fā)回調(diào)函數(shù)，或者用戶觸發(fā)點(diǎn)擊事件時(shí)，該線程會將整裝待發(fā)的事件依次加入到任務(wù)隊(duì)列的隊(duì)尾，等待?JS引擎線程的執(zhí)行。
定時(shí)器觸發(fā)線程
顧名思義，負(fù)責(zé)執(zhí)行異步定時(shí)器一類的函數(shù)的線程，如：?setTimeout，setInterval。
主線程依次執(zhí)行代碼時(shí)，遇到定時(shí)器，會將定時(shí)器交給該線程處理，當(dāng)計(jì)數(shù)完畢后，事件觸發(fā)線程會將計(jì)數(shù)完畢后的事件加入到任務(wù)隊(duì)列的尾部，等待JS引擎線程執(zhí)行。
HTTP請求線程
顧名思義，負(fù)責(zé)執(zhí)行異步請求一類的函數(shù)的線程，如：?Promise，anxios，ajax等。
主線程依次執(zhí)行代碼時(shí)，遇到異步請求，會將函數(shù)交給該線程處理，當(dāng)監(jiān)聽到狀態(tài)碼變更，如果有回調(diào)函數(shù)，事件觸發(fā)線程會將回調(diào)函數(shù)加入到任務(wù)隊(duì)列的尾部，等待JS引擎線程執(zhí)行。
多個(gè)線程之間配合工作，各司其職。

Render 進(jìn)程

瀏覽器渲染進(jìn)程（瀏覽器內(nèi)核），主要負(fù)責(zé)頁面的渲染、JS執(zhí)行以及事件的循環(huán)。

同步任務(wù)和異步任務(wù)

同步任務(wù)?即可以立即執(zhí)行的任務(wù)，例如?console.log()?打印一條日志、聲明一個(gè)變量或者執(zhí)行一次加法操作等。
異步任務(wù)?相反不會立即執(zhí)行的事件任務(wù)。異步任務(wù)包括宏任務(wù)和微任務(wù)(后面會進(jìn)行解釋~)。
常見的異步操作：

Ajax
DOM的事件操作
setTimeout
Promise的then方法
Node的讀取文件

下圖給出了同步任務(wù)與異步任務(wù)的執(zhí)行流程：

棧?就像是一個(gè)容器，任務(wù)都是在棧中執(zhí)行。
主線程?就像是操作員，負(fù)責(zé)執(zhí)行棧中的任務(wù)。
任務(wù)隊(duì)列?就像是等待被加工的物品。
異步任務(wù)完成注冊后會將回調(diào)函數(shù)加入任務(wù)隊(duì)列等待主線程執(zhí)行。
執(zhí)行棧中的同步任務(wù)執(zhí)行完畢后，會查看并讀取任務(wù)隊(duì)列中的事件函數(shù)，于是任務(wù)隊(duì)列的函數(shù)結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行。

那么任務(wù)到底是如何入棧和出棧的呢？可以用一小段代碼進(jìn)行解釋。

入棧與出棧

以下面的代碼為例：

console.log(1);
function fn1 () {
 ? ?console.log(2);
}
function fn2 () {
 ? ?console.log(3);
 ? ?fn1();
}
setTimeout (function () {
 ? ?console.log(4);
}, 2000);
fn2();
console.log(5);

所以上面代碼運(yùn)行的結(jié)果為：1,3,2,5,4。

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

異步任務(wù)分為宏任務(wù)和微任務(wù)，宏任務(wù)隊(duì)列可以有多個(gè)，微任務(wù)隊(duì)列只有一個(gè)。

宏任務(wù)和微任務(wù)的執(zhí)行方式在瀏覽器和?Node?中有差異。

宏任務(wù)（macrotask）

script(全局任務(wù))，?setTimeout，?setInterval，?setImmediate，?I/O，?UI rendering

微任務(wù)（macrotask）

process.nextTick，?Promise.then()，?Object.observe，?MutationObserver

在微任務(wù)中 process.nextTick 優(yōu)先級高于Promise

當(dāng)一個(gè)異步任務(wù)入棧時(shí)，主線程判斷該任務(wù)為異步任務(wù)，并把該任務(wù)交給異步處理模塊處理，當(dāng)異步處理模塊處理完打到觸發(fā)條件時(shí)，根據(jù)任務(wù)的類型，將回調(diào)函數(shù)壓入任務(wù)隊(duì)列。

如果是宏任務(wù)，則新增一個(gè)宏任務(wù)隊(duì)列，任務(wù)隊(duì)列中的宏任務(wù)可以有多個(gè)來源。
如果是微任務(wù)，則直接壓入微任務(wù)隊(duì)列。

所以上圖的任務(wù)隊(duì)列可以繼續(xù)細(xì)化一下：

那么當(dāng)棧為空時(shí)，宏任務(wù)和微任務(wù)的執(zhí)行機(jī)制又是什么呢？

Event Loop

到這里，除了上面的問題，我們已經(jīng)把事件循環(huán)的最基本的處理方式搞清楚了，但具體到異步任務(wù)中的宏任務(wù)和微任務(wù)，還沒有弄明白。我們可以先順一遍執(zhí)行機(jī)制：

從全局任務(wù)?script開始，任務(wù)依次進(jìn)入棧中，被主線程執(zhí)行，執(zhí)行完后出棧。
遇到異步任務(wù)，交給異步處理模塊處理，對應(yīng)的異步處理線程處理異步任務(wù)需要的操作，例如定時(shí)器的計(jì)數(shù)和異步請求監(jiān)聽狀態(tài)的變更。
當(dāng)異步任務(wù)達(dá)到可執(zhí)行狀態(tài)時(shí)，事件觸發(fā)線程將回調(diào)函數(shù)加入任務(wù)隊(duì)列，等待棧為空時(shí)，依次進(jìn)入棧中執(zhí)行。

到這問題就來了，當(dāng)異步任務(wù)進(jìn)入棧執(zhí)行時(shí)，是宏任務(wù)還是微任務(wù)呢？

由于執(zhí)行代碼入口都是全局任務(wù)?script，而全局任務(wù)屬于宏任務(wù)，所以當(dāng)棧為空，同步任務(wù)任務(wù)執(zhí)行完畢時(shí)，會先執(zhí)行微任務(wù)隊(duì)列里的任務(wù)。
微任務(wù)隊(duì)列里的任務(wù)全部執(zhí)行完畢后，會讀取宏任務(wù)隊(duì)列中拍最前的任務(wù)。
執(zhí)行宏任務(wù)的過程中，遇到微任務(wù)，依次加入微任務(wù)隊(duì)列。
棧空后，再次讀取微任務(wù)隊(duì)列里的任務(wù)，依次類推。

實(shí)例解析

回到最開始的那段代碼，現(xiàn)在我們可以一步一步的看一下執(zhí)行順序。

console.log('1');
setTimeout(function () {
 ? ?console.log('2');
}, 0);
setTimeout(function () {
 ? ?console.log('3');
}, 2000);
console.log('4');

從全局任務(wù)入口，首先打印日志?1，
遇到宏任務(wù)?setTimeout，交給異步處理模塊，我們暫且先記為?setTimeout1，
再次遇到宏任務(wù)?setTimeout，交給異步處理模塊，我們暫且先記為?setTimeout2，
順序執(zhí)行，打印日志?4，
此時(shí)同步任務(wù)已執(zhí)行完畢，讀取宏任務(wù)隊(duì)列的任務(wù)，先執(zhí)行?setTimeout1的回調(diào)函數(shù)，因?yàn)槎〞r(shí)器的等待時(shí)間為?0秒，所以會直接輸出?2，但是?W3C在?HTML標(biāo)準(zhǔn)中規(guī)定，規(guī)定要求?setTimeout中低于?4ms的時(shí)間間隔算為?4ms，
由于瀏覽器在執(zhí)行以上三步時(shí)，并未耗時(shí)很久，所以當(dāng)宏任務(wù)?setTimeout1執(zhí)行完時(shí)，?setTimeout2的等待時(shí)間并未結(jié)束，所以在?2秒后打印日志?3，實(shí)際上并未等待2秒。

下面我們可以再看一個(gè)實(shí)例：

setTimeout(function () {
 ? ?console.log(1);
 ? ?Promise.resolve().then(function () {
 ? ? ? ?console.log(2);
 ? ?});
}, 0);
setTimeout(function () {
 ? ?console.log(3);
}, 0);
Promise.resolve().then(function () {
 ? ?console.log(4);
});
console.log(5);

當(dāng)代碼中遇到了異步請求的事件，又該如何執(zhí)行，根據(jù)上面總結(jié)的執(zhí)行機(jī)制，又該得到什么樣的結(jié)果？

第一輪循環(huán)

同樣從全局任務(wù)入口，遇到宏任務(wù)?setTimeout，交給異步處理模塊，我們暫且先記為?setTimeout1，由于等待時(shí)間為?0，直接加入宏任務(wù)隊(duì)列。
再次遇到宏任務(wù)?setTimeout，交給異步處理模塊，我們暫且先記為?setTimeout2，同樣直接加入宏任務(wù)隊(duì)列。
遇到微任務(wù)?then()，加入微任務(wù)隊(duì)列。
最后遇到打印語句，直接打印日志?5。

第一輪循環(huán)結(jié)束后，可以畫出下圖：

第二輪循環(huán)

棧空后，先執(zhí)行微任務(wù)隊(duì)列中的?then()方法，輸出?4，此時(shí)微任務(wù)隊(duì)列為空。

讀取宏任務(wù)隊(duì)列的最靠前的任務(wù)?setTimeout1。
先直接執(zhí)行打印語句，打印日志?1，又遇到微任務(wù)?then()，加入微任務(wù)隊(duì)列。第二輪循環(huán)結(jié)束。

第三輪循環(huán)

先執(zhí)行微任務(wù)隊(duì)列中的?then()方法，輸出?2，此時(shí)微任務(wù)隊(duì)列為空。

繼續(xù)讀取宏任務(wù)隊(duì)列的最靠前的任務(wù)?setTimeout2。
直接執(zhí)行打印語句，打印日志?3。第三輪循環(huán)結(jié)束，執(zhí)行完畢。

最后我們是我們的boss，歡迎大家在評論區(qū)留言寫出自己心中的那個(gè)正確答案。

console.log('1');
setTimeout(function() {
 ? ?console.log('2');
 ? ?new Promise(function(resolve) {
 ? ? ? ?console.log('3');
 ? ? ? ?resolve();
 ? ?}).then(function() {
 ? ? ? ?console.log('4')
 ? ?})
})
new Promise(function(resolve) {
 ? ? ? ?console.log('5');
 ? ? ? ?resolve();
}).then(function() {
 ? ? ? ?console.log('6')
})
setTimeout(function() {
 ? ?console.log('7');
})
setTimeout(function() {
 ? ?console.log('8');
 ? ?new Promise(function(resolve) {
 ? ? ? ?console.log('9');
 ? ? ? ?resolve();
 ? ?}).then(function() {
 ? ? ? ?console.log('10')
 ? ?})
})
new Promise(function(resolve) {
 ? ?console.log('11');
 ? ?resolve();
}).then(function() {
 ? ?console.log('12')
})
console.log('13');

事件循環(huán)機(jī)制的那些事