js同步異步以及回調(diào)函數(shù)
1.背景介紹
什么是同步省核，什么是異步?
同步指的是一次只能完成一件任務(wù)稿辙。如果有多個(gè)任務(wù)，就必須排隊(duì)气忠，前面一個(gè)任務(wù)完成邻储，再執(zhí)行后面一個(gè)任務(wù)赋咽，以此類推。
異步指的是每一個(gè)任務(wù)有一個(gè)或多個(gè)回調(diào)函數(shù)（callback）吨娜，前一個(gè)任務(wù)結(jié)束后脓匿，不是執(zhí)行后一個(gè)任務(wù)，而是執(zhí)行回調(diào)函數(shù)萌壳，后一個(gè)任務(wù)則是不等前一個(gè)任務(wù)結(jié)束就執(zhí)行亦镶，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的袱瓮。
2.知識(shí)剖析
javascript實(shí)現(xiàn)異步的原理
首先js是單線程的語言缤骨，即同一時(shí)間只能做做一件事。那Js如何實(shí)現(xiàn)異步的尺借，異步和單線程不是自相矛盾嗎绊起？其實(shí)，單線程和異步確實(shí)不能同時(shí)成為一個(gè)語言的特性燎斩。js選擇了成為單線程的語言虱歪，所以它本身不可能是異步的，但js的宿主環(huán)境（比如瀏覽器栅表，Node）是多線程的笋鄙，宿主環(huán)境通過某種方式（事件驅(qū)動(dòng)，下文會(huì)講）使得js具備了異步的屬性
瀏覽器的內(nèi)核是多線程的怪瓶，它們?cè)趦?nèi)核制控下相互配合以保持同步萧落，一個(gè)瀏覽器至少實(shí)現(xiàn)三個(gè)常駐線程：javascript引擎線程，UI渲染線程洗贰，瀏覽器事件觸發(fā)線程找岖。
javascript引擎線程是基于事件驅(qū)動(dòng)單線程執(zhí)行的，JS引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來敛滋，然后加以處理许布，瀏覽器無論什么時(shí)候都只有一個(gè)JS線程在運(yùn)行JS程序。
UI渲染線程負(fù)責(zé)渲染瀏覽器界面绎晃，當(dāng)界面需要重繪（Repaint）或由于某種操作引發(fā)回流(reflow)時(shí),該線程就會(huì)執(zhí)行蜜唾。但需要注意UI渲染線程與JS引擎是互斥的，當(dāng)JS引擎執(zhí)行時(shí)UI線程會(huì)被掛起庶艾，UI更新會(huì)被保存在一個(gè)隊(duì)列中等到JS引擎空閑時(shí)立即被執(zhí)行.
事件觸發(fā)線程袁余，當(dāng)一個(gè)事件被觸發(fā)時(shí)該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待JS引擎的處理落竹。這些事件可來自JavaScript引擎當(dāng)前執(zhí)行的代碼塊如setTimeOut、也可來自瀏覽器內(nèi)核的其他線程如鼠標(biāo)點(diǎn)擊货抄、AJAX異步請(qǐng)求等述召，但由于JS的單線程關(guān)系所有這些事件都得排隊(duì)等待JS引擎處理朱转。
image
分析：第一個(gè)在keydown的時(shí)候，彈出來的是input里原來的value积暖，而第2個(gè)在keydown的時(shí)候藤为，卻能彈出更新后的value，就是因?yàn)閟etTimeout夺刑，雖然他的delay設(shè)置為0缅疟，幾乎是即時(shí)觸發(fā)，但還是被添加到了執(zhí)行隊(duì)列后面遍愿，但就是這個(gè)過程存淫，渲染已經(jīng)完成了，當(dāng)他回調(diào)函數(shù)執(zhí)行時(shí)沼填，輸出來的已經(jīng)是更新后的value了桅咆。
注意：js的工作機(jī)制是當(dāng)線程空閑的情況下才會(huì)執(zhí)行異步代碼的回調(diào)函數(shù)
即當(dāng)所有同步任務(wù)執(zhí)行完畢后才會(huì)執(zhí)行異步任務(wù)的回調(diào)函數(shù)
總結(jié)：當(dāng)Js執(zhí)行到異步任務(wù)后，會(huì)將異步任務(wù)交給瀏覽器進(jìn)行執(zhí)行坞笙，當(dāng)執(zhí)行有結(jié)果時(shí)會(huì)把異步任務(wù)的回調(diào)函數(shù)插入待處理隊(duì)列的隊(duì)尾岩饼。
3.常見問題
ajax發(fā)送異步請(qǐng)求瀏覽器做了什么
有哪些常見異步回調(diào)函數(shù)？
4.解決方案
ajax發(fā)送異步請(qǐng)求瀏覽器做了什么薛夜？
Js創(chuàng)建了一個(gè)ajax請(qǐng)求
瀏覽器另外開啟一個(gè)ajax引擎線程籍茧，執(zhí)行ajax請(qǐng)求
執(zhí)行得到響應(yīng)后將回調(diào)函數(shù)放入任務(wù)隊(duì)列中。
Js執(zhí)行任務(wù)隊(duì)列中的回調(diào)函數(shù)梯澜。
有哪些常見的異步回調(diào)函數(shù)寞冯？
點(diǎn)擊事件
Ajax請(qǐng)求
定時(shí)器
瀏覽器處理點(diǎn)擊事件的過程
瀏覽器開啟事件觸發(fā)線程，等待用戶動(dòng)作腊徙，事件觸發(fā)線程解析為響應(yīng)事件简十，轉(zhuǎn)移到j(luò)avascript引擎線程，排隊(duì)等候撬腾，等待javascript引擎的處理螟蝙。
例：
click mefunctionclickme(){console.log('點(diǎn)擊事件')? ? }for(i=0;i<50000;i++){console.log(i)? ? }
這個(gè)點(diǎn)擊事件會(huì)等到for循環(huán)執(zhí)行完畢后才會(huì)執(zhí)行，即我們點(diǎn)擊模塊它直到for循環(huán)執(zhí)行完畢才會(huì)執(zhí)行
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
如何實(shí)現(xiàn)js的多線程操作民傻？
Html5的web worker
7.更多討論
8.參考文獻(xiàn)
參考一：js的單線程和異步
參考二：深入理解javascript異步編程障眼法&&h5 web worker實(shí)現(xiàn)多線程
參考三：談?wù)凧avaScript的異步實(shí)現(xiàn)- 小方- 博客園
Q1：瀏覽器的UI線程和Js線程為什么是互斥的胰默？
A1：而因?yàn)镴S可以操作DOM元素，進(jìn)而會(huì)影響到GUI的渲染結(jié)果漓踢，因此JS引擎線程與GUI渲染線程是互斥的牵署。
Q2:異步函數(shù)有哪些優(yōu)點(diǎn)和缺點(diǎn)
A2：
優(yōu)點(diǎn)：
a）對(duì)CPU的使用率高。
b）不用考慮線程間同步互斥問題喧半。
缺點(diǎn)：
a）實(shí)現(xiàn)較復(fù)雜奴迅，要把所有會(huì)導(dǎo)致阻塞的操作轉(zhuǎn)化為異步操作。
b）并發(fā)性不好挺据，在有的事件需要長(zhǎng)時(shí)間占用CPU處理的情況下取具，其他事件會(huì)長(zhǎng)時(shí)間等待得不到處理脖隶。
c）在多CPU時(shí)不如多線程高效。
Q3：異步函數(shù)跟promise之間有什么關(guān)系暇检？
A3：Promise它可以用于異步的回調(diào)函數(shù)产阱，它跟傳統(tǒng)的回調(diào)函數(shù)相比，promise的異步回調(diào)函數(shù)代碼書寫起來更優(yōu)雅块仆，更便于閱讀兴垦。
