10分鐘理解JS引擎的執行機制

zzbo 發布于2019-08-26 17:04 / 2434人閱讀

摘要：深入理解引擎的執行機制靈魂三問為什么是單線程的為什么需要異步單線程又是如何實現異步的呢中的中的說說首先請牢記點是單線程語言的是的執行機制。

深入理解JS引擎的執行機制

1.靈魂三問 : JS為什么是單線程的? 為什么需要異步? 單線程又是如何實現異步的呢?

2.JS中的event loop(1)

3.JS中的event loop(2)

4.說說setTimeout

首先,請牢記2點:

(1) JS是單線程語言

(2) JS的Event Loop是JS的執行機制。深入了解JS的執行,就等于深入了解JS里的event loop

1.靈魂三問 : JS為什么是單線程的? 為什么需要異步? 單線程又是如何實現異步的呢?

技術的出現,都跟現實世界里的應用場景密切相關的。

同樣的,我們就結合現實場景,來回答這三個問題

(1) JS為什么是單線程的?

JS最初被設計用在瀏覽器中,那么想象一下,如果瀏覽器中的JS是多線程的。

場景描述:

那么現在有2個線程,process1 process2,由于是多線程的JS,所以他們對同一個dom,同時進行操作

process1 刪除了該dom,而process2 編輯了該dom,同時下達2個矛盾的命令,瀏覽器究竟該如何執行呢?

這樣想,JS為什么被設計成單線程應該就容易理解了吧。

(2) JS為什么需要異步?

場景描述:

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

所以,JS中存在異步執行。

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

既然JS是單線程的,只能在一條線程上執行,又是如何實現的異步呢?

是通過的事件循環(event loop),理解了event loop機制,就理解了JS的執行機制

2.JS中的event loop(1)

例1,觀察它的執行順序

    console.log(1)
    
    setTimeout(function(){
        console.log(2)
    },0)

    console.log(3)

運行結果是: 1 3 2

也就是說,setTimeout里的函數并沒有立即執行,而是延遲了一段時間,滿足一定條件后,才去執行的,這類代碼,我們叫異步代碼。

所以,這里我們首先知道了JS里的一種分類方式,就是將任務分為: 同步任務和異步任務

圖片描述

按照這種分類方式:JS的執行機制是

首先判斷JS是同步還是異步,同步就進入主線程,異步就進入event table

異步任務在event table中注冊函數,當滿足觸發條件后,被推入event queue

同步任務進入主線程后一直執行,直到主線程空閑時,才會去event queue中查看是否有可執行的異步任務,如果有就推入主線程中

以上三步循環執行,這就是event loop

所以上面的例子,你是否可以描述它的執行順序了呢?

console.log(1) 是同步任務,放入主線程里
setTimeout() 是異步任務,被放入event table, 0秒之后被推入event queue里
console.log(3 是同步任務,放到主線程里

當 1、 3在控制條被打印后,主線程去event queue(事件隊列)里查看是否有可執行的函數,執行setTimeout里的函數

3.JS中的event loop(2)

所以,上面關于event loop就是我對JS執行機制的理解,直到我遇到了下面這段代碼

例2:

 setTimeout(function(){
     console.log("定時器開始啦")
 });
 
 new Promise(function(resolve){
     console.log("馬上執行for循環啦");
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log("執行then函數啦")
 });
 
 console.log("代碼執行結束");

嘗試按照,上文我們剛學到的JS執行機制去分析

setTimeout 是異步任務,被放到event table

new Promise 是同步任務,被放到主線程里,直接執行打印 console.log("馬上執行for循環啦")

.then里的函數是 異步任務,被放到event table

 console.log("代碼執行結束")是同步代碼,被放到主線程里,直接執行

所以,結果是【馬上執行for循環啦 --- 代碼執行結束 --- 定時器開始啦 --- 執行then函數啦】嗎?

親自執行后,結果居然不是這樣,而是【馬上執行for循環啦 --- 代碼執行結束 --- 執行then函數啦 --- 定時器開始啦】

那么,難道是異步任務的執行順序,不是前后順序,而是另有規定? 事實上,按照異步和同步的劃分方式,并不準確。

而準確的劃分方式是:

macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval

micro-task(微任務)：Promise，process.nextTick

按照這種分類方式:JS的執行機制是

執行一個宏任務,過程中如果遇到微任務,就將其放到微任務的【事件隊列】里

當前宏任務執行完成后,會查看微任務的【事件隊列】,并將里面全部的微任務依次執行完

重復以上2步驟,結合event loop(1) event loop(2) ,就是更為準確的JS執行機制了。

嘗試按照剛學的執行機制,去分析例2:

首先執行script下的宏任務,遇到setTimeout,將其放到宏任務的【隊列】里

遇到 new Promise直接執行,打印"馬上執行for循環啦"

遇到then方法,是微任務,將其放到微任務的【隊列里】

打印 "代碼執行結束"

本輪宏任務執行完畢,查看本輪的微任務,發現有一個then方法里的函數, 打印"執行then函數啦"

到此,本輪的event loop 全部完成。


下一輪的循環里,先執行一個宏任務,發現宏任務的【隊列】里有一個 setTimeout里的函數,執行打印"定時器開始啦"

所以最后的執行順序是【馬上執行for循環啦 --- 代碼執行結束 --- 執行then函數啦 --- 定時器開始啦】

4. 談談setTimeout

這段setTimeout代碼什么意思? 我們一般說: 3秒后,會執行setTimeout里的那個函數

 setTimeout(function(){
    console.log("執行了")
 },3000)

但是這種說并不嚴謹,準確的解釋是: 3秒后,setTimeout里的函數被會推入event queue,而event queue(事件隊列)里的任務,只有在主線程空閑時才會執行。

所以只有滿足 (1)3秒后 (2)主線程空閑,同時滿足時,才會3秒后執行該函數

如果主線程執行內容很多,執行時間超過3秒,比如執行了10秒,那么這個函數只能10秒后執行了

GPU云服務器云服務器 js執行機制 php執行的機制原理 linux每分鐘執行 js閉包的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110103.html

JavaScript 的事件機制

摘要：的事件機制關于，查閱多篇博客，或多或少總有些出入，在此寫下自己關于的理解按同步與異步分首先判斷是同步還是異步同步就進入主進程異步就進入異步任務在中注冊函數當滿足觸發條件后被推入同步任務進入主線程后一直執行直到主線程空閑時才會去中查看是否有可 JavaScript 的事件機制關于Event Loop，查閱多篇博客，或多或少總有些出入，在此寫下自己關于Event Loop的理解按同步與...

Turbo 2019-08-23 11:30 評論0 收藏0
JS 異步的實現

摘要：由于引擎同一時間只執行一段代碼這是由單線程的性質決定的，所以每個代碼塊阻塞了其它異步事件的進行。這意味著瀏覽器將等待著一個新的異步事件發生。異步的任務執行的順序是不固定的，主要看返回的速度。我們經常說JS是單線程的，比如node.js研討會上大家都說JS的特色之一是單線程的，這樣使JS更簡單明了，可是大家真的理解所謂JS的單線程機制嗎？單線程時，基于事件的異步機制又該當如何，這些知識...

sihai 2019-08-22 11:14 評論0 收藏0
從底層看JS執行機制

摘要：作用域鏈用于表明上下文的執行順序。當前上下文執行完畢則出棧，執行下一個上下文。從一個簡單的例子出發先從一個簡單的例子出發（先不涉及異步），看看自己是否大致了解瀏覽器的執行機制： console.log(a); var a=1; function foo(a){ console.log(a); var a=2; console.log(a); } foo(a)...

thursday 2019-08-26 13:57 評論0 收藏0
JS核心知識點梳理——異步，單線程，運行機制

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

TANKING 2019-08-26 13:55 評論0 收藏0
Event Loop - JS執行機制

摘要：心塞塞根據規范，事件循環是通過任務隊列的機制來進行協調的。等便是任務源，而進入任務隊列的是他們指定的具體執行任務回調函數。然后當前本輪的結束，主線程可以繼續取下一個執行。依然是：經濟基礎決定上層建筑。說明首先，旨在搞清常用的同步異步執行機制其次，暫時不討論node.js的Event Loop執行機制，以下關于瀏覽器的Event Loop執行機制最后，借鑒了很多前輩的研究文...

muddyway 2019-08-22 17:32 評論0 收藏0