1. 程式人生 > >什麼是javascript事件迴圈,什麼是巨集任務佇列,什麼是微任務佇列

什麼是javascript事件迴圈,什麼是巨集任務佇列,什麼是微任務佇列

        這個是面試題中經常問的,再回答這個問題之前,我們需要知道以下幾個知識點:

                          1.執行上下文context

                          2.函式呼叫棧

                          3.佇列資料結構

                        4.promise,process.nexttick,setImmediate(其中promise大家都知道,後兩個是node迴圈中必不可少的部分,node的高併發,非同步I/O也是基於node事件迴圈)

       我們都知道javascript是單執行緒,只有唯一的事件迴圈。而javascript再執行過程中,除了函式呼叫棧來調節函式的執行順序外,還有個任務佇列task queue,任務佇列可以是多個,其中又包括巨集任務佇列和微任務佇列;

       巨集任務佇列有:script(整體程式碼),setTimeout,setInterval,setImmediately,I/O,UI render

       微任務佇列有:promise,process.nexttick,Object.observe(已經不用了),Mutation.observe

        MutationObserver的前身是MutationEvents(熟知的addEventListener就是一部分,已經不怎麼用了),Mutation存在相容問題,自行搜尋,留下點例項用法

// Firefox和Chrome早期版本中帶有字首
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 選擇目標節點
var target = document.querySelector('#some-id'); 
// 建立觀察者物件
var observer = new MutationObserver(function(mutations) {  
  mutations.forEach(function(mutation) { 
    console.log(mutation.type); 
  }); 
}); 
// 配置觀察選項:
var config = { attributes: true, childList: true, characterData: true } 
// 傳入目標節點和觀察選項
observer.observe(target, config); 
// 隨後,你還可以停止觀察
observer.disconnect();

       如上文所講,加了幾個node的間諜,有興趣的兄弟可以自己搜搜node的事件迴圈系統,真是回味無窮,這裡就不詳細介紹了。       

       事件迴圈的順序,決定了JavaScript程式碼的執行順序。它從script(整體程式碼)開始第一次迴圈。之後全域性上下文進入函式呼叫棧。直到呼叫棧清空(只剩全域性),然後執行所有的微任務。當所有可執行的微任務執行完畢之後。迴圈再次從macro-task開始,找到其中一個任務佇列執行完畢,然後再執行所有的巨集任務,這樣一直迴圈下去。其中每一個任務的執行,無論是微任務還是巨集任務,都是藉助函式呼叫棧來完成。