詳解JavaScript 的執(zhí)行機(jī)制
一、關(guān)于javascript
javascript是一門單線程語言,在最新的HTML5中提出了Web Worker,但javascript是單線程這一核心仍未改變。
為什么js是單線程的語言?因?yàn)樽畛醯膉s是用來在瀏覽器驗(yàn)證表單操縱DOM元素的。如果js是多線程的話,兩個(gè)線程同時(shí)對一個(gè)DOM進(jìn)行了相互沖突的操作,那么瀏覽器的解析是無法執(zhí)行的。
Web Worker 的作用,就是為 JavaScript 創(chuàng)造多線程環(huán)境,允許主線程創(chuàng)建 Worker 線程,將一些任務(wù)分配給后者運(yùn)行。在主線程運(yùn)行的同時(shí),Worker 線程在后臺運(yùn)行,兩者互不干擾。等到 Worker 線程完成計(jì)算任務(wù),再把結(jié)果返回給主線程。
二、javascript事件循環(huán)
當(dāng)我們調(diào)用一個(gè)方法的時(shí)候,js會生成一個(gè)與這個(gè)方法對應(yīng)的執(zhí)行環(huán)境(context),又叫執(zhí)行上下文。這個(gè)執(zhí)行環(huán)境中存在著這個(gè)方法的私有作用域,上層作用域的指向,方法的參數(shù),這個(gè)作用域中定義的變量以及這個(gè)作用域的this對象。 而當(dāng)一系列方法被依次調(diào)用的時(shí)候,因?yàn)閖s是單線程的,同一時(shí)間只能執(zhí)行一個(gè)方法,于是這些方法被排隊(duì)在一個(gè)單獨(dú)的地方。這個(gè)地方被稱為執(zhí)行棧。
js引擎遇到一個(gè)異步事件后并不會一直等待其返回結(jié)果,而是會將這個(gè)事件掛起,繼續(xù)執(zhí)行執(zhí)行棧中的其他任務(wù)。
當(dāng)一個(gè)異步事件返回結(jié)果后,js會將這個(gè)事件加入與當(dāng)前執(zhí)行棧不同的另一個(gè)隊(duì)列,我們稱之為事件隊(duì)列。被放入事件隊(duì)列不會立刻執(zhí)行其回調(diào),而是等待當(dāng)前執(zhí)行棧中的所有任務(wù)都執(zhí)行完畢, 主線程處于閑置狀態(tài)時(shí),主線程會去查找事件隊(duì)列是否有任務(wù)。如果有,那么主線程會從中取出排在第一位的事件,并把這個(gè)事件對應(yīng)的回調(diào)放入執(zhí)行棧中,然后執(zhí)行其中的同步代碼。如此反復(fù),這樣就形成了一個(gè)無限的循環(huán)。
三、setTimeout
setTimeout這個(gè)函數(shù),是經(jīng)過指定時(shí)間后,把要執(zhí)行的任務(wù)加入到Event Queue中,又因?yàn)槭菃尉€程任務(wù)要一個(gè)一個(gè)執(zhí)行,如果前面的任務(wù)需要的時(shí)間太久,那么只能等著。
setTimeout(() => { task() },3000) sleep(10000000)
上述代碼執(zhí)行task()需要的時(shí)間遠(yuǎn)遠(yuǎn)超過3秒,執(zhí)行過程如下:
- task()進(jìn)入Event Table并注冊,計(jì)時(shí)開始。
- 執(zhí)行sleep函數(shù),很慢,非常慢,計(jì)時(shí)仍在繼續(xù)。
- 3秒到了,計(jì)時(shí)事件timeout完成,task()進(jìn)入Event Queue,但是sleep還沒執(zhí)行完,只好等著。
- sleep終于執(zhí)行完了,task()終于從Event Queue進(jìn)入了主線程執(zhí)行。
setTimeout(fn,0)
的含義是,指定某個(gè)任務(wù)在主線程最早可得的空閑時(shí)間執(zhí)行,意思就是不用再等多少秒了,只要主線程執(zhí)行棧內(nèi)的同步任務(wù)全部執(zhí)行完成,棧為空就馬上執(zhí)行。
四、setInterval
對于執(zhí)行順序來說,setInterval會每隔指定的時(shí)間將注冊的函數(shù)置入Event Queue,如果前面的任務(wù)耗時(shí)太久,那么同樣需要等待。
唯一需要注意的一點(diǎn)是,對于setInterval(fn,ms)來說,我們已經(jīng)知道不是每過ms秒會執(zhí)行一次fn,而是每過ms秒,會有fn進(jìn)入Event Queue。
五、Promise與process.nextTick(callback)
Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。
所謂Promise,簡單說就是一個(gè)容器,里面保存著某個(gè)未來才會結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語法上說,Promise 是一個(gè)對象,從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API,各種異步操作都可以用同樣的方法進(jìn)行處理。
process.nextTick(callback)類似node.js版的"setTimeout",在事件循環(huán)的下一次循環(huán)中調(diào)用 callback 回調(diào)函數(shù)。
六、宏任務(wù)和微任務(wù)
- macro-task(宏任務(wù)):包括整體代碼script,setTimeout,setInterval
- micro-task(微任務(wù)):Promise.then,process.nextTick
不同類型的任務(wù)會進(jìn)入對應(yīng)的Event Queue,比如setTimeout和setInterval會進(jìn)入相同的Event Queue。
事件循環(huán)的順序,決定js代碼的執(zhí)行順序。
進(jìn)入整體代碼(宏任務(wù))后,開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始,找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢,再執(zhí)行所有的微任務(wù)。
setTimeout(function() { console.log('setTimeout'); }) new Promise(function(resolve) { console.log('promise'); }).then(function() { console.log('then'); }) console.log('console');
- 這段代碼作為宏任務(wù),進(jìn)入主線程。
- 先遇到setTimeout,那么將其回調(diào)函數(shù)注冊后分發(fā)到宏任務(wù)Event Queue。
- 接下來遇到了Promise,new Promise立即執(zhí)行,因?yàn)閚ew Promise回調(diào)函數(shù)中的代碼是同步任務(wù),then函數(shù)分發(fā)到微任務(wù)Event Queue。
- 遇到console.log(),立即執(zhí)行。
- 好啦,整體代碼script作為第一個(gè)宏任務(wù)執(zhí)行結(jié)束,看看有哪些微任務(wù)?我們發(fā)現(xiàn)了then在微任務(wù)Event Queue里面,執(zhí)行。
- 第一輪事件循環(huán)結(jié)束了,我們開始第二輪循環(huán),當(dāng)然要從宏任務(wù)Event Queue開始。我們發(fā)現(xiàn)了宏任務(wù)Event Queue中setTimeout對應(yīng)的回調(diào)函數(shù),立即執(zhí)行。
- 結(jié)束。
七、async await
1.async 做一件什么事情?
帶 async 關(guān)鍵字的函數(shù),它使得你的函數(shù)的返回值必定是 promise 對象。
也就是,如果async關(guān)鍵字函數(shù)返回的不是promise,會自動用 Promise.resolve() 包裝。如果async關(guān)鍵字函數(shù)顯式地返回promise,那就以你返回的promise為準(zhǔn)。
2.await 在等什么?
await等的是右側(cè)「表達(dá)式」的結(jié)果。也就是說,右側(cè)如果是函數(shù),那么函數(shù)的return值就是「表達(dá)式的結(jié)果」。右側(cè)如果是一個(gè) 'hello' 或者什么值,那表達(dá)式的結(jié)果就是 'hello'。
3.await 等到之后,做了一件什么事情?
await右側(cè)表達(dá)式的結(jié)果,就是await要等的東西。等到之后,對于await來說,分2個(gè)情況:
- 不是promise對象
- 是promise對象
如果不是 promise , await會阻塞后面的代碼,先執(zhí)行async外面的同步代碼,同步代碼執(zhí)行完,再回到async內(nèi)部,把這個(gè)非promise的東西,作為 await表達(dá)式的結(jié)果。
如果它等到的是一個(gè) promise 對象,await 也會暫停async后面的代碼,先執(zhí)行async外面的同步代碼,等著 Promise 對象 fulfilled,然后把 resolve 的參數(shù)作為 await 表達(dá)式的運(yùn)算結(jié)果。
4.示例
async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function () { console.log('setTimeout'); }, 0); async1(); new Promise(function (resolve) { console.log('promise1'); resolve(); }).then(function () { console.log('promise2'); }); console.log('script end');
- 這段代碼作為宏任務(wù),進(jìn)入主線程。
- 先打印出script start。接著執(zhí)行函數(shù)async1。
- 打印出async1 start,執(zhí)行到await,執(zhí)行函數(shù)async2,打印出async2。
- 此時(shí)await會阻塞async1后面的代碼,會先執(zhí)行async1外面的同步代碼。
- setTimeout放入事件循環(huán)的宏任務(wù)。接著執(zhí)行到Promise,打印出promise1,promise.then放入事件循環(huán)的微任務(wù)。接著打印script end。
- 現(xiàn)在async1外面的同步代碼執(zhí)行完畢,回到async1內(nèi)部打印出async1 end。
- 整體代碼執(zhí)行完畢,執(zhí)行微任務(wù)promise.then,打印出promise2。
- 最后執(zhí)行宏任務(wù)setTimeout,打印setTimeout。
所以這段代碼的執(zhí)行順序?yàn)椋簊cript start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout
以上就是詳解JavaScript 的執(zhí)行機(jī)制的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 執(zhí)行機(jī)制的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
基于Proxy的小程序狀態(tài)管理實(shí)現(xiàn)
這篇文章主要介紹了基于Proxy的小程序狀態(tài)管理實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06javascript 二進(jìn)制運(yùn)算技巧解析
javascript 中的二進(jìn)制運(yùn)算的一些技巧,曬出來和你們分享一下,希望可以幫助你們2012-11-11微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動功能代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法,簡單講述了廣義表的原理與相關(guān)概念,并結(jié)合實(shí)例形式分析了javascript定義與使用廣義表的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04JavaScript中兩種鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼
方法鏈一般適合對一個(gè)對象進(jìn)行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量,缺點(diǎn)是它占用了函數(shù)的返回值。2011-01-01擴(kuò)展javascript的Date方法實(shí)現(xiàn)代碼(prototype)
長期從事C#的開發(fā),被C#影響著我的思維。C#中DateTime的操作就很方便,于是就參考它對js的Date做了擴(kuò)展。2010-11-11JavaScript中cookie工具函數(shù)封裝的示例代碼
這篇文章給大家主要介紹了JavaScript中cookie工具函數(shù)的封裝,文中給出了詳細(xì)的實(shí)現(xiàn)步驟和示例代碼,相信會對大家的理解很有幫助,有需要的朋友們下面來一起看看吧。2016-10-10