一、概念理解
1.關於javascript
javascript是一門單線程語言，在最新的HTML5中提出了Web-Worker，但javascript是單線程這一核心仍未改變。所以一切javascript版的"多線程"都是用單線程模擬出來的。
2.多線程/單線程的簡單理解：
多線程: 程序可以同一時間做幾件事。
單線程: 程序同一時間只能做一件事。
3.JS為什么是單線程的？
JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢？這樣能提高效率啊。
JavaScript的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為准？
所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成了這門語言的核心特征，將來也不會改變。
為了利用多核CPU的計算能力，HTML5提出Web Worker標准，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標准並沒有改變JavaScript單線程的本質。
4.JS為什么需要異步?
如果JS中不存在異步，只能自上而下執行，如果上一行解析時間很長，那么下面的代碼就會被阻塞。 對於用戶而言，阻塞就意味着"卡死"，這樣就導致了很差的用戶體驗。
5.JS單線程又是如何實現異步的呢？
既然JS是單線程的，只能在一條線程上執行，又是如何實現的異步呢？
是通過的事件循環(event loop)，理解了event loop機制，就理解了JS的執行機制。理解事件循環機制前，我們先來看看任務隊列。
6.任務隊列
"任務隊列"是一個事件的隊列（也可以理解成消息的隊列），IO設備完成一項任務，就在"任務隊列"中添加一個事件，表示相關的異步任務可以進入"執行棧"了。主線程讀取"任務隊列"，就是讀取里面有哪些事件。
"任務隊列"中的事件，除了IO設備的事件以外，還包括一些用戶產生的事件（比如鼠標點擊、頁面滾動等等）。只要指定過回調函數，這些事件發生時就會進入"任務隊列"，等待主線程讀取。
所謂"回調函數"（callback），就是那些會被主線程掛起來的代碼。異步任務必須指定回調函數，當主線程開始執行異步任務，就是執行對應的回調函數。
"任務隊列"是一個先進先出的數據結構，排在前面的事件，優先被主線程讀取。主線程的讀取過程基本上是自動的，只要執行棧一清空，"任務隊列"上第一位的事件就自動進入主線程。但是，由於存在后文提到的"定時器"功能，主線程首先要檢查一下執行時間，某些事件只有到了規定的時間，才能返回主線程。
讀取到一個異步任務，首先是將異步任務放進事件表格（Event table）中，當放進事件表格中的異步任務完成某種事情或者說達成某些條件（如setTimeout事件到了，鼠標點擊了，數據文件獲取到了）之后，才將這些異步任務推入事件隊列（Event Queue)中，這時候的異步任務才是執行棧中空閑的時候才能讀取到的異步任務。
7.javascript的執行機制-->事件循環（Event Loop）
主線程從"任務隊列"中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為Event Loop（事件循環）。
Event Loop是javascript的執行機制
8.setTimeout(fn,0)
setTimeout(fn,0)的含義是，指定某個任務在主線程最早可得的空閑時間執行，也就是說，盡可能早得執行。它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現有的事件都處理完，才會得到執行。
HTML5標准規定了setTimeout()的第二個參數的最小值（最短間隔），不得低於4毫秒，如果低於這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設為10毫秒。另外，對於那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執行，而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果要好於setTimeout()。
需要注意的是，setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼（執行棧）執行完，主線程才會去執行它指定的回調函數。要是當前代碼耗時很長，有可能要等很久，所以並沒有辦法保證，回調函數一定會在setTimeout()指定的時間執行。
二、JavaScript的同步和異步
1.單線程的不足
單線程就意味着，所有任務需要排隊，前一個任務結束，才會執行后一個任務， 簡單理解就是排好隊一個一個來。如果前一個任務耗時很長，后一個任務就不得不一直等着。如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑着的，因為IO設備（輸入輸出設備）很慢（比如Ajax操作從網絡讀取數據），不得不等着結果出來，再往下執行。
2.同步和異步解決單線程的不足
JavaScript語言的設計者意識到，這時主線程完全可以不管IO設備，掛起處於等待中的任務，先運行排在后面的任務。等到IO設備返回了結果，再回過頭，把掛起的任務繼續執行下去。於是，所有任務可以分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。
通過一個小例子來理解：
下課后甲、乙、丙、小明、丁5個人一起到食堂排隊打飯，排好隊一個一個來。小明發現就他忘記帶飯卡了，為了不影響后邊的同學打飯，於是小明離開了隊伍，在一旁等同學把他的飯卡帶來，他再打飯。這里的排隊相當於js的執行棧，排隊打飯這件事就是同步。小明等同學送飯卡來這件事就是異步。通過飯卡划分了同步和異步。小明只有滿足了有飯卡這個條件，通知阿姨他有飯卡了。食堂阿姨優先給甲乙丙丁打飯，最后再給小明打飯。
其實同步和異步，無論如何，做事情的時候都是只有一條流水線（單線程 [js就是單線程的,不會變]），同步和異步的差別就在於這條流水線上各個流程的執行順序不同，先執行同步任務，最后再來執行異步任務。
三、異步任務又分為宏任務和微任務
1.[宏任務：macro task]
2.[微任務：micro task]
執行順序優先級：SYNC => MICRO => MACRO
所有JS中的異步編程僅僅是根據某些機制來管控任務的執行順序，不存在同時執行兩個任務這一說法
3.代碼演示驗證：
console.log("同步任務1");
function asyn(mac) {
console.log("同步任務2");
if (mac) {
console.log(mac);
}
return new Promise((resolve, reject) => {
console.log("Promise中的同步任務");
resolve("Promise中回調的異步微任務")
})
}
setTimeout(() => {
console.log("異步任務中的宏任務");
setTimeout(() => {
console.log("定時器中的定時器（宏任務）");
}, 0)
asyn("定時器傳遞任務").then(res => {
console.log('定時器中的:', res);
})
}, 0)
asyn().then(res => {
console.log(res);
})
console.log("同步任務3")
4.輸出結果：
5. 執行順序：
先輸出“同步任務1”，往下遇到setTimeout異步宏任務，先放到宏任務隊列中掛起，往下遇到同步任務asyn()，執行asyn函數，輸出函數中的“同步任務2”，返回Promise，輸出“Promise中的同步任務”，遇到resolve()回調函數，.then函數塊屬於異步微任務，先放到微任務隊列中掛起，往下執行，輸出“同步任務3”，至此，同步任務執行結束，執行棧為空。先執行微任務隊列.then函數塊，輸出“Promise中回調的異步微任務”，此時微任務隊列為空。然后看下定時器模塊時間是否到了，到了就執行宏任務隊列，先輸出“異步任務中的宏任務”，遇到里層定時器，先放到宏任務隊列，往下執行，調用函數asyn,執行里面的同步任務，輸出“同步任務2”，在輸出“定時器傳遞的任務”，返回Promise，執行promise中的同步代碼，輸出“Promise中的同步任務”，遇到.then，先放到微任務隊列。此時，執行棧又為空。先執行微任務隊列，輸出 “定時器中的：Promise中回調的異步微任務”，此時微任務隊列為空。執行宏任務，輸出“定時器中的定時器（宏任務）”。程序執行完畢。