js是單線程腳本語言,開發中瞭解代碼執行順序就顯得格外重要,代碼從上往下執行過程中 如果所有都是同步任務,將會造成嚴重的性能問題。
異步分爲宏任務和微任務
宏任務(MacroTask)
script
全部代碼、setTimeout
、setInterval
、setImmediate
(瀏覽器暫時不支持,只有IE10支持,具體可見MDN
)、I/O
、UI Rendering
。
微任務(MicroTask)
Process.nextTick(Node獨有)
、Promise
、Object.observe(廢棄)
、MutationObserver
(具體使用方式查看這裏)
js中有一個主線程和執行棧,所有任務都會被放到調用棧等待主線程執行
瀏覽器將獲取到的html 從上到下執行過程中 遇到script後,第一個宏異步任務就開始了,script從上到下執行所包含的js代碼,會將同步任務按照先後順序放入執行棧中等待主線程依次執行,當程序出現微異步任務時,會將微異步任務放入微任務隊列中,出現宏任務會將宏任務放入宏任務隊列中。
當執行棧同步任務執行完成後,調用棧被清空,這時會去檢測微任務隊列是否爲空,如果不爲空,會按照先入先出的規則,執行完所有微任務可以執行的微任務。
如果微任務隊列爲空,會去執行宏任務,每單個宏任務執行完畢,都回去檢測微任務隊列是否爲空,不爲空的話,會按照先入先出規則去執行所有可以執行的微任務。然後在執行宏任務。如此循環
主棧程每次將執行棧中任務執行完成後,就去檢查事件隊列中有無可執行事件,如果有,將事件推入執行棧執行。如此往復的過程就叫做"事件循環"