技術標籤：settimeout預設時間

來自：http://voidcn.com/article/p-zgijaywv-bte.html

[Violation] Forced reflow while executing JavaScript took 45ms

最近，我收到了這樣的警告，這是我第一次得到它：

[Violation] Long running JavaScript task took 234ms [Violation] Forced reflow while executing JavaScript took 45ms

我正在開展一個小組專案，我不知道它來自哪裡。這從未發生過。當參與該專案的其他人突然出現。如何找到導致此類警告的檔案/功能？我一直在尋找答案，但主要是關於如何解決它的解決方案。如果我找不到問題的根源，我無法解決。

[Violation] Handler took 231ms of runtime (50ms allowed)            jquery.min.js:2

更新：Chrome 58預設隱藏了這些和其他除錯訊息。要顯示它們，請單擊“資訊”旁邊的箭頭，然後選擇“詳細”。
更新2：預設情況下，Chrome 57啟用了“隱藏違規”功能。要重新開啟它們，您需要啟用過濾器並取消選中“隱藏違規”框。

suddenly it appears when someone else involved in the project

我認為你更有可能更新到Chrome 56.這個警告是一個(imo)精彩的新功能 – 如果你絕望，請關閉它，你的評估員會從你那裡拿走標記。其他瀏覽器存在潛在問題，但瀏覽器並沒有告訴您存在問題。 Chromium門票在這裡，但沒有真正有趣的討論：

https://bugs.chromium.org/p/chromium/issues/detail?id=662497

這些訊息是警告而不是錯誤，因為它不會真正導致重大問題。它可能會導致幀丟失或導致不太順暢的體驗。
但是，它們值得研究和修復，以提高應用程式的質量。這樣做的方法是關注訊息出現的情況，並進行效能測試以縮小問題發生的位置。開始效能測試的最簡單方法是插入一些程式碼，如下所示：

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}

如果您想獲得更高階的功能，還可以使用Chrome的分析器：

https://developers.google.com/web/tools/chrome-devtools/rendering-tools/

或者使用像這樣的基準測試庫：

https:// benchmarkjs.com/

一旦你發現一些需要很長時間的程式碼(50毫秒是Chrome的門檻)，你有幾個選擇：
>刪除可能不必要的部分/全部任務
>弄清楚如何更快地完成同樣的任務
>將程式碼劃分為多個非同步步驟
(1)和(2)可能很難或不可能。但有時真的很容易，應該是你的第一次嘗試。如果需要，應該總是可以做(3)。要做到這一點，你將使用類似的東西

setTimeout(functionToRunVerySoonButNotNow);

要麼

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);

你可以在這裡閱讀更多關於javascript的非同步性質：

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/