1. JavaScript是單線程語言
JavaScript是一門單線程語言鳖粟，在最新的html5中提出了web-worker，但是JavaScript是單線程的核心并沒有改變狞悲。
所有關(guān)于JavaScript的多線程都是由單線程模擬出來的。
2. JavaScript的事件循環(huán)
由于JavaScript是單線程疗杉，所以很多任務(wù)只能一個(gè)一個(gè)排隊(duì)象对，這對(duì)于用戶體驗(yàn)是非常不友好的。因此聰明的程序員就把任務(wù)分為兩類：
- 同步任務(wù)
-
異步任務(wù)
當(dāng)我們打開一個(gè)網(wǎng)頁的時(shí)候叶圃，網(wǎng)頁的渲染和dom解析就是同步任務(wù)袄膏，而加載圖片、音樂等大量下載任務(wù)的時(shí)候就是異步任務(wù)掺冠。
借用一張圖片
JavaScript的執(zhí)行機(jī)制 - 同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行“場(chǎng)所”沉馆，同步的進(jìn)入主線程，異步的進(jìn)入Event Table并注冊(cè)函數(shù)
- 當(dāng)指定的事情完成時(shí)德崭，Event Table會(huì)將這個(gè)函數(shù)移入Event Queue
- 主線程內(nèi)的任務(wù)執(zhí)行完畢為空的時(shí)候斥黑，會(huì)去Event Queue讀取對(duì)應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行
- 上述過程會(huì)不斷重復(fù)眉厨，也就是常說的Event Loop（事件循環(huán)）
如何知道主線程的執(zhí)行棧為空锌奴？js引擎存在monitoring process進(jìn)程，會(huì)持續(xù)不斷的檢查主線程執(zhí)行棧是否為空憾股，一旦為空鹿蜀，就會(huì)去Event Queue那里檢查是否有等待被調(diào)用的函數(shù)。
let data = [];
$.ajax({
url:www.javascript.com,
data:data,
success:() => {
console.log('發(fā)送成功!');
}
})
console.log('代碼執(zhí)行結(jié)束');
- ajax進(jìn)入Event Table服球，注冊(cè)回調(diào)函數(shù)success
- 執(zhí)行console.log('代碼執(zhí)行結(jié)束');
- ajax事件完成茴恰，回調(diào)函數(shù)success進(jìn)入Event Queue
- 主線程從Event Queue讀取回調(diào)函數(shù)success并執(zhí)行
3. setTimeout
setTimeout(() => {
task()
},3000)
sleep(10000000)
上述代碼是怎么執(zhí)行的？
- task()進(jìn)入Event Table并注冊(cè)斩熊，計(jì)時(shí)開始
- 執(zhí)行sleep函數(shù)琐簇， 計(jì)時(shí)仍在繼續(xù)
- 3秒到了，計(jì)時(shí)事件timeout完成座享，task()進(jìn)入Event Queue婉商， 但是sleep還沒有執(zhí)行完，只好等待sleep執(zhí)行完畢
- sleep執(zhí)行完渣叛，task()從Event Queue進(jìn)入了主線程執(zhí)行
上述流程走完丈秩，我們知道setTimeout這個(gè)函數(shù)，是經(jīng)過指定時(shí)間后淳衙，把要執(zhí)行的任務(wù)加入Event Queue中蘑秽，又因?yàn)閖avascript是單線程，任務(wù)要一個(gè)一個(gè)執(zhí)行箫攀，所以如果前面的任務(wù)需要的時(shí)間太久肠牲，那么task任務(wù)只能等待線程空閑，導(dǎo)致真正的延時(shí)時(shí)間遠(yuǎn)遠(yuǎn)大于3s靴跛。
setTimeout(fn, 0)是否是立即執(zhí)行呢缀雳？答案是不會(huì)的。setTimeout(fn, 0)的含義是梢睛，指定某個(gè)任務(wù)在主線程最早可得的空閑時(shí)間執(zhí)行肥印，意思就是不用再等多少秒了识椰，只要主線程執(zhí)行棧內(nèi)的同步任務(wù)全部執(zhí)行完畢，棧為空就馬上執(zhí)行深碱。
4. setInterval
setInterval會(huì)每隔指定的時(shí)間將注冊(cè)的函數(shù)置入EventQueue
對(duì)于setInterval(fn, ms)來說腹鹉，我們已經(jīng)知道不是每過ms秒會(huì)執(zhí)行一次fn，而是每過ms秒敷硅，就會(huì)有fn進(jìn)入Event Queue功咒。一旦setInterval的回調(diào)函數(shù)的fn執(zhí)行時(shí)間超出了ms，那么就完全看不出來時(shí)間間隔了绞蹦。
5. Promise和process.nextTick(callback)
process.nextTick(callback)類似node.js的setTimeout航瞭，在事件，循環(huán)的下一次循環(huán)中調(diào)用callback函數(shù)坦辟。
除了廣義的同步任務(wù)和異步任務(wù)刊侯，我們對(duì)任務(wù)的定義有更精細(xì)的定義：
- macro-task（宏任務(wù)）：包括整體代碼script，setTimeout锉走，setInterval
- micro-task（微任務(wù)）：Promise滨彻，process.nextTick
不同類型的任務(wù)會(huì)進(jìn)入對(duì)應(yīng)的Event Queue，比如setTimeout和setInterval會(huì)進(jìn)入相同的Event Queue
事件循環(huán)的順序挪蹭，決定js的執(zhí)行順序亭饵。進(jìn)入整體代碼（宏任務(wù)）后開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)梁厉。然后再次從宏任務(wù)開始辜羊，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，再執(zhí)行所有的微任務(wù)词顾。
在一個(gè)事件循環(huán)中八秃，異步事件返回結(jié)果后會(huì)被放入一個(gè)任務(wù)隊(duì)列中。根據(jù)這個(gè)異步事件的類型肉盹，這個(gè)事件實(shí)際上會(huì)到對(duì)應(yīng)的宏任務(wù)隊(duì)列或者微任務(wù)隊(duì)列中去昔驱。并且在當(dāng)前執(zhí)行棧為空的時(shí)候，主線程會(huì)查看微任務(wù)隊(duì)列中是否有事件存在上忍。如果不存在骤肛，那么去宏任務(wù)隊(duì)列中取出一個(gè)事件并把對(duì)應(yīng)的回調(diào)函數(shù)加入到當(dāng)前執(zhí)行棧；如果存在窍蓝，則會(huì)依次執(zhí)行隊(duì)列中事件對(duì)應(yīng)的回調(diào)腋颠，直到微任務(wù)隊(duì)列為空，然后去宏任務(wù)隊(duì)列中取出最前面的事件吓笙，把對(duì)應(yīng)的回調(diào)加入當(dāng)前的執(zhí)行棧淑玫。如此反復(fù)循環(huán)。
我們只需記住，當(dāng)當(dāng)前執(zhí)行棧執(zhí)行完畢時(shí)會(huì)立刻先處理所有微任務(wù)隊(duì)列中的事件混移，然后再去宏任務(wù)隊(duì)列中取出一個(gè)事件。同一個(gè)事件循環(huán)中侮穿，微任務(wù)永遠(yuǎn)在宏任務(wù)之前執(zhí)行歌径。
事件循環(huán)，宏任務(wù)和微任務(wù)的關(guān)系：
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
執(zhí)行結(jié)果為1,7,6,8,2,4,3,5,9,11,10,12
為什么會(huì)先執(zhí)行3,5而不是9亲茅，11呢回铛？因?yàn)榈谝粋€(gè)setTimeout宏任務(wù)結(jié)束之后，會(huì)去檢查隊(duì)列中是否有微任務(wù)存在克锣，如果有的話先執(zhí)行微任務(wù)茵肃。（微任務(wù)優(yōu)先級(jí)高）
