Chrome開發者工具中關於“Deferred long-running timer task(s) ”的警告
阿新 • • 發佈：2019-02-18
在開發過程中遇到了題目描述的問題，使用 Google 搜尋，中文答案很少，而且沒有令人滿意的。就在上提了一個問題，而且很快我就發現被很多人收藏了該問題（SF網站問題被收藏時，會收到訊息提醒）。也有一些網友回答該問題，但是一直沒有優質的答案。
後來在 Stack overflow 找到比較好的答案，這個回答也是點“贊”數想當高的。英文好的同學建議直接閱讀英文，英文不好的同學可以閱讀下面我的翻譯（英文水平有限，沒有按照字句翻譯，只是根據我對他們的理解來翻譯）。
瀏覽器中報錯的資訊如下：
答案描述：
這個問題主要發生在當Blink(Chrome的渲染引擎)決定延時執行一個定時器函式的時候。比如：通過requestAnimationFrame
setTimeout,setInterval這些物件執行的函式。因為這些物件在執行函式時至少要花費 50ms的時間，如果在這個時候剛好有使用者在網頁上輸入操作，Blink會優先執行使用者的輸入操作（比如：scrolls事件，tap事件）。
如果你的JavaScript程式碼在執行時也出現了這樣的問題，可能是使用者觸發了同樣的“行為”（指在執行定時器函式時，剛好有使用者在操作）。下面有幾種方式來複現這個問題：
- 通過
timer（定時器函式）觸發了一段執行時間比較長的JavaScript程式碼； - 在移動端（或者是在開發者工具中模擬移動裝置的模式下）；
- 當手指與螢幕發生了真實的接觸，並且發生了輸入或者是滾動的行為。觸控頁面或是快速的滾動頁面也會觸發這個問題，但是非常少見的而且不容易復現的。
- 使用開發者工具中的“CPU throttling”模式延長
JavaScript程式碼執行時間，可以讓你有更好的時機去復現該問題；
在console(控制檯)中列印的訊息指向的問題（chromium平臺bug列表），可以從第40條評論中直接找到解決該問題的方法：
- 在導致“deferral”的頁面開啟開發者工具記錄時間線；
- 選擇整個時間線，然後在視窗底部開啟“Event Log” 面板。
- 在文字輸入框中（Filter過濾的欄位）中輸入“Timer Fired”
- 在列表中查詢“總時間”超過50毫秒的定時器函式。這就是問題的所在。（當瀏覽器在處理使用者的手勢的情景下，定時器函式執行超過10毫秒也會觸發該訊息）
英文原文
如果閱讀中文後還無法理解可以參考英文截圖
