成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入淺出任務(wù)隊(duì)列機(jī)制，非常淺

ideaa / 1286人閱讀

摘要：即任務(wù)執(zhí)行完畢，接著執(zhí)行完所有的任務(wù)后，此時(shí)本輪循環(huán)結(jié)束，開(kāi)始執(zhí)行。完畢之后接著下一輪循環(huán)。來(lái)道經(jīng)典題目答案是先走完所有同步代碼到微任務(wù)宏任務(wù)

前言

眾所周知，js是單線程的，就像我們不能一邊刷牙一邊洗臉（或許有些大佬真的可以），那么單線程如何才能規(guī)劃調(diào)度好要做的任務(wù)呢？
這個(gè)時(shí)候就要介紹一下這個(gè)任務(wù)機(jī)制了~

任務(wù)種類

宏任務(wù)

微任務(wù)

注意：瀏覽器環(huán)境和node環(huán)境是不一樣的，本文只討論瀏覽器環(huán)境

規(guī)則

執(zhí)行一個(gè)宏任務(wù)(先執(zhí)行同步代碼)-->執(zhí)行所有微任務(wù)-->UI render-->執(zhí)行下一個(gè)宏任務(wù)-->執(zhí)行所有微任務(wù)-->UI render-->

根據(jù)HTML Standard，一輪事件循環(huán)執(zhí)行結(jié)束之后，下輪事件循環(huán)執(zhí)行之前開(kāi)始進(jìn)行UI render。即：macro-task任務(wù)執(zhí)行完畢，接著執(zhí)行完所有的micro-task任務(wù)后，此時(shí)本輪循環(huán)結(jié)束，開(kāi)始執(zhí)行UI render。UI render完畢之后接著下一輪循環(huán)。但是UI render不一定會(huì)執(zhí)行，因?yàn)樾枰紤]ui渲染消耗的性能已經(jīng)有沒(méi)有ui變動(dòng)

需要注意的是，微任務(wù)是有優(yōu)先級(jí)的，就如同上面的表格從上往下一樣，nextTick>Promise>MutationObserver.

那么宏任務(wù)有沒(méi)有優(yōu)先級(jí)呢？？

大部分瀏覽器會(huì)把DOM事件回調(diào)優(yōu)先處理 因?yàn)橐嵘脩趔w驗(yàn) 給用戶反饋，其次是network IO操作的回調(diào)，再然后是UIrender，之后的順序就難以捉摸了，其實(shí)不同瀏覽器的表現(xiàn)也不太一樣，這里不做過(guò)多討論。

來(lái)道經(jīng)典題目 
console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

答案是
"script start"、"script end"、"promise1"、"promise2"、"setTimeout"
先走完所有同步代碼-到promise微任務(wù)-宏任務(wù)setTimeout

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101710.html

相關(guān)文章

  • 一篇文章教會(huì)你Event loop——瀏覽器和Node

    摘要：如果沒(méi)到毫秒，那么階段就會(huì)跳過(guò)，進(jìn)入階段，先執(zhí)行的回調(diào)函數(shù)。參考文檔什么是瀏覽器的事件循環(huán)不要混淆和瀏覽器中的定時(shí)器詳解瀏覽器和不同的事件循環(huán)深入理解事件循環(huán)機(jī)制篇中的執(zhí)行機(jī)制 最近對(duì)Event loop比較感興趣，所以了解了一下。但是發(fā)現(xiàn)整個(gè)Event loop盡管有很多篇文章，但是沒(méi)有一篇可以看完就對(duì)它所有內(nèi)容都了解的文章。大部分的文章都只闡述了瀏覽器或者Node二者之一，沒(méi)有對(duì)比...

    Leck1e 評(píng)論0 收藏0

  • js基礎(chǔ)深入淺出

    摘要：當(dāng)多個(gè)事件觸發(fā)的時(shí)候，會(huì)把異步事件依次的放入里等同步事件執(zhí)行完之后，再去隊(duì)列里一個(gè)個(gè)執(zhí)行拾遺常用方法總結(jié)面試的信心來(lái)源于過(guò)硬的基礎(chǔ)參考高級(jí)程序設(shè)計(jì)你所不知道的深入淺出知識(shí)點(diǎn)思維導(dǎo)圖經(jīng)典實(shí)例總結(jié)那些剪不斷理還亂的關(guān)系 持續(xù)不斷更新。。。 基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區(qū)別 基本類型和字面值相等，...

    phodal 評(píng)論0 收藏0

  • 深入前端-徹底搞懂JS的運(yùn)行機(jī)制

    摘要：瀏覽器是多進(jìn)程的詳情看我上篇總結(jié)瀏覽器執(zhí)行機(jī)制的文章深入前端徹底搞懂瀏覽器運(yùn)行機(jī)制瀏覽器每打開(kāi)一個(gè)標(biāo)簽頁(yè)，就相當(dāng)于創(chuàng)建了一個(gè)獨(dú)立的瀏覽器進(jìn)程。執(zhí)行異步操作事件完成，回調(diào)函數(shù)進(jìn)入。主線程從讀取回調(diào)函數(shù)并執(zhí)行。 最近看了很多關(guān)于JS運(yùn)行機(jī)制的文章，每篇都獲益匪淺，但各有不同，所以在這里對(duì)這幾篇文章里說(shuō)的很精辟的地方做一個(gè)總結(jié)，參考文章鏈接見(jiàn)最后。本文博客地址 了解進(jìn)程和線程 進(jìn)程是應(yīng)用...

    luckyw 評(píng)論0 收藏0

  • 深入前端-徹底搞懂JS的運(yùn)行機(jī)制

    摘要：瀏覽器是多進(jìn)程的詳情看我上篇總結(jié)瀏覽器執(zhí)行機(jī)制的文章深入前端徹底搞懂瀏覽器運(yùn)行機(jī)制瀏覽器每打開(kāi)一個(gè)標(biāo)簽頁(yè)，就相當(dāng)于創(chuàng)建了一個(gè)獨(dú)立的瀏覽器進(jìn)程。執(zhí)行異步操作事件完成，回調(diào)函數(shù)進(jìn)入。主線程從讀取回調(diào)函數(shù)并執(zhí)行。 最近看了很多關(guān)于JS運(yùn)行機(jī)制的文章，每篇都獲益匪淺，但各有不同，所以在這里對(duì)這幾篇文章里說(shuō)的很精辟的地方做一個(gè)總結(jié)，參考文章鏈接見(jiàn)最后。本文博客地址 了解進(jìn)程和線程 進(jìn)程是應(yīng)用...

    jaysun 評(píng)論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（十二）：深入核心，詳解事件循環(huán)機(jī)制

    摘要：前端基礎(chǔ)進(jìn)階正是圍繞這條線索慢慢展開(kāi)，而事件循環(huán)機(jī)制，則是這條線索的最關(guān)鍵的知識(shí)點(diǎn)。特別是中正式加入了對(duì)象之后，對(duì)于新標(biāo)準(zhǔn)中事件循環(huán)機(jī)制的理解就變得更加重要。之后全局上下文進(jìn)入函數(shù)調(diào)用棧。 showImg(https://segmentfault.com/img/remote/1460000008811705); JavaScript的學(xué)習(xí)零散而龐雜，因此很多時(shí)候我們學(xué)到了一些東西，但...

    whjin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<