JavaScript是單線(xiàn)程。

單線(xiàn)程原因

• 為了避免復(fù)雜性，瀏覽器腳本語(yǔ)言的優(yōu)勢(shì)
  作為瀏覽器腳本語(yǔ)言，JavaScript的主要用途是與用戶(hù)互動(dòng)，以及操作DOM，假如使用多線(xiàn)程在同一時(shí)間點(diǎn)對(duì)DOM進(jìn)行增刪操作，瀏覽器無(wú)法分辨以哪個(gè)進(jìn)程為準(zhǔn)。

為什么有同步任務(wù)與異步任務(wù)之分

提高GPU的利用效率

js任務(wù)執(zhí)行

js中的同步任務(wù)會(huì)在主線(xiàn)程按照順序執(zhí)行，異步任務(wù)會(huì)進(jìn)入任務(wù)隊(duì)列，在主線(xiàn)程會(huì)形成一個(gè)執(zhí)行棧，主線(xiàn)程中的任務(wù)執(zhí)行完畢后，會(huì)在任務(wù)隊(duì)列中去查看事件，將異步任務(wù)放入執(zhí)行棧，開(kāi)始執(zhí)行。

事件循環(huán)EventLoop

主線(xiàn)程從任務(wù)隊(duì)列中讀取事件，這個(gè)過(guò)程是不斷循環(huán)的，因此這個(gè)運(yùn)行機(jī)制稱(chēng)為Event Loop

異步任務(wù)又分為宏任務(wù)（macrotask）和微任務(wù)（microtask），那么任務(wù)隊(duì)列就有了宏任務(wù)隊(duì)列和微任務(wù)隊(duì)列，微任務(wù)總是在宏任務(wù)之前執(zhí)行，也就是說(shuō)：同步任務(wù)>微任務(wù)>宏任務(wù)，

宏任務(wù)&微任務(wù).png

js代碼執(zhí)行流程

執(zhí)行流程.png

事件循環(huán).png

總結(jié)

• 宏隊(duì)列macrotask一次只從隊(duì)列中取一個(gè)任務(wù)執(zhí)行，執(zhí)行完后就去執(zhí)行微任務(wù)隊(duì)列中的任務(wù)；
• 微任務(wù)隊(duì)列中所有的任務(wù)都會(huì)被依次取出來(lái)執(zhí)行，知道m(xù)icrotask queue為空；
• 圖中沒(méi)有畫(huà)UI rendering的節(jié)點(diǎn)，因?yàn)檫@個(gè)是由瀏覽器自行判斷決定的，但是只要執(zhí)行UI rendering，它的節(jié)點(diǎn)是在執(zhí)行完所有的microtask之后，下一個(gè)macrotask之前，緊跟著執(zhí)行UI render。