從vue的nextTick到eventloop

vue的使用中有時會用到nextTick方法,以下是nexttick中的部分源碼(稍微增加了幾句說明與吐槽~)

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
// 上面解釋了為什么在native不使用MutationObserver骄瓣,居然是因為ios的一個bug~
// 在其他情況下 優(yōu)先使用MutationObserver
/* istanbul ignore next, $flow-disable-line */
// 首先判定 Promise可用 并且是native端
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    // UIWebview是ios的webview組件(舊)蒋畜。特殊處理了一下
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) { // ie...... 如果MutationObserver 可用的話 使用MutationObserver
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  // 這里就是大家都在說的 隱形的text 
  // 通過監(jiān)聽這個節(jié)點的變化,保證nexitTick執(zhí)行時dom已經(jīng)變更成功
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2  // 0 1 0 1 0 比 += 1 好
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 然后檢測是否支持setImmediate 
  // Fallback to setImmediate.
  // Techinically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // 最后的方案 setTimeout
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

最頂部有一句解釋

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.

這里說到了microtask(微任務)朵耕,與之對應的是macrotasks(微任務)浊服。他們包含的api如下

  macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering,requestAnimationFrame(瀏覽器)
  microtasks: process.nextTick(node), Promises, Object.observe(廢棄), MutationObserver(瀏覽器)

js的任務隊列與之對應,microtask queues(微任務隊列)與macrotasks queues(宏任務隊列)驱证。js執(zhí)行時步驟如下
【侵刪】

image

這個過程就是event loop了。深入的內(nèi)容還有運行棧恋腕,執(zhí)行上下文等抹锄,后續(xù)再深入了解。
有幾點說明一下:1荠藤,event loop 不是js語言特性伙单,而是運行環(huán)境機制。是由運行環(huán)境實現(xiàn)的哈肖,在不同的運行環(huán)境中车份,內(nèi)部實現(xiàn)可能不同(node.js,各種瀏覽器)
標準在這里:https://www.w3.org/TR/html5/webappapis.html#event-loops
2:這個圖片中沒有說明的是在一次循環(huán)結束后牡彻,瀏覽器會進行更新渲染(Update the rendering)

event loop中一個有意思的地方是每次執(zhí)行完一個宏任務后將執(zhí)行微任務隊列中所有(劃重點)任務
所以會出現(xiàn)下面的輸出結果

console.log('0');
setTimeout(() => console.log('4'), 0);
Promise.resolve().then(()=> console.log('2'));
Promise.resolve().then(()=> console.log('3'));
console.log('1');
// 0
// 1
// 2
// 3

然后我就想到一個問題扫沼,當正在執(zhí)行微任務隊列中的任務時,添加新的微任務庄吼。會立刻增加到當前微任務隊列中嗎缎除?于是有了下面的嘗試

console.log('0');
setTimeout(() => {
    console.log('4'); 
}, 0);
Promise.resolve().then(()=>{
    console.log('2');
    Promise.resolve().then(()=>{
        console.log('3');
    })
})
console.log('1');
// 0
// 1
// 2
// 3
// 4

最后,下面的輸出順序~捋一捋~

console.log('0');
setTimeout(() => {
    Promise.resolve().then(()=>{
        console.log('2');
        Promise.resolve().then(()=>{
            console.log('4');
        }).then(()=>{
            console.log('7');
        })
    }).then(()=>{
        console.log('5');
    })
    Promise.resolve().then(()=>{
        console.log('3');
    }).then(()=>{
        console.log('6');
    })
}, 0);
setTimeout(() => {
    console.log('8'); 
}, 0);
console.log('1');
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末总寻,一起剝皮案震驚了整個濱河市器罐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌渐行,老刑警劉巖轰坊,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異祟印,居然都是意外死亡肴沫,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門蕴忆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來颤芬,“玉大人,你說我怎么就攤上這事≌掘穑” “怎么了汰具?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長菱魔。 經(jīng)常有香客問我留荔,道長,這世上最難降的妖魔是什么澜倦? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任存谎,我火速辦了婚禮,結果婚禮上肥隆,老公的妹妹穿的比我還像新娘既荚。我一直安慰自己,他們只是感情好栋艳,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布恰聘。 她就那樣靜靜地躺著,像睡著了一般吸占。 火紅的嫁衣襯著肌膚如雪晴叨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天矾屯,我揣著相機與錄音兼蕊,去河邊找鬼。 笑死件蚕,一個胖子當著我的面吹牛孙技,可吹牛的內(nèi)容都是我干的闸衫。 我是一名探鬼主播讹俊,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摊腋!你這毒婦竟也來了妄痪?” 一聲冷哼從身側響起哈雏,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎衫生,沒想到半個月后裳瘪,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡罪针,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年彭羹,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片站故。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡皆怕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出西篓,到底是詐尸還是另有隱情愈腾,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布岂津,位于F島的核電站虱黄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏吮成。R本人自食惡果不足惜橱乱,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望粱甫。 院中可真熱鬧泳叠,春花似錦、人聲如沸茶宵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽乌庶。三九已至种蝶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間瞒大,已是汗流浹背螃征。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留透敌,地道東北人盯滚。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像酗电,于是被迫代替她去往敵國和親淌山。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容