js異步機制

Invoker 發(fā)布于2019-08-23 14:19 / 787人閱讀

摘要：所以在瀏覽器的幫助下，作為一種單線程語言，可以實現(xiàn)異步操作。每個異步任務都和一個回調(diào)函數(shù)相關聯(lián)。主線程執(zhí)行同步任務的同時，子線程執(zhí)行異步任務，并將相應的結果事件放入任務隊列。

前言

js引擎不是獨立運行的，它運行在宿主環(huán)境中，這個環(huán)境可以是瀏覽器、可以是服務器，或者其他硬件設施。所以在瀏覽器的幫助下，js作為一種單線程語言，可以實現(xiàn)異步操作。

瀏覽器內(nèi)核是多線程的，幾個常駐的線程：渲染引擎線程、js引擎線程、定時觸發(fā)器線程、事件觸發(fā)線程、異步http請求線程。

并發(fā)模型

MDN-并發(fā)模型

左邊的棧存儲的是同步任務。右邊的堆用來存儲聲明的變量、對象。下面的隊列就是任務隊列，一旦某個異步任務有了響應就會被推入隊列中。每個異步任務都和一個回調(diào)函數(shù)相關聯(lián)。

一個js程序的單線程用來執(zhí)行棧中的同步任務，當所有同步任務執(zhí)行完畢后，棧被清空，然后讀取任務隊列中的一個待處理任務，并把相關回調(diào)函數(shù)壓入棧中，單線程開始執(zhí)行新的同步任務，執(zhí)行完畢。

單線程從任務隊列中讀取任務是不斷循環(huán)的，每次棧被清空后，都會在任務隊列中讀取新的任務，如果沒有新的任務，就會等待，直到有新的任務，這就叫任務循環(huán)或者事件循環(huán)

事件循環(huán)(Event Loop)

事件循環(huán)的大致流程如下：

主線程執(zhí)行所有同步任務，形成一個執(zhí)行棧（并發(fā)模型中的stack）。

主線程執(zhí)行同步任務的同時，子線程執(zhí)行異步任務，并將相應的結果（事件）放入任務隊列。

一旦執(zhí)行棧中的所有同步任務執(zhí)行完畢，系統(tǒng)就會讀取任務隊列，把任務隊列中事件相應的回調(diào)函數(shù)壓入棧內(nèi)開始執(zhí)行。

執(zhí)行回調(diào)后，棧空，繼續(xù)重復第三步，形成一個循環(huán)。

Macrotask(task)

(macro)task（又稱之為宏任務），可以理解是每次執(zhí)行棧執(zhí)行的代碼就是一個宏任務（包括每次從事件隊列中獲取一個事件回調(diào)并放到執(zhí)行棧中執(zhí)行）。

瀏覽器為了能夠使得JS內(nèi)部(macro)task與DOM任務能夠有序的執(zhí)行，會在一個(macro)task執(zhí)行結束后，在下一個(macro)task 執(zhí)行開始前，對頁面進行重新渲染。

(macro)task主要包含：script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環(huán)境)

microtask

microtask（又稱為微任務），可以理解是在當前 task 執(zhí)行結束后立即執(zhí)行的任務。也就是說，在當前task任務后，下一個task之前，在渲染之前。

所以它的響應速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染。也就是說，在某一個macrotask執(zhí)行完后，就會將在它執(zhí)行期間產(chǎn)生的所有microtask都執(zhí)行完畢（在渲染前）。

microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 環(huán)境)

云服務器 GPU云服務器異步機制 JavaScript異步機制異步模塊加載機制-amd js執(zhí)行機制

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100423.html

10分鐘理解JS引擎的執(zhí)行機制

摘要：深入理解引擎的執(zhí)行機制靈魂三問為什么是單線程的為什么需要異步單線程又是如何實現(xiàn)異步的呢中的中的說說首先請牢記點是單線程語言的是的執(zhí)行機制。深入理解JS引擎的執(zhí)行機制 1.靈魂三問 : JS為什么是單線程的? 為什么需要異步? 單線程又是如何實現(xiàn)異步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.說說setTimeout 首先,請牢記2...

zzbo 2019-08-26 17:04 評論0 收藏0
深入理解js引擎的執(zhí)行機制

摘要：深入理解引擎的執(zhí)行機制最近在反省，很多知識都是只會用，不理解底層的知識。在閱讀之前，請先記住兩點是單線程語言的是的執(zhí)行機制。所以，是存在異步執(zhí)行的，比如單線程是怎么實現(xiàn)異步的場景描述通過事件循環(huán)，所以說，理解了機制，也就理解了的執(zhí)行機制啦。深入理解js引擎的執(zhí)行機制最近在反省，很多知識都是只會用，不理解底層的知識。所以在開發(fā)過程中遇到一些奇怪的比較難解決的bug，在思考的時候就會收...

feng409 2019-08-22 15:29 評論0 收藏0
JS核心知識點梳理——異步，單線程，運行機制

摘要：引言學習的時候，經(jīng)常聽人說，即是異步的，又是單線程的。所以我們說是異步單線程的。參考從瀏覽器多進程到單線程，運行機制最全面的一次梳理運行機制詳解再談異步機制詳解運行原理解析并發(fā)模型與事件循環(huán) showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言學習javascipt的時候，經(jīng)常聽人說，javascipt即是異步...

TANKING 2019-08-26 13:55 評論0 收藏0
由setTimeout深入JavaScript執(zhí)行環(huán)境的異步機制

摘要：圖片轉(zhuǎn)引自的演講和兩個定時器中回調(diào)的執(zhí)行邏輯便是典型的機制。異步編程關于異步編程我的理解是，在執(zhí)行環(huán)境所提供的異步機制之上，在應用編碼層面上實現(xiàn)整體流程控制的異步風格。問題背景在一次開發(fā)任務中，需要實現(xiàn)如下一個餅狀圖動畫，基于canvas進行繪圖，但由于對于JS運行環(huán)境中異步機制的不了解，所以遇到了一個棘手的問題，始終無法解決，之后在與同事交流之后才恍然大悟。問題的根節(jié)在于經(jīng)典的J...

codeGoogle 2019-08-21 18:29 評論0 收藏0
Javascript系列之javascript機制

摘要：異步任務必須指定回調(diào)函數(shù)，當異步任務從任務隊列回到執(zhí)行棧，回調(diào)函數(shù)就會執(zhí)行。事件循環(huán)主線程從任務隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為。事件循環(huán)事件循環(huán)是指主線程重復從消息隊列中取消息執(zhí)行的過程。參考鏈接：這一次，徹底弄懂 JavaScript 執(zhí)行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...

13651657101 2019-08-22 15:50 評論0 收藏0
淺談js執(zhí)行機制

摘要：這種問題在設置倒計時的經(jīng)常遇到，倒計時開始的時候設置的時間是從服務器拿到的系統(tǒng)時間很準確，但是如果后面不定期像服務期請求系統(tǒng)時間進行校準的話，你可能會發(fā)現(xiàn)倒計時的偏差越來越來大，這就是主線程執(zhí)行的時間比設定的延遲時間長導致的。關于js執(zhí)行機制，老早之前就一直想寫篇文章做個總結，因為和js執(zhí)行順序的面試題碰到的特別多，每次碰到總是會去網(wǎng)上查，沒有系統(tǒng)地總結，搞得每次碰到都是似懂非懂的感...

jone5679 2019-08-23 14:06 評論0 收藏0