前言：
深入淺出：本文盡量(不敢保證)以通俗易懂原則解釋误续，避免大家陷入過(guò)于理論、晦澀扫茅，想了解一個(gè)問(wèn)題女嘲，帶出好幾個(gè)問(wèn)題的尷尬窘境。保證(斗膽保證)大家有所收獲诞帐，如果沒(méi)有收獲欣尼，那么勞駕多看幾遍，順便動(dòng)動(dòng)你可愛(ài)的小手。學(xué)而不思則罔愕鼓，思而不碼則殆.廢話不多說(shuō)钙态，開(kāi)始正題。
JS執(zhí)行機(jī)制：
知其然菇晃，知其所以然册倒。眾所周知，JS從創(chuàng)立之初就定性為單線程語(yǔ)言磺送，如果想查經(jīng)據(jù)典驻子，請(qǐng)移步阮一峰的個(gè)人網(wǎng)站。代碼執(zhí)行自上而下估灿，一行一行執(zhí)行崇呵，如果有一行報(bào)錯(cuò)，那么后面代碼將不能執(zhí)行馅袁。先執(zhí)行同步代碼域慷，再執(zhí)行異步代碼。異步基于回調(diào)來(lái)實(shí)現(xiàn)汗销，event-loop就是異步實(shí)現(xiàn)的原理犹褒。
異步場(chǎng)景：
1.定時(shí)器：setTimemout/setInterval
2.事件監(jiān)聽(tīng)：dom操作，事件驅(qū)動(dòng)
3.Ajax：代理XMLHttpRequest發(fā)送請(qǐng)求弛针，實(shí)現(xiàn)局部更新
4.Promises： ES6叠骑，語(yǔ)法糖，異步編程提供統(tǒng)一接口削茁，鏈?zhǔn)綄?xiě)法宙枷，解決ajax回調(diào)地獄問(wèn)題。
5.Asyn/Await：ES7付材，語(yǔ)法糖朦拖。
6.publish-subscribe pattern：發(fā)布/訂閱者模式圃阳。思想前衛(wèi)厌衔、用戶體驗(yàn)更好。
目下先了解event-loop實(shí)現(xiàn)原理捍岳，其它Ajax富寿、Promise、Async/Await锣夹、publish-subscribe pattern后續(xù)視情況更新页徐。
Event-loop演示圖
示例代碼
示例1：
1： setTimeout(() => {
2： console.log('asynchronous2')
:3： }, 500);
4： console.log('synchronization1')
4： setTimeout(() => {
5： console.log('asynchronous1')
6： }, 100);
7： setTimeout(() => {
8： console.log('asynchronous3')
9： }, 100);
10： console.log('synchronization2')
執(zhí)行結(jié)果：
1：打印:synchronization1、synchronization2银萍，
2：打印:asynchronous1变勇、asynchronous3、
3：打印:asynchronous2
示例2：
1： console.log('synchronization1')
2： const btn = document.getElementById('btn')
3： btn.addEventListener('click', function () {
4： console.log('dom:asynchronous')
5： })
6： console.log('synchronization2')
執(zhí)行結(jié)果：
先打印：synchronization1搀绣、synchronization2
點(diǎn)擊按鈕打臃纱：dom:asynchronous
思考
那么問(wèn)題來(lái)了，示例1和示例2中代碼到底是如何實(shí)現(xiàn)的链患？跟上圖有什么關(guān)系巧鸭。客官勿急麻捻，且看下文纲仍。
示例1：
1: 第一行同步代碼，丟到call stack贸毕，執(zhí)行打印"'synchronization1'”,并清空當(dāng)前call stack
2: 第二行setTimeout異步代碼郑叠，丟到web api，記錄當(dāng)前定時(shí)器時(shí)間及要執(zhí)行代碼崖咨。示例2中不同的是锻拘，則將點(diǎn)擊事件記錄在web api中。
3: 第六行同步代碼击蹲，丟到call stack署拟，執(zhí)行打印"synchronization2",并清空當(dāng)前call stac
4: 當(dāng)前調(diào)用棧為空，未有待執(zhí)行任務(wù)歌豺。一旦同步代碼執(zhí)行完推穷，此時(shí)啟動(dòng)event-loop輪詢機(jī)制，查找callback quene是否有任務(wù)隊(duì)列类咧。有則撈出馒铃，丟到call stack里執(zhí)行。那么callback quene的隊(duì)列是怎么來(lái)的痕惋，涉及到web api中異步代碼区宇。根據(jù)定時(shí)器定義時(shí)間長(zhǎng)短及代碼順訊，如示例代碼依次將100ms/asynchronous1(執(zhí)行順訊在前值戳，時(shí)間最短）议谷，100ms/asynchronous3(執(zhí)行順訊在后，時(shí)間最短）堕虹、3ms/asynchronous2(等待時(shí)間最長(zhǎng)).web api 則將異步代碼丟到evnent-loop.此時(shí)若call stack為空卧晓，繼續(xù)event-loop輪詢機(jī)制。示例2中代碼不同的是當(dāng)點(diǎn)擊事件觸發(fā)時(shí)赴捞，則將執(zhí)行代碼丟到callback quene中逼裆。
