好程序員 web 前端分享 JS 引擎的執(zhí)行機(jī)制,請先著重牢記兩點(diǎn)! JS 是單線程語言。
夏邑網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),夏邑網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為夏邑千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢,請找那個(gè)售后服務(wù)好的夏邑做網(wǎng)站的公司定做!
JS 的 EventLoop 是 JS 的執(zhí)行機(jī)制。深入了解 JS 的執(zhí)行,就等于深入了解 JS 里的 eventloop 。
1 、靈魂三問: JS 為什么是單線程的 ? 為什么需要異步 ? 單線程又是如何實(shí)現(xiàn)異步的呢 ?
技術(shù)的出現(xiàn),都跟現(xiàn)實(shí)世界里的應(yīng)用場景密切相關(guān)的。同樣的,我們就結(jié)合現(xiàn)實(shí)場景,來回答這三個(gè)問題。
(1)JS 為什么是單線程的 ?
JS 最初被設(shè)計(jì)用在瀏覽器中,那么想象一下,如果瀏覽器中的 JS 是多線程的。
場景描述:
那么現(xiàn)在有 2 個(gè)進(jìn)程, process1process2 ,由于是多進(jìn)程的 JS ,所以他們對同一個(gè) dom ,同時(shí)進(jìn)行操作。 process1 刪除了該 dom ,而 process2 編輯了該 dom ,同時(shí)下達(dá) 2 個(gè)矛盾的命令,瀏覽器究竟該如何執(zhí)行呢 ?
這樣想, JS 為什么被設(shè)計(jì)成單線程應(yīng)該就容易理解了吧。
(2)JS 為什么需要異步 ?
場景描述:
如果 JS 中不存在異步,只能自上而下執(zhí)行,如果上一行解析時(shí)間很長,那么下面的代碼就會被阻塞。對于用戶而言,阻塞就意味著 " 卡死 " ,這樣就導(dǎo)致了很差的用戶體驗(yàn)。
所以, JS 中存在異步執(zhí)行。
(3)JS 單線程又是如何實(shí)現(xiàn)異步的呢 ?
既然 JS 是單線程的,只能在一條線程上執(zhí)行,又是如何實(shí)現(xiàn)的異步呢 ?
是通過的事件循環(huán) (eventloop) ,理解了 eventloop 機(jī)制,就理解了 JS 的執(zhí)行機(jī)制。
2 、 JS 中的 eventloop(1)
例 1, 觀察它的執(zhí)行順序
console.log(1)setTimeout(function(){console.log(2)},0)console.log(3)
運(yùn)行結(jié)果是: 132
也就是說, setTimeout 里的函數(shù)并沒有立即執(zhí)行,而是延遲了一段時(shí)間,滿足一定條件后才去執(zhí)行的,這類代碼,我們叫異步代碼。
所以,這里我們首先知道了 JS 里的一種分類方式,就是將任務(wù)分為:同步任務(wù)和異步任務(wù)。
按照這種分類方式 :JS 的執(zhí)行機(jī)制是:
首先判斷 JS 是同步還是異步,同步就進(jìn)入主進(jìn)程,異步就進(jìn)入 eventtable
異步任務(wù)在 eventtable 中注冊函數(shù),當(dāng)滿足觸發(fā)條件后,被推入 eventqueue
同步任務(wù)進(jìn)入主線程后一直執(zhí)行,直到主線程空閑時(shí),才會去 eventqueue 中查看是否有可執(zhí)行的異步任務(wù),如果有就推入主進(jìn)程中
以上三步循環(huán)執(zhí)行,這就是 eventloop 。
所以上面的例子,你是否可以描述它的執(zhí)行順序了呢 ?
console.log(1) 是同步任務(wù),放入主線程里
setTimeout() 是異步任務(wù),被放入 eventtable , 秒之后被推入 eventqueue 里
console.log(3 是同步任務(wù),放到主線程里
當(dāng) 1 、 3 在控制條被打印后,主線程去 eventqueue( 事件隊(duì)列 ) 里查看是否有可執(zhí)行的函數(shù),執(zhí)行 setTimeout 里的函數(shù)。
3 、 JS 中的 eventloop(2)
所以,上面關(guān)于 eventloop 就是我對 JS 執(zhí)行機(jī)制的理解,直到我遇到了下面這段代碼。
例 2 :
setTimeout(function(){console.log(' 定時(shí)器開始啦 ')});
newPromise(function(resolve){console.log(' 馬上執(zhí)行 for 循環(huán)啦 ');
for(vari=0;i<10000;i++){i==99&&resolve();
}}).then(function(){console.log(' 執(zhí)行 then 函數(shù)啦 ')});console.log(' 代碼執(zhí)行結(jié)束 ');
嘗試按照,上文我們剛學(xué)到的 JS 執(zhí)行機(jī)制去分析:
setTimeout 是異步任務(wù),被放到 eventtable
newPromise 是同步任務(wù),被放到主進(jìn)程里,直接執(zhí)行打印 console.log(' 馬上執(zhí)行 for 循環(huán)啦 ')
.then 里的函數(shù)是異步任務(wù),被放到 eventtable
console.log(' 代碼執(zhí)行結(jié)束 ') 是同步代碼,被放到主進(jìn)程里,直接執(zhí)行
所以,結(jié)果是:馬上執(zhí)行 for 循環(huán)啦 --- 代碼執(zhí)行結(jié)束 --- 定時(shí)器開始啦 --- 執(zhí)行 then 函數(shù)啦嗎 ?
親自執(zhí)行后,結(jié)果居然不是這樣,而是:馬上執(zhí)行 for 循環(huán)啦 --- 代碼執(zhí)行結(jié)束 --- 執(zhí)行 then 函數(shù)啦 --- 定時(shí)器開始啦
那么,難道是異步任務(wù)的執(zhí)行順序,不是前后順序,而是另有規(guī)定 ? 事實(shí)上,按照異步和同步的劃分方式,并不準(zhǔn)確。
而準(zhǔn)確的劃分方式是:
macro-task( 宏任務(wù) ) :包括整體代碼 script , setTimeout , setInterval
micro-task( 微任務(wù) ) : Promise , process.nextTick
按照這種分類方式, JS 的執(zhí)行機(jī)制是:
執(zhí)行一個(gè)宏任務(wù),過程中如果遇到微任務(wù),就將其放到微任務(wù)的 “事件隊(duì)列”里
當(dāng)前宏任務(wù)執(zhí)行完成后,會查看微任務(wù)的 “事件隊(duì)列”,并將里面全部的微任務(wù)依次執(zhí)行完
重復(fù)以上 2 步驟,結(jié)合 eventloop(1)eventloop(2) ,就是更為準(zhǔn)確的 JS 執(zhí)行機(jī)制了
嘗試按照剛學(xué)的執(zhí)行機(jī)制,去分析例 2 :
首先執(zhí)行 script 下的宏任務(wù),遇到 setTimeout, 將其放到宏任務(wù)的“隊(duì)列”里
遇到 newPromise 直接執(zhí)行,打印 " 馬上執(zhí)行 for 循環(huán)啦 "
遇到 then 方法,是微任務(wù),將其放到微任務(wù)的“隊(duì)列”里。
打印 " 代碼執(zhí)行結(jié)束 "
本輪宏任務(wù)執(zhí)行完畢,查看本輪的微任務(wù),發(fā)現(xiàn)有一個(gè) then 方法里的函數(shù),打印 " 執(zhí)行 then 函數(shù)啦 "
到此 , 本輪的 eventloop 全部完成。
下一輪的循環(huán)里,先執(zhí)行一個(gè)宏任務(wù),發(fā)現(xiàn)宏任務(wù)的 “隊(duì)列”里有一個(gè) setTimeout 里的函數(shù) , 執(zhí)行打印 " 定時(shí)器開始啦 "
所以最后的執(zhí)行順序是:馬上執(zhí)行 for 循環(huán)啦 --- 代碼執(zhí)行結(jié)束 --- 執(zhí)行 then 函數(shù)啦 --- 定時(shí)器開始啦
4 、談?wù)? setTimeout
這段 setTimeout 代碼什么意思 ? 我們一般說 :3 秒后 , 會執(zhí)行 setTimeout 里的那個(gè)函數(shù)
setTimeout(function(){console.log(' 執(zhí)行了 ')},3000)
但是這種說并不嚴(yán)謹(jǐn),準(zhǔn)確的解釋是: 3 秒后, setTimeout 里的函數(shù)被會推入 eventqueue ,而 eventqueue( 事件隊(duì)列 ) 里的任務(wù),只有在主線程空閑時(shí)才會執(zhí)行。
所以只有滿足 (1)3 秒后 (2) 主線程空閑,同時(shí)滿足時(shí),才會 3 秒后執(zhí)行該函數(shù)
如果主線程執(zhí)行內(nèi)容很多,執(zhí)行時(shí)間超過 3 秒,比如執(zhí)行了 10 秒,那么這個(gè)函數(shù)只能 10 秒后執(zhí)行了。
文章名稱:好程序員web前端分享JS引擎的執(zhí)行機(jī)制
當(dāng)前URL:http://bm7419.com/article48/pssoep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、App開發(fā)、商城網(wǎng)站、做網(wǎng)站、企業(yè)網(wǎng)站制作、域名注冊
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)