遞延長時間運行的定時任務（一個或多個），以提高滾動平滑

Question

我檢查我的網頁，我得到了這樣的警告：

遞延長時間運行的定時任務（一個或多個），以提高滾動平滑。見crbug.com/574343

我也看到了：

眨眼爲了使滾動平滑推遲的任務。您的計時器任務應該運行少於50ms以避免這種情況。有關更多信息，請參閱https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail和https://crbug.com/574343#c40。

這是什麼？

Answer 1

這發生閃爍（Chrome的渲染引擎）決定延遲執行計時器（像傳遞到​​，setTimeout，或setInterval的函數），因爲這些功能通常採取> 50ms的執行和有用戶觸摸輸入。這是爲了優先處理用戶輸入（比如滾動和點擊），而不是網站正在做什麼。

如果您遇到此消息，那麼您的用戶可能會得到類似的行爲。下面是如何重現這樣的情景：

1. 有長時間運行的JavaScript通過定時器觸發
2. 要移動（或DevTools設備模式仿效它）
3. 有觸摸輸入，用手指滾動在屏幕上向下是最可靠的。點擊或扔掉頁面也可能觸發它，但重現的可能性更小並且更難。
4. 開發工具的實驗CPU節流將使JS花更長的時間，並給你一個更好的機會看到它。

如何解決這是直接從控制檯消息下來referenced issue在評論40 方法：

1. 記錄被觸發關於推遲控制檯消息頁面上的時間表。
2. 選擇整個時間軸並打開窗口底部附近的「事件日誌」窗格。
3. 在過濾器文本字段中輸入「Timer Fired」。 （請參見底部的圖片）
4. 在「總時間」超過50毫秒的列表中查找定時器。這些是有問題的。 （請注意，超過10毫秒的定時器在某些瀏覽器正在處理用戶手勢的情況下也會觸發此消息。）

您希望這些函數的執行速度更快或更低。