后來在 Stack overflow 找到比較好的答案,這個回答也是點“贊”數(shù)想當(dāng)高的。英文好的同學(xué)建議直接閱讀英文,英文不好的同學(xué)可以閱讀下面我的翻譯(英文水平有限,沒有按照字句翻譯,只是根據(jù)我對他們的理解來翻譯)。
瀏覽器中報錯的信息如下:
答案描述:
這個問題主要發(fā)生在當(dāng)Blink(Chrome的渲染引擎)決定延時執(zhí)行一個定時器函數(shù)的時候。比如:通過requestAnimationFrame,setTimeout,setInterval這些對象執(zhí)行的函數(shù)。因為這些對象在執(zhí)行函數(shù)時至少要花費 50ms的時間,如果在這個時候剛好有用戶在網(wǎng)頁上輸入操作,Blink會優(yōu)先執(zhí)行用戶的輸入操作(比如:scrolls事件,tap事件)。
如果你的JavaScript代碼在運行時也出現(xiàn)了這樣的問題,可能是使用者觸發(fā)了同樣的“行為”(指在執(zhí)行定時器函數(shù)時,剛好有用戶在操作)。下面有幾種方式來復(fù)現(xiàn)這個問題:
- 通過timer(定時器函數(shù))觸發(fā)了一段執(zhí)行時間比較長的JavaScript代碼;
- 在移動端(或者是在開發(fā)者工具中模擬移動設(shè)備的模式下);
- 當(dāng)手指與屏幕發(fā)生了真實的接觸,并且發(fā)生了輸入或者是滾動的行為。觸摸頁面或是快速的滾動頁面也會觸發(fā)這個問題,但是非常少見的而且不容易復(fù)現(xiàn)的。
- 使用開發(fā)者工具中的“CPU throttling”模式延長JavaScript代碼執(zhí)行時間,可以讓你有更好的時機去復(fù)現(xiàn)該問題;
在console(控制臺)中打印的消息指向的問題(chromium平臺bug列表),可以從第40條評論中直接找到解決該問題的方法:
- 在導(dǎo)致“deferral”的頁面打開開發(fā)者工具記錄時間線;
- 選擇整個時間線,然后在窗口底部打開“Event Log” 面板。
- 在文本輸入框中(Filter過濾的字段)中輸入“Timer Fired”
- 在列表中查找“總時間”超過50毫秒的定時器函數(shù)。這就是問題的所在。(當(dāng)瀏覽器在處理用戶的手勢的情景下,定時器函數(shù)執(zhí)行超過10毫秒也會觸發(fā)該消息)
英文原文
如果閱讀中文后還無法理解可以參考英文截圖