資訊專欄INFORMATION COLUMN
摘要：所以在瀏覽器的幫助下，作為一種單線程語言，可以實現(xiàn)異步操作。每個異步任務(wù)都和一個回調(diào)函數(shù)相關(guān)聯(lián)。主線程執(zhí)行同步任務(wù)的同時，子線程執(zhí)行異步任務(wù)，并將相應(yīng)的結(jié)果事件放入任務(wù)隊列。
前言
js引擎不是獨立運行的，它運行在宿主環(huán)境中，這個環(huán)境可以是瀏覽器、可以是服務(wù)器，或者其他硬件設(shè)施。所以在瀏覽器的幫助下，js作為一種單線程語言，可以實現(xiàn)異步操作。
瀏覽器內(nèi)核是多線程的，幾個常駐的線程：渲染引擎線程、js引擎線程、定時觸發(fā)器線程、事件觸發(fā)線程、異步http請求線程。
并發(fā)模型MDN-并發(fā)模型
左邊的棧存儲的是同步任務(wù)。右邊的堆用來存儲聲明的變量、對象。下面的隊列就是任務(wù)隊列，一旦某個異步任務(wù)有了響應(yīng)就會被推入隊列中。每個異步任務(wù)都和一個回調(diào)函數(shù)相關(guān)聯(lián)。
一個js程序的單線程用來執(zhí)行棧中的同步任務(wù)，當所有同步任務(wù)執(zhí)行完畢后，棧被清空，然后讀取任務(wù)隊列中的一個待處理任務(wù)，并把相關(guān)回調(diào)函數(shù)壓入棧中，單線程開始執(zhí)行新的同步任務(wù)，執(zhí)行完畢。
單線程從任務(wù)隊列中讀取任務(wù)是不斷循環(huán)的，每次棧被清空后，都會在任務(wù)隊列中讀取新的任務(wù)，如果沒有新的任務(wù)，就會等待，直到有新的任務(wù)，這就叫任務(wù)循環(huán)或者事件循環(huán)
事件循環(huán)(Event Loop)事件循環(huán)的大致流程如下：
主線程執(zhí)行所有同步任務(wù)，形成一個執(zhí)行棧（并發(fā)模型中的stack）。
主線程執(zhí)行同步任務(wù)的同時，子線程執(zhí)行異步任務(wù)，并將相應(yīng)的結(jié)果（事件）放入任務(wù)隊列。
一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會讀取任務(wù)隊列，把任務(wù)隊列中事件相應(yīng)的回調(diào)函數(shù)壓入棧內(nèi)開始執(zhí)行。
執(zhí)行回調(diào)后，棧空，繼續(xù)重復(fù)第三步，形成一個循環(huán)。
Macrotask(task)(macro)task（又稱之為宏任務(wù)），可以理解是每次執(zhí)行棧執(zhí)行的代碼就是一個宏任務(wù)（包括每次從事件隊列中獲取一個事件回調(diào)并放到執(zhí)行棧中執(zhí)行）。
瀏覽器為了能夠使得JS內(nèi)部(macro)task與DOM任務(wù)能夠有序的執(zhí)行，會在一個(macro)task執(zhí)行結(jié)束后，在下一個(macro)task 執(zhí)行開始前，對頁面進行重新渲染。
(macro)task主要包含：script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環(huán)境)
microtaskmicrotask（又稱為微任務(wù)），可以理解是在當前 task 執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)。也就是說，在當前task任務(wù)后，下一個task之前，在渲染之前。
所以它的響應(yīng)速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染。也就是說，在某一個macrotask執(zhí)行完后，就會將在它執(zhí)行期間產(chǎn)生的所有microtask都執(zhí)行完畢（在渲染前）。
microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 環(huán)境)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100423.html
摘要：深入理解引擎的執(zhí)行機制靈魂三問為什么是單線程的為什么需要異步單線程又是如何實現(xiàn)異步的呢中的中的說說首先請牢記點是單線程語言的是的執(zhí)行機制。 深入理解JS引擎的執(zhí)行機制 1.靈魂三問 : JS為什么是單線程的? 為什么需要異步? 單線程又是如何實現(xiàn)異步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.說說setTimeout 首先,請牢記2...
摘要：深入理解引擎的執(zhí)行機制最近在反省，很多知識都是只會用，不理解底層的知識。在閱讀之前，請先記住兩點是單線程語言的是的執(zhí)行機制。所以，是存在異步執(zhí)行的，比如單線程是怎么實現(xiàn)異步的場景描述通過事件循環(huán)，所以說，理解了機制，也就理解了的執(zhí)行機制啦。 深入理解js引擎的執(zhí)行機制 最近在反省，很多知識都是只會用，不理解底層的知識。所以在開發(fā)過程中遇到一些奇怪的比較難解決的bug，在思考的時候就會收...
摘要：引言學(xué)習(xí)的時候，經(jīng)常聽人說，即是異步的，又是單線程的。所以我們說是異步單線程的。參考從瀏覽器多進程到單線程，運行機制最全面的一次梳理運行機制詳解再談異步機制詳解運行原理解析并發(fā)模型與事件循環(huán) showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 學(xué)習(xí)javascipt的時候，經(jīng)常聽人說，javascipt即是異步...
摘要：圖片轉(zhuǎn)引自的演講和兩個定時器中回調(diào)的執(zhí)行邏輯便是典型的機制。異步編程關(guān)于異步編程我的理解是，在執(zhí)行環(huán)境所提供的異步機制之上，在應(yīng)用編碼層面上實現(xiàn)整體流程控制的異步風(fēng)格。 問題背景 在一次開發(fā)任務(wù)中，需要實現(xiàn)如下一個餅狀圖動畫，基于canvas進行繪圖，但由于對于JS運行環(huán)境中異步機制的不了解，所以遇到了一個棘手的問題，始終無法解決，之后在與同事交流之后才恍然大悟。問題的根節(jié)在于經(jīng)典的J...
摘要：異步任務(wù)必須指定回調(diào)函數(shù)，當異步任務(wù)從任務(wù)隊列回到執(zhí)行棧，回調(diào)函數(shù)就會執(zhí)行。事件循環(huán)主線程從任務(wù)隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為。事件循環(huán)事件循環(huán)是指主線程重復(fù)從消息隊列中取消息執(zhí)行的過程。 參考鏈接：這一次，徹底弄懂 JavaScript 執(zhí)行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...
摘要：這種問題在設(shè)置倒計時的經(jīng)常遇到，倒計時開始的時候設(shè)置的時間是從服務(wù)器拿到的系統(tǒng)時間很準確，但是如果后面不定期像服務(wù)期請求系統(tǒng)時間進行校準的話，你可能會發(fā)現(xiàn)倒計時的偏差越來越來大，這就是主線程執(zhí)行的時間比設(shè)定的延遲時間長導(dǎo)致的。 關(guān)于js執(zhí)行機制，老早之前就一直想寫篇文章做個總結(jié)，因為和js執(zhí)行順序的面試題碰到的特別多，每次碰到總是會去網(wǎng)上查，沒有系統(tǒng)地總結(jié)，搞得每次碰到都是似懂非懂的感...
閱讀 1908·2023-04-25 16:28
閱讀 825·2021-11-23 09:51
閱讀 1613·2019-08-30 15:54
閱讀 1287·2019-08-30 15:53
閱讀 2965·2019-08-30 15:53
閱讀 3541·2019-08-30 15:43
閱讀 3377·2019-08-30 11:18
閱讀 3467·2019-08-26 10:25
