任務隊列

主線程：正在執行的代碼，會生成函數調用棧。

任務分類

同步任務，語句只按語句先后順序執行，前面未執行完，不會執行后面語句。

異步任務，語句不在語句先后順序上執行，執行到該代碼時，加入到相應任務隊列，延后執行。

單線程

主線程從 script (整體代碼)開始第一次循環。之后全局上下文進入函數調用棧。直到調用棧清空(只剩全局)，然后執行所有的 jobs。當所有可執行的 jobs 執行完畢之后。循環再次從 task 開始，找到其中一個任務隊列執行完畢，然后再執行所有的 jobs，這樣一直循環下去。

注意事項

經典示例

示例詳解：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

通過鼠標點擊

<div class="outer"> <div class="inner"></div></div>// Let's get hold of those elementsvar outer = document.querySelector('.outer');var inner = document.querySelector('.inner');// Let's listen for attribute changes on the// outer elementnew MutationObserver(function() { console.log('mutate');}).observe(outer, { attributes: true});// Here's a click listener…function onClick() { console.log('click'); setTimeout(function() {  console.log('timeout'); }, 0); Promise.resolve().then(function() {  console.log('promise'); }); outer.setAttribute('data-random', Math.random());}// …which we'll attach to both elementsinner.addEventListener('click', onClick);outer.addEventListener('click', onClick);// 輸出結果clickmutateclickmutatepromisepromisetimeouttimeout

進階--通過js執行

<div class="outer"> <div class="inner"></div></div>// Let's get hold of those elementsvar outer = document.querySelector('.outer');var inner = document.querySelector('.inner');// Let's listen for attribute changes on the// outer elementnew MutationObserver(function() { console.log('mutate');}).observe(outer, { attributes: true});// Here's a click listener…function onClick() { console.log('click'); setTimeout(function() {  console.log('timeout'); }, 0); Promise.resolve().then(function() {  console.log('promise'); }); outer.setAttribute('data-random', Math.random());}// …which we'll attach to both elementsinner.addEventListener('click', onClick);outer.addEventListener('click', onClick);inner.click();// 輸出結果clickclickmutatepromisepromisetimeouttimeout