什麼是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開始,找到其中一個任務佇列執行完畢,然後再執行所有的巨集任務,這樣一直迴圈下去。其中每一個任務的執行,無論是微任務還是巨集任務,都是藉助函式呼叫棧來完成。