JavaScript 操作宏任務(wù)與微任務(wù)
宏任務(wù)與微任務(wù)
- javaScript是單線程語言(如果多線程dom會瘋掉)
- 所以在同一時間只能執(zhí)行一個任務(wù),稱為主線程,用來執(zhí)行同步任務(wù)
- 同時還有兩個任務(wù)列表用于存放異步任務(wù),宏任務(wù)、微任務(wù)
- 執(zhí)行順序?yàn)椋?strong>主線程=>微任務(wù)=>宏任務(wù)
有關(guān)定時器
- 定時器模塊,到達(dá)時間點(diǎn)將其放入宏任務(wù)隊(duì)列
- 如果主線程沒有任務(wù)則執(zhí)行,如果有則等待執(zhí)行完成后再繼續(xù)執(zhí)行
- 如果有兩個相同時間的定時器則上面的先執(zhí)行下面的后執(zhí)行
- 如果兩個時間不同的定時器則時間短的先執(zhí)行時間長的后執(zhí)行
注意點(diǎn):
- 定時器的⏲是在定時器模塊中完成的,完成后就和普通異步任務(wù)一樣了,
- 時間方面由于主線程實(shí)踐過長的原因,有可能會延后

有關(guān)Promise
- promise的構(gòu)造函數(shù)為同步任務(wù)
- 執(zhí)行順序永遠(yuǎn)為:同步=>微任務(wù)=>宏任務(wù)
- 在嵌套代碼中可能出現(xiàn)宏任務(wù)中有同步、宏任務(wù)、微任務(wù),這時將他們放到下一次執(zhí)行中的隊(duì)列/主線程等待執(zhí)行
setTimeout(() => {
console.log("定時器");
setTimeout(() => {
console.log("timeout timeout");
}, 0);
new Promise(resolve => {
console.log("settimeout Promise");
resolve();
}).then(() => {
console.log("settimeout then");
});
}, 0);
new Promise(resolve => {
console.log("Promise");
resolve();
}).then(() => {
console.log("then");
});
console.log("ssss");
執(zhí)行順序:Promise=>ssss=>then=>定時器=>settimeout Promise=>settimeout then=>timeout timeout
DOM渲染任務(wù)
瀏覽器渲染:CSS+DOM執(zhí)行遇到j(luò)s優(yōu)先執(zhí)行js
可以把js盡量放在下面:避免白屏
任務(wù)共享內(nèi)存
任務(wù)不會同時執(zhí)行,會一個一個的被調(diào)度,他們共享內(nèi)存
Promise微任務(wù)處理復(fù)雜業(yè)務(wù)
使用promise可以將任務(wù)變成異步任務(wù)使其不影響同步任務(wù)的執(zhí)行
到此這篇關(guān)于JavaScript 操作宏任務(wù)與微任務(wù)的文章就介紹到這了,更多相關(guān)JavaScript宏任務(wù)與微任務(wù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS事件循環(huán)機(jī)制event loop宏任務(wù)微任務(wù)原理解析
- JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析
- 淺談javascript事件環(huán)微任務(wù)和宏任務(wù)隊(duì)列原理
- 淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
- 淺談js中的宏任務(wù)和微任務(wù)
- JavaScript中的宏任務(wù)和微任務(wù)詳情
- JavaScript?微任務(wù)和宏任務(wù)講解
- 詳解JS事件循環(huán)及宏任務(wù)微任務(wù)的原理
- Node.js中的async?和?await?關(guān)鍵字微任務(wù)和宏任務(wù)
- JavaScript宏任務(wù)和微任務(wù)區(qū)別介紹
相關(guān)文章
簡單介紹JavaScript的變量和數(shù)據(jù)類型
這篇文章主要介紹了簡單介紹JavaScript的變量和數(shù)據(jù)類型,是JS入門中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
詳解JavaScript中的客戶端消息框架設(shè)計原理
這篇文章主要介紹了詳解JavaScript中的客戶端消息框架設(shè)計原理,包括客戶端和服務(wù)器端的通信等方面的內(nèi)容,需要的朋友可以參考下2015-06-06
Javascript基礎(chǔ)_簡單比較undefined和null 值
下面小編就為大家?guī)硪黄狫avascript基礎(chǔ)_簡單比較undefined和null 值。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JavaScript中利用各種循環(huán)進(jìn)行遍歷的方式總結(jié)
這篇文章主要介紹了JavaScript中利用各種循環(huán)進(jìn)行遍歷的方式總結(jié),是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-11-11
JavaScript高級程序設(shè)計(第3版)學(xué)習(xí)筆記8 js函數(shù)(中)
接著看函數(shù)——這個具有魔幻色彩的對象。在上篇文章中說函數(shù)內(nèi)部屬性時,還遺留了一個this內(nèi)部屬性沒有解釋,不過在說this之前,我想先說一說執(zhí)行環(huán)境和作用域的概念2012-10-10

