自查問題

1. 控制臺(tái)會(huì)打印1嗎，為什么

2. 頁面有個(gè)link，當(dāng)hover時(shí)樣式會(huì)從灰變綠，現(xiàn)在在控制臺(tái)加下面的腳本，會(huì)怎么樣，hover還會(huì)變綠嗎

while (true);

3. 控制臺(tái)的打印

事件循環(huán)圖

我們最終需要理解的目標(biāo)就是上圖。

事件循環(huán)

任務(wù)隊(duì)列有任務(wù)就執(zhí)行。

任務(wù)有如下幾種：

1. 任務(wù)隊(duì)列： 所有事件，延時(shí)任務(wù)

2. 微任務(wù)： promise回調(diào)，mutationObserver

微任務(wù)

特點(diǎn)是：只要當(dāng)前callstack為空，就會(huì)清空微任務(wù)隊(duì)列，因此有可能會(huì)阻塞渲染，永遠(yuǎn)不執(zhí)行renderQueue的任務(wù)

Render Queue

渲染隊(duì)列的任務(wù)就是完成一次渲染，渲染頻率取決于硬件，可以簡單理解每隔16ms，會(huì)向render queue放一個(gè)渲染任務(wù)。

回流

回流是計(jì)算元素布局信息的步驟。當(dāng)頁面resize或者讀取某些屬性時(shí)都會(huì)觸發(fā)，這叫做強(qiáng)制回流。需要注意：強(qiáng)制回流會(huì)暫停執(zhí)行js代碼。

比如下面的代碼會(huì)觸發(fā)兩次回流操作

而將讀寫分離開，只會(huì)觸發(fā)一次操作

參考

https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-call-stack