同步和異步
同步編程刀闷，就是計(jì)算機(jī)一行一行按照順序依次執(zhí)行代碼根时，當(dāng)前代碼任務(wù)耗時(shí)執(zhí)行會阻塞后續(xù)代碼的執(zhí)行病梢。
同步編輯胃珍，即是一種典型的請求-響應(yīng)模型，當(dāng)請求調(diào)用一個(gè)函數(shù)或方法后蜓陌，需等待其響應(yīng)返回觅彰，然后執(zhí)行后續(xù)代碼。
一般情況下钮热，同步編程填抬，代碼按序依次執(zhí)行，能很好的保證程序的執(zhí)行隧期，但是在某些場景下飒责，比如讀取文件和請求接口直到數(shù)據(jù)返回這一過程是需要時(shí)間的，網(wǎng)絡(luò)越差仆潮，耗費(fèi)時(shí)間越長宏蛉，如果按照同步編程方式實(shí)現(xiàn)，在等待數(shù)據(jù)返回這段時(shí)間鸵闪，JavaScript是不能處理其他任務(wù)的檐晕，此時(shí)頁面的交互，滾動等任何操作也都會阻塞蚌讼，這顯然是非常的不友好辟灰，不可接受的，而這正是異步編程大顯身手的時(shí)候篡石，如下圖芥喇，耗時(shí)任務(wù)A會阻塞耗時(shí)任務(wù)B的執(zhí)行，等到任務(wù)A執(zhí)行完成凰萨，才能執(zhí)行B继控。
當(dāng)使用異步編程時(shí)，在等待當(dāng)前任務(wù)的響應(yīng)返回之前胖眷，可以繼續(xù)執(zhí)行后續(xù)代碼武通。
異步編程，不同于同步編程的請求-響應(yīng)模式珊搀，其是一種事件驅(qū)動模型冶忱，請求調(diào)用函數(shù)或方法后，無需立即等待響應(yīng)境析，可以繼續(xù)執(zhí)行其他任務(wù)囚枪，而之前任務(wù)響應(yīng)返回后可以通過狀態(tài)、通知和回調(diào)來通知掉用者劳淆。
多線程
異步編程能夠很好的解決編程阻塞的問題链沼，那么實(shí)現(xiàn)異步編程的方式有哪些呢？通常實(shí)現(xiàn)異步方式是多線程沛鸵，入C#括勺，即同時(shí)開啟多個(gè)線程，不同操作能并行執(zhí)行曲掰，如下圖朝刊，耗時(shí)任務(wù)A執(zhí)行的同時(shí)，在線程二中任務(wù)B也可以執(zhí)行：
JS單線程
js語言執(zhí)行環(huán)境是單線程的蜈缤，單線程在程序執(zhí)行時(shí)拾氓，所走的程序路徑按照連續(xù)順序排下來，前面的必須處理好底哥，后面的才會執(zhí)行咙鞍，而使用異步實(shí)現(xiàn)時(shí)，多個(gè)任務(wù)可以并發(fā)執(zhí)行趾徽。那么js的異步編程如何實(shí)現(xiàn)呢续滋，請看下文。
并行與并發(fā)
多線程的任務(wù)可以并行執(zhí)行孵奶，而js單線程異步編程可以實(shí)現(xiàn)多任務(wù)并發(fā)執(zhí)行疲酌，并行與并發(fā)的區(qū)別。
- 并行，同一時(shí)刻內(nèi)多任務(wù)同時(shí)進(jìn)行
- 并發(fā)朗恳，同一時(shí)間段內(nèi)湿颅，多任務(wù)同時(shí)進(jìn)行著，但是某一時(shí)刻粥诫，只有某一任務(wù)執(zhí)行油航，
通常所說的并發(fā)連接數(shù)，是指瀏覽器向服務(wù)器發(fā)起請求怀浆，建立TCP連接谊囚，每秒鐘服務(wù)器建立的總連接數(shù)，而假如执赡，服務(wù)器10ms能處理一個(gè)連接镰踏，那么并發(fā)連接數(shù)就是100。
JavaScript異步機(jī)制
舉個(gè)例子
for (var i = 0; i < 5; i ++) {
setTimeout(function(){
console.log(i);
}, 0);
}
console.log(i);
//5 ; 5 ; 5 ; 5; 5
最后輸出的全是5：
- i在此處是
for循環(huán)所在上下文環(huán)境的變量沙合，有且只有一個(gè)i; - 循環(huán)結(jié)束時(shí)
i == 5 - js單線程事件處理器在線程空閑前不會執(zhí)行下一個(gè)事件
如上面第三點(diǎn)所述奠伪，如果真正理解以上例子中的setTimeout()，及JavaScript異步機(jī)制灌诅，需要理解js的事件循環(huán)和并發(fā)模型芳来。
并發(fā)模型
js執(zhí)行異步任務(wù)時(shí)，不需要等待響應(yīng)返回猜拾，可以繼續(xù)執(zhí)行其他任務(wù)即舌，而在響應(yīng)返回時(shí)，會得到通知挎袜，執(zhí)行回調(diào)或事件處理程序顽聂。
注：回調(diào)和事件處理程序本質(zhì)上并無區(qū)別，只是在不同的情況下盯仪，不同的叫法紊搪。
js異步編程使得多個(gè)任務(wù)可以并發(fā)執(zhí)行，而實(shí)現(xiàn)這一功能的基礎(chǔ)是JavaScript擁有一個(gè)基于事件循環(huán)的并發(fā)模型全景。
堆棧與隊(duì)列
在介紹js并發(fā)模型之前耀石，先簡單介紹堆棧和隊(duì)列的區(qū)別
- 堆（heap）：內(nèi)存中某一未被阻止的區(qū)域，通常存儲對象（引用類型）
- 棧（stack）：先進(jìn)后出的順序存儲結(jié)構(gòu)爸黄，通常存儲函數(shù)參數(shù)和基本類型值變量（按值訪問）
- 隊(duì)列（queue）：先進(jìn)先出順序存儲結(jié)構(gòu)
事件循環(huán)（Event Loop）
js引擎負(fù)責(zé)解析滞伟，執(zhí)行js代碼，但它并不能單獨(dú)運(yùn)行炕贵，通常得有一個(gè)宿主環(huán)境梆奈，一般如瀏覽器或Node服務(wù)器，之前提到的單線程是指在這些宿主環(huán)境創(chuàng)建單一線程称开，提供一種機(jī)制亩钟，調(diào)用js引擎完成多個(gè)js代碼塊的調(diào)度乓梨，執(zhí)行（js代碼是按塊執(zhí)行的），這種機(jī)制稱為事件循環(huán)（Event Loop）清酥。
注：這里的事件與DOM事件不要混淆扶镀，可以說這里的事件包括DOM事件，所有異步操作都是一個(gè)事件总处，諸如ajax請求就可以看作一個(gè)request請求事件
js執(zhí)行環(huán)境中存在的兩個(gè)結(jié)構(gòu)需要了解：
- 消息隊(duì)列（Message Queue）狈惫，也叫任務(wù)隊(duì)列（Task Queue）：存儲待處理消息及對應(yīng)的回調(diào)函數(shù)或事件處理程序
- 執(zhí)行棧（execution context stack）睛蛛，也可以叫執(zhí)行上下文棧（js執(zhí)行棧）鹦马。顧名思義，是執(zhí)行上下文組成忆肾，當(dāng)函數(shù)調(diào)用時(shí)荸频，創(chuàng)建并插入一個(gè)執(zhí)行上下文，通常稱為執(zhí)行幀（frame）客冈，存儲著函數(shù)參數(shù)和局部變量旭从，當(dāng)函數(shù)執(zhí)行結(jié)束時(shí)，彈出該執(zhí)行幀场仲；
注：關(guān)于全局代碼和悦，由于所有的代碼都是在全局上下文執(zhí)行，所以執(zhí)行棧頂總是全局上下文就很容易理解渠缕，直到所有代碼執(zhí)行完畢鸽素，全局上下文退出執(zhí)行棧，棧清空了亦鳞；也即是全局上下文第一個(gè)入棧馍忽，最后一個(gè)出棧
任務(wù)
分析事件循環(huán)流程前，先闡述兩個(gè)概念：同步任務(wù)和異步任務(wù)燕差。
任務(wù)很好理解遭笋，js代碼執(zhí)行就是在完成任務(wù)，所謂任務(wù)就是一個(gè)函數(shù)或一個(gè)代碼塊徒探，通常以功能或目的劃分瓦呼，比如完成一次加法計(jì)算，完成一次ajax請求测暗；很自然的就分為同步任務(wù)和異步任務(wù)央串。同步任務(wù)是連續(xù)的，阻塞的偷溺；而異步任務(wù)則是不連續(xù)的蹋辅，非阻塞的，包含異步事件及其回調(diào)挫掏，當(dāng)我們談及異步任務(wù)時(shí)侦另，通常指執(zhí)行其回調(diào)函數(shù)。
事件循環(huán)流程
事件循環(huán)流程分解：
- 1、宿主環(huán)境為js創(chuàng)建線程時(shí)褒傅，會創(chuàng)建堆（heap）和棧（棧）弃锐，堆內(nèi)存儲js對象，棧內(nèi)存儲執(zhí)行上下文殿托。
- 2霹菊、棧內(nèi)執(zhí)行上下文的同步任務(wù)按序執(zhí)行，執(zhí)行完即退棧支竹，而當(dāng)異步任務(wù)執(zhí)行時(shí)旋廷，該異步任務(wù)進(jìn)入等待狀態(tài)（不入棧），同時(shí)通知線程礼搁；當(dāng)觸發(fā)事件時(shí)（或該異步操作響應(yīng)返回時(shí)）饶碘，需向消息隊(duì)列插入一個(gè)消息；
- 3馒吴、當(dāng)事件觸發(fā)或響應(yīng)返回時(shí)扎运，線程向消息隊(duì)列插入該事件消息（包含事件及回調(diào)）。
- 4饮戳、當(dāng)棧內(nèi)同步任務(wù)執(zhí)行完畢時(shí)豪治，線程從消息隊(duì)列取出一個(gè)事件消息，其對應(yīng)異步任務(wù)（函數(shù)）入棧扯罐，執(zhí)行回調(diào)函數(shù)负拟，如果未綁定回調(diào)，這個(gè)消息會被丟棄篮赢，執(zhí)行完任務(wù)后退棧齿椅。
- 5、當(dāng)線程空閑（即執(zhí)行棧清空）時(shí)启泣，繼續(xù)拉取消息隊(duì)列下一輪消息（next tick涣脚，事件循環(huán)流轉(zhuǎn)一次稱為一次tick）
使用代碼描述如下：
var eventLoop = [];
var event;
var i = eventLoop.length - 1; // 后進(jìn)先出
while(eventLoop[i]) {
event = eventLoop[i--];
if (event) { // 事件回調(diào)存在
event();
}
// 否則事件消息被丟棄
}
注：等待下一個(gè)事件消息的過程是同步的
并發(fā)模型與事件循環(huán)
var ele = document.querySelector('body');
function clickCb(event) {
console.log('clicked');
}
function bindEvent(callback) {
ele.addEventListener('click', callback);
}
bindEvent(clickCb);
針對如上代碼我們可以構(gòu)建如下并發(fā)模型：
如上圖，當(dāng)執(zhí)行棧同步代碼塊依次執(zhí)行完直到遇見異步任務(wù)時(shí)寥茫，異步任務(wù)進(jìn)入等待狀態(tài)遣蚀，通知線程，異步事件觸發(fā)時(shí)纱耻，往消息隊(duì)列插入一條事件消息芭梯；而當(dāng)執(zhí)行棧后續(xù)同步任務(wù)執(zhí)行完后，讀取消息隊(duì)列弄喘，得到一條消息玖喘，然后將該消息對應(yīng)的異步任務(wù)入棧，執(zhí)行回調(diào)函數(shù)蘑志；一次事件循環(huán)就完成了累奈，也即處理了一次異步任務(wù)贬派。
SetTimeout(...,0)
了解了js事件循環(huán)后，我們再看setTimeout(...,0)的例子澎媒。
setTimeout(...,0)所表達(dá)的意思就是：等待0s之后搞乏，向消息隊(duì)列插入一條定時(shí)器事件消息，并將第一個(gè)參數(shù)作為回調(diào)函數(shù)戒努；而當(dāng)執(zhí)行棧內(nèi)同步任務(wù)執(zhí)行完成時(shí)请敦，線程從消息隊(duì)列讀取消息，將異步任務(wù)入棧储玫，執(zhí)行侍筛；線程空閑時(shí)再次從消息隊(duì)列讀取消息。
再看一個(gè)實(shí)例：
var start = +new Date();
var arr = [];
setTimeout(function(){
console.log('time: ' + (new Date().getTime() - start));
},10);
for(var i=0;i<=1000000;i++){
arr.push(i);
}
在setTimeout異步回調(diào)函數(shù)里我們輸出了異步任務(wù)注冊到執(zhí)行的時(shí)間缘缚，發(fā)現(xiàn)并不等于我們指定的時(shí)間勾笆，而且兩次時(shí)間間隔也都不同敌蚜，考慮以下兩點(diǎn)：
- 在讀取消息隊(duì)列的消息時(shí)桥滨，得等同步任務(wù)完成，這個(gè)是需要耗費(fèi)時(shí)間的弛车；
- 消息隊(duì)列先進(jìn)先出原則齐媒，讀取此異步事件消息之前，可能還存在其他消息纷跛，執(zhí)行也需要耗時(shí)喻括；
所以異步執(zhí)行時(shí)間不精確是必然的，所以我們有必要明白無論是同步任務(wù)還是異步任務(wù)贫奠，都不應(yīng)該耗時(shí)太長唬血，當(dāng)一個(gè)消息耗時(shí)太長時(shí)，應(yīng)該盡可能的將其分割成多個(gè)消息唤崭。
原文地址：http://blog.codingplayboy.com/2017/04/25/js_async/#comments
