javascript的執行機制

1. 執行順序探討

setTimeout(function(){
  console.log('定時器開始啦')
});

new Promise(function(resolve){
    console.log('馬上執行for循環啦');
    for(var i = 0; i < 10000; i++){
        i == 99 && resolve();
    }
}).then(function(){
    console.log('執行then函數啦')
});

console.log('代碼執行結束');

2. 關于javascript

• javascript是一門單線程語言，在最新的HTML5中提出了Web-Worker，但javascript是單線程這一核心仍未改變。
• 一切javascript版的多線程都是用單線程模擬出來的，一切javascript多線程都是紙老虎！

3. javascript的事件循環

• 同步任務

• 異步任務

• 執行機制

  
  
  image.png
  • 同步和異步任務分別進入不同的執行"場所"，同步的進入主線程，異步的進入Event Table并注冊函數。
  • 當指定的事情完成時，Event Table會將這個函數移入Event Queue。
  • 主線程內的任務執行完畢為空，會去Event Queue讀取對應的函數，進入主線程執行。
  • 上述過程會不斷重復，也就是常說的Event Loop(事件循環)。

• 怎么知道主線程池執行棧為空
  js引擎存在monitoring process進程，會持續不斷的檢查主線程執行棧是否為空，一旦為空，就會去Event Queue那里檢查是否有等待被調用的函數。

• 代碼分析

  console.log('代碼執行結束');
  let data = [];
  $.ajax({
      url:www.javascript.com,
      data:data,
      success:() => {
          console.log('發送成功!');
      }
  })
  console.log('代碼執行結束');
  

  • 同步任務執行console.log('代碼執行結束')。
  • ajax進入Event Table，注冊回調函數success。
  • 同步執行console.log('代碼執行結束')。
  • ajax事件完成，回調函數success進入Event Queue。
  • 主線程從Event Queue讀取回調函數success并執行。

4. setTimeout

   • 不定時的setTimeout

     setTimeout(() => {
       task()
     },3000)
     
     sleep(10000000)
     
     /*
       卻發現控制臺執行task()需要的時間遠遠超過3秒，說好的延時三秒
     */
     

     • task()進入Event Table并注冊,計時開始。
     • 執行sleep函數，很慢，非常慢，計時仍在繼續。
     • 3秒到了，計時事件timeout完成，task()進入Event Queue，但是sleep也太慢了吧，還沒執行完，只好等著。
     • sleep終于執行完了，task()終于從Event Queue進入了主線程執行。

   • setTimeout(fn, 0)會立即執行嗎
     答案是不會的，setTimeout(fn,0) 的含義是，指定某個任務在主線程最早可得的空閑時間執行，意思就是不用再等多少秒了，只要主線程執行棧內的同步任務全部執行完成，棧為空就馬上執行。

     關于setTimeout要補充的是，即便主線程為空，0毫秒實際上也是達不到的。根據HTML的標準，最低是4毫秒。有興趣的同學可以自行了解。

• setInterval
  • 對于執行順序來說，setInterval會每隔指定的時間將注冊的函數置入Event Queue，如果前面的任務耗時太久，那么同樣需要等待。
  • 對于setInterval(fn,ms)來說，而是每過ms秒，會有fn進入Event Queue。一旦setInterval的回調函數fn執行時間超過了延遲時間ms，那么就完全看不出來有時間間隔了。

5. Promise & Process.nextTick

   • process.nextTick(callback)類似node.js版的"setTimeout"，在事件循環的下一次循環中調用 callback 回調函數。
   • macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval
   • micro-task(微任務)：Promise，process.nextTick
   • 不同類型的任務會進入對應的Event Queue，比如setTimeout和setInterval會進入相同的Event Queue。

   時間循環的順序: 決定js代碼的執行順序。
   進入整體代碼(宏任務)后，開始第一次循環。接著執行所有的微任務。然后再次從宏任務開始，找到其中一個任務隊列執行完畢，再執行所有的微任務。

   setTimeout(function() {
       console.log('setTimeout');
   })
   
   new Promise(function(resolve) {
       console.log('promise');
   }).then(function() {
       console.log('then');
   })
   
   console.log('console');
   

   • 這段代碼作為宏任務，進入主線程。
   • 先遇到setTimeout，那么將其回調函數注冊后分發到宏任務Event Queue。(注冊過程與上同，下文不再描述)
   • 接下來遇到了Promise，new Promise立即執行，then函數分發到微任務Event Queue。
   • 遇到console.log()，立即執行。
   • 好啦，整體代碼script作為第一個宏任務執行結束，看看有哪些微任務？我們發現了then在微任務Event Queue里面，執行。
   • ok，第一輪事件循環結束了，我們開始第二輪循環，當然要從宏任務Event Queue開始。我們發現了宏任務Event Queue中setTimeout對應的回調函數，立即執行。

   • 結束。

     
     
     宏任務與微任務的關系

6. 執行順序分析

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

• 在node@8.10.0的執行分析

  • 首先執行第一輪宏任務/微任務
    • log(1)
    • seTimeout 放入MicroTask EventQueue
    • process 放入MiniTask EventQueue
    • log(7) 將then回調放入MiniTask EventQueue
    • setTimeout 放入MicroTask EventQueue
    • 第一輪宏任務執行完畢, 打印語句1, 7
    • 第一輪微任務開始執行, 此時微任務有隊列(process, then回調)
    • 執行微任務, log(6) log(8)
    • 綜上述: 第一輪結束, 輸出結果1 7 6 8
    • 此時宏任務MicroTask Queue [setTimeout, setTimeout]
  • 執行第二輪宏任務/微任務
    • log(2) 將process3放入MiniTaskQueue
    • log(4) 將promise.then5回調放入MiniTaskQueue
    • log(9) 將process10放入MiniTaskQueue
    • log(11) 將promise.then12回調放入MiniTaskQueue
    • 宏任務執行完畢, 輸出 2 4 9 11
    • 微任務隊列此時 [process3, then5, process10, then12]
    • 執行微任務: log(3) log(10) log(5) log(12)
  • 綜上分析: 執行順序[1,7,6,8,2,4,9,11,3,10,5,12]

• 在node@12.1.0下執行結果分析

  • 第一輪宏任務/微任務
    • 宏任務log(1), MicroTask.push(setTimeout2)
    • MiniTask.push(process6)
    • 宏任務log(7) MiniTask.push(then8)
    • 宏任務 MicroTask.push(setTimeout9)
    • 第一輪此時宏任務執行完成, 微任務隊列[process6, then8]
    • 執行微任務log(6) log(8)
    • 此時宏任務TaskQueue=[setTimtout2, setTimeout9]
  • 執行宏任務setTimeout2
    • log(2) MiniTaskQueue.push(process3)
    • log(4) MiniTaskQueue.push(then5)
    • 執行微任務 process3 log(3)
    • 執行微任務then5 log(5)
  • 執行第二個宏任務setTimeout9
    • log(9) MiniTaskQueue.push(process10)
    • log(11) MiniTaskQueue.push(then12)
    • 執行微任務 processlo log(10)
    • 執行微任務 then12 log(12)
  • 綜上分析執行順序 [1,7,6,8,2,4,3,5,9,11,10,12]

• node環境下的事件監聽依賴libuv與前端環境不完全相同，輸出順序可能會有誤差