UI 阻塞行為：微任務與宏任務

你能找出下面兩個程式碼片段的區別嗎：function handleclick1() { settimeout(handleclick1, 0);}function handleclick2() { promise.resolve().then(handleclick2);}登入後複製如果您無法確定選擇其中一個的含義，那麼這篇博文將教您一些新知識。 背景settimeout 用於安排在一定時間後回撥。 promise.resolve().then 會有效地做同樣的事情，但內部兩者是不同的。後者返回一個已經解決的承諾。對該 promise 呼叫 then(callback) 將安排執行回撥。所以上述兩個函式都以最小的延遲遞迴地呼叫自己。不同之處在於，來自 settimeout 的回撥被放置在宏任務佇列中，而來自 promise.then() 的回撥被放置在微任務佇列中。事件迴圈如何處理這兩個佇列中的專案是上面兩個程式碼片段的區別所在。 微任務與宏任務的事件迴圈處理事件迴圈所做的就是當有任務要執行時，它會執行這些任務，然後休眠並等待其他任務。 宏任務（或簡稱任務）包括負責工作的函式，例如：解析對 dom 做出反應，除此之外...執行從任務佇列中選取的任務後，事件迴圈會執行微任務檢查點。其演算法類似於：While microtask queue is not empty, pick the oldest task from microtask queue and execute it.登入後複製這意味著，如果一個微任務將另一個微任務排入佇列，則該任務將在下一個宏任務之前執行。而且由於 ui 渲染是一個宏任務，它永遠不會被事件迴圈執行。這是上述內容的演示：js bin demo。無限動畫正在執行。如果我們觸發handleclick1，那麼我們會向主執行緒新增一些處理，但動畫仍然可以正確渲染。但是如果我們觸發handleclick2，動畫就會停止。我新增了變數totalcount，這樣我們就可以在頁面崩潰之前中斷。但值得注意的是，一旦 microtask 迴圈啟動，ui 將在一段時間內無響應。因為像渲染、響應 dom 等任務只有在 microtask 佇列為空後才會執行。這使得上面程式碼片段中的handleclick1成為更安全的選擇。希望這篇部落格有助於解釋微任務和宏任務之間的一個根本區別。 以上就是UI 阻塞行為：微任務與宏任務的詳細內容，更多請關注我的其它相關文章！