JavaScript?微任務(wù)和宏任務(wù)講解
前言:
js是一門單線程語言,所以它本身是不可能異步的,但是js的宿主環(huán)境(比如瀏覽器、node)是多線程,宿主環(huán)境通過某種方式(事件驅(qū)動(dòng))使得js具備了異步的屬性。而在js中,我們一般將所有的任務(wù)都分成兩類,一種是同步任務(wù),另外一種是異步任務(wù)。而在異步任務(wù)中,又有著更加細(xì)致的分類,那就是微任務(wù)和宏任務(wù)
1.概念
1.1宏任務(wù)
宏任務(wù) ---- setTimeout
、setInterval
、DOM
事件、AJAX
請求
瀏覽器為了能夠使得JS內(nèi)部task與DOM
任務(wù)能夠有序的執(zhí)行,會(huì)在一個(gè)task
執(zhí)行結(jié)束后,在下一個(gè) task 執(zhí)行開始前,對頁面進(jìn)行重新渲染 (task->渲染->task->…)
1.2微任務(wù)
微任務(wù) ---- Promise
、async
/await
微任務(wù)通常來說就是需要在當(dāng)前 同步任務(wù) 執(zhí)行結(jié)束后立即執(zhí)行的任務(wù),比如對一系列動(dòng)作做出反饋,或者是需要異步的執(zhí)行任務(wù)而又不需要分配一個(gè)新的任務(wù),這樣便可以減小一點(diǎn)性能的開銷。
2.執(zhí)行順序
先來看一段代碼,在來探討執(zhí)行順序:
console.log(1) setTimeout(() => { console.log(2) }) Promise.resolve().then(() => { console.log(3) }) console.log(4)
上面段代碼打印的結(jié)果為1 4 3 2 。從上面代碼,可以得出他們的執(zhí)行順序是:
? 先執(zhí)行同步代碼,遇到異步宏任務(wù)時(shí)候則將異步宏任務(wù)放入宏任務(wù)隊(duì)列中,遇到異步微任務(wù)的時(shí)候則將異步微任務(wù)放入微任務(wù)列表中,當(dāng)所有的同步代碼執(zhí)行完畢后,在將異步微任務(wù)從列表中調(diào)入主線程執(zhí)行,異步微任務(wù)執(zhí)行完畢之后再將異步宏任務(wù)從隊(duì)列中調(diào)入主線程執(zhí)行,一直循環(huán)到素有任務(wù)執(zhí)行完畢。
注意:微任務(wù)執(zhí)行下先于頁面渲染的
3.任務(wù)關(guān)系
宏任務(wù)是主流,當(dāng)js
開始被執(zhí)行的時(shí)候,就是開啟一個(gè)宏任務(wù),在宏任務(wù)中執(zhí)行一條一條的指令,宏任務(wù)可以同時(shí)擁有多個(gè),但是會(huì)按照順序一個(gè)一個(gè)執(zhí)行。
每一個(gè)宏任務(wù),后面都可以跟著一個(gè)微任務(wù)隊(duì)列,如果微任務(wù)隊(duì)列中有指令或者方法,則先執(zhí)行。如果沒有,則開始執(zhí)行下一個(gè)宏任務(wù),知道所有的宏任務(wù)執(zhí)行完畢。
4.任務(wù)詳解
為什么有了宏任務(wù)后,還是會(huì)有微任務(wù)的存在?那是因?yàn)楹耆蝿?wù)太占用性能,當(dāng)需要一些較早就準(zhǔn)備好的方法,排在最后才執(zhí)行的時(shí)候,又不想新增一個(gè)宏任務(wù),那么就可以把這些方法,一個(gè)一個(gè)的放在微任務(wù)隊(duì)列里面,在這個(gè)宏任務(wù)中的代碼執(zhí)行完后,就會(huì)執(zhí)行微任務(wù)隊(duì)列。
因此當(dāng)前同步代碼執(zhí)行,遇到異步任務(wù),如果是異步宏任務(wù),放入下一輪宏任務(wù)隊(duì)列,是異步微任務(wù),放入微任務(wù)隊(duì)列跟在當(dāng)前宏任務(wù)屁股后面。微任務(wù)相當(dāng)于宏任務(wù)的小尾巴,因此當(dāng)前宏任務(wù)執(zhí)行完,在它后面等著的異步微任務(wù)就會(huì)被立刻放入隊(duì)列繼續(xù)執(zhí)行。而異步的宏任務(wù)需要等到下一輪,從而造成了異步中微任務(wù)在宏任務(wù)之前執(zhí)行的情況。
到此這篇關(guān)于JavaScript
微任務(wù)和宏任務(wù)講解的文章就介紹到這了,更多相關(guān)JavaScript
微任務(wù)和宏任務(wù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
- 淺談js中的宏任務(wù)和微任務(wù)
- JavaScript中的宏任務(wù)和微任務(wù)執(zhí)行順序
- JavaScript宏任務(wù)和微任務(wù)區(qū)別介紹
- JS事件循環(huán)機(jī)制event loop宏任務(wù)微任務(wù)原理解析
- 詳解JS事件循環(huán)及宏任務(wù)微任務(wù)的原理
- JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析
- 淺談javascript事件環(huán)微任務(wù)和宏任務(wù)隊(duì)列原理
- JavaScript中的宏任務(wù)和微任務(wù)詳情
- JavaScript的宏任務(wù)和微任務(wù)有哪些以及怎樣執(zhí)行的詳解
相關(guān)文章
js實(shí)現(xiàn)按一下刪除鍵刪除整個(gè)單詞附demo
使用代碼實(shí)現(xiàn)當(dāng)刪除單詞時(shí)就一次性刪除整個(gè)單詞,有個(gè)demo,相信大家看過之后就知道是什么意思了2014-09-09bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡單應(yīng)用示例
這篇文章主要介紹了bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡單應(yīng)用,結(jié)合具體實(shí)例形式分析了基于bootstrap的列表布局結(jié)構(gòu)頁面實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-03-03在IE下獲取object(ActiveX)的Param的代碼
在IE下,獲取Param的時(shí)候有個(gè)詭異現(xiàn)象(不知道算不算bug)。2009-09-09關(guān)于預(yù)加載InstantClick的問題解決方法
本篇文章主要介紹了關(guān)于預(yù)加載InstantClick的問題解決方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09Uni-app跨平臺開發(fā)應(yīng)用入門實(shí)戰(zhàn)
這篇文章主要為大家介紹了Uni-app跨平臺開發(fā)應(yīng)用入門實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03JS實(shí)現(xiàn)橫向拉伸動(dòng)感伸縮菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)橫向拉伸動(dòng)感伸縮菜單效果,涉及javascript基于定時(shí)函數(shù)及鼠標(biāo)事件操作頁面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09layui實(shí)現(xiàn)數(shù)據(jù)分頁功能
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)分頁功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07Javascript 更新 JavaScript 數(shù)組的 uniq 方法
2008-01-01