JavaScript 操作宏任務(wù)與微任務(wù)
宏任務(wù)與微任務(wù)
- javaScript是單線程語言(如果多線程dom會瘋掉)
- 所以在同一時間只能執(zhí)行一個任務(wù),稱為主線程,用來執(zhí)行同步任務(wù)
- 同時還有兩個任務(wù)列表用于存放異步任務(wù),宏任務(wù)、微任務(wù)
- 執(zhí)行順序為:主線程=>微任務(wù)=>宏任務(wù)
有關(guān)定時器
- 定時器模塊,到達(dá)時間點將其放入宏任務(wù)隊列
- 如果主線程沒有任務(wù)則執(zhí)行,如果有則等待執(zhí)行完成后再繼續(xù)執(zhí)行
- 如果有兩個相同時間的定時器則上面的先執(zhí)行下面的后執(zhí)行
- 如果兩個時間不同的定時器則時間短的先執(zhí)行時間長的后執(zhí)行
注意點:
- 定時器的⏲是在定時器模塊中完成的,完成后就和普通異步任務(wù)一樣了,
- 時間方面由于主線程實踐過長的原因,有可能會延后
有關(guān)Promise
- promise的構(gòu)造函數(shù)為同步任務(wù)
- 執(zhí)行順序永遠(yuǎn)為:同步=>微任務(wù)=>宏任務(wù)
- 在嵌套代碼中可能出現(xiàn)宏任務(wù)中有同步、宏任務(wù)、微任務(wù),這時將他們放到下一次執(zhí)行中的隊列/主線程等待執(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)機制event loop宏任務(wù)微任務(wù)原理解析
- JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析
- 淺談javascript事件環(huán)微任務(wù)和宏任務(wù)隊列原理
- 淺談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)文章
JS阻止冒泡事件以及默認(rèn)事件發(fā)生的簡單方法
這篇文章主要介紹了JS阻止冒泡事件以及默認(rèn)事件發(fā)生的簡單方法,有需要的朋友可以參考一下2014-01-01你必須知道的JavaScript 變量命名規(guī)則詳解
在編寫代碼的時候難免涉及到變量的命名問題,不能只要求變量名的語法正確,而忽略了變量命名對代碼可讀性的影響2013-05-05簡介JavaScript中的getSeconds()方法的使用
這篇文章主要介紹了簡介JavaScript中的getSeconds()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06JavaScript中Number.NEGATIVE_INFINITY值的使用詳解
這篇文章主要介紹了JavaScript中Number.NEGATIVE_INFINITY值的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06JS函數(shù)實現(xiàn)動態(tài)添加CSS樣式表文件
有時會使用一些改變心情方面的想法,比如JS函數(shù)實現(xiàn)動態(tài)添加CSS樣式表文件,這樣就可以做到隨機加載心情文件,需要的朋友可以了解下2012-12-12a標(biāo)簽的href與onclick事件的區(qū)別詳解
對于a標(biāo)簽的href與onclick事件,大家都經(jīng)常見到,也經(jīng)常使用,可它們有什么區(qū)別呢?下面就讓小編來給大家詳細(xì)介紹下,感興趣的朋友可以學(xué)習(xí)下,不用謝了,哈哈2014-11-11javascript高級選擇器querySelector和querySelectorAll全面解析
下面小編就為大家?guī)硪黄猨avascript高級選擇器querySelector和querySelectorAll全面解析。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-04-04