Chrome開發者工具中關於“Deferred long-running timer task(s) ”的警告

原文地址:http://stackoverflow.com/questions/37367200/what-is-the-deferred-long-running-timer-tasks-warning-in-the-chrome-devtools

在開發過程中遇到了題目描述的問題,使用 Google 搜索,中文答案很少,而且沒有令人滿意的。就在segmentfault上提了一個問題,而且很快我就發現被很多人收藏了該問題(SF網站問題被收藏時,會收到消息提醒)。也有一些網友回答該問題,但是一直沒有優質的答案。

後來在 Stack overflow 找到比較好的答案,這個回答也是點“贊”數想當高的。英文好的同學建議直接閱讀英文,英文不好的同學可以閱讀下面我的翻譯(英文水平有限,沒有按照字句翻譯,只是根據我對他們的理解來翻譯)。

瀏覽器中報錯的信息如下:

答案描述:

這個問題主要發生在當Blink(Chrome的渲染引擎)決定延時執行一個定時器函數的時候。比如:通過requestAnimationFrame,setTimeout,setInterval這些對象執行的函數。因爲這些對象在執行函數時至少要花費 50ms的時間,如果在這個時候剛好有用戶在網頁上輸入操作,Blink會優先執行用戶的輸入操作(比如:scrolls事件,tap事件)。

如果你的JavaScript代碼在運行時也出現了這樣的問題,可能是使用者觸發了同樣的“行爲”(指在執行定時器函數時,剛好有用戶在操作)。下面有幾種方式來複現這個問題:

  1. 通過timer(定時器函數)觸發了一段執行時間比較長的JavaScript代碼;
  2. 在移動端(或者是在開發者工具中模擬移動設備的模式下);
  3. 當手指與屏幕發生了真實的接觸,並且發生了輸入或者是滾動的行爲。觸摸頁面或是快速的滾動頁面也會觸發這個問題,但是非常少見的而且不容易復現的。
  4. 使用開發者工具中的“CPU throttling”模式延長JavaScript代碼執行時間,可以讓你有更好的時機去復現該問題;

console(控制檯)中打印的消息指向的問題(chromium平臺bug列表),可以從第40條評論中直接找到解決該問題的方法:

  1. 在導致“deferral”的頁面打開開發者工具記錄時間線;
  2. 選擇整個時間線,然後在窗口底部打開“Event Log” 面板。
  3. 在文本輸入框中(Filter過濾的字段)中輸入“Timer Fired”
  4. 在列表中查找“總時間”超過50毫秒的定時器函數。這就是問題的所在。(當瀏覽器在處理用戶的手勢的情景下,定時器函數執行超過10毫秒也會觸發該消息)

英文原文

如果閱讀中文後還無法理解可以參考英文截圖


圖片名稱

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章