欣迪

這是一則面試題,請不要考慮實務上出現的合理性題目是

  • 點擊按鈕後會不會發生效果
  • 為什麼會 or 不會

See the Pen
macrotask & microtask
by Dean (@hcd1983)
on CodePen.0

和瀏覽器的渲染流程相關 (目前我測試了最新版的 chrome, firefox, edge 都適用)

如下圖的 function

1. 首先要理解 macrotask 和 microtask 在事件發生的執行順序,非同步事件拉到所有同步事件的最後 (setTimeOut, async…) 執行,通常瀏覽器的設計會在 microtask 結束後再做 render (repaint / reflow) 以免改變的外觀次數太頻繁,消耗資源。

2. microtask 通常由 Promise 觸發,是一個專門 callback 的特殊 api 會在事件的結尾執行。因此在下圖 function 的執行順序如下: alert => changeText => Promise (loopForever) => changeColor (setTimeout)

3. 執行後 alert 順利出現,其他卻好像無反應。以下一一探究:changeColor (setTimeout) 因為被拉到 macrotask 的最後面,所以在等待 microtask 執行完畢,因為 Promise 的無限迴圈被擋掉,完全不會觸發。changeText 有被觸發嗎? 有,而且 dom 的屬性被改變了。但是因為 Promise 的無限迴圈還在跑,所以瀏覽器一直不 render 。

4.最後會發生電腦猶如哀嚎的運轉聲,瀏覽器跳出錯誤警示,是由於無限 loop 造成的系統過載。

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。