Javascript是一種單線程開發語言。理解Javascript的運行機制是日常編碼必須要掌握的技能。
爲什麼是單線程？
JavaScript的主要用途是與用戶交互，以及操作DOM。這決定了它只能是單線程，否則會帶來很複雜的同步問題。
- 假設：如果JavaScript支持多線程，一個線程在某個DOM節點上添加內容，另外一個線程刪除了這個節點，那麼瀏覽器該以哪個線程爲準呢？
單線程的缺點
單線程就意味着容易發生線程等待資源，cpu空閒，而其他任務一直等待的問題。
什麼是Event Loop（事件循環）
爲了協調事件、用戶交互、腳本、UI 渲染和網絡處理等行爲，防止主線程阻塞。於是Javascript設計者將所有任務分爲兩種，一種是同步任務，一種是異步任務
-
同步任務指的是，在
主線程上排隊執行的任務- 同步任務只有前一個任務執行完畢，才能執行下一個任務。
-
同步任務都在主線程上執行，形成一個
執行棧- 每次執行棧執行的代碼就是一個宏任務
-
異步任務指的是，不進入主線程，而進入
任務隊列的任務。- 只要指定過回調函數，這些事件發生時就會進入"任務隊列"（比如鼠標點擊...等）
- 一旦
執行棧中的所有同步任務執行完畢，系統就會讀取“任務隊列”。 - 任務隊列是一個先進先出的數據結構，排在前面的事件，優先被主線程讀取。
"主線程"從"任務隊列"中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱爲Event Loop（事件循環）。
宏任務和微任務
根據規範：每個任務都有一個任務源(task source)，源自同一個任務源的 task 必須放到同一個任務隊列，從不同源來的則被添加到不同隊列，所以有了宏任務(macro)task和微任務(micro)task。
瀏覽器爲了能夠使得JS內部(macro)task與DOM任務能夠有序的執行，會在一個task執行結束後，在下一個(macro)task 執行開始前，對頁面進行重新渲染，
每次執行完一個宏任務之後，會去檢查是否存在微任務；如果有，則執行微任務直至清空微任務隊列，如果在微任務執行期間微任務隊列加入了新的微任務，會將新的微任務加入隊列尾部，之後也會被執行。
根據上述總結流程爲：
附（宏/微任務清單）：
- 宏任務(macro)task主要有： script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環境)
- 微任務(micro)task主要有： Promise.then、MutaionObserver、process.nextTick(Node.js 環境)
- requestAnimationFrame 既不屬於宏任務, 也不屬於微任務
目前宏任務和微任務在各瀏覽器執行都有差異，最後提議promise爲微任務
實例分析
setTimeout(function(){
console.log('1');
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3');
});
console.log('4');
以上案例會輸出 2 4 3 1
結果解析：
-
JavaScript執行主線程任務：
輸出 2 4- 附：Promise構造器內部是同步任務
- 執行微任務隊列：
輸入 3 - 第一個宏任務結束，進入setTimeout回調：
輸出 1
End
持續更新中 來Github 點顆⭐吧