[解決済み] 違反 長い JavaScript タスクの実行に xx ms かかりました。

質問

最近、このような警告を受けたのですが、初めてです。

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

グループプロジェクトに取り組んでいるが、どこからがそうなのかさっぱりわからない。以前はこんなことはなかったのに。突然、他の誰かがプロジェクトに参加したときに現れました。この警告を引き起こすファイルや関数を見つけるにはどうすればいいのでしょうか？私は答えを探していますが、ほとんどは解決方法に関する解決策についてです。問題の原因も見つけられないのに、解決できるわけがない。

この場合、Chromeでのみ警告が表示されます。Edgeでも試してみましたが、同様の警告は出ませんでしたし、Firefoxではまだテストしていません。

からもエラーが出るんです。 jquery.min.js :

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

解決方法は？

更新情報 : Chrome 58+では、デフォルトでこれらのメッセージや他のデバッグメッセージが非表示になっています。表示するには、「情報」の隣にある矢印をクリックし、「詳細」を選択します。

Chrome 57では、デフォルトで「違反の非表示」がオンになっています。これを元に戻すには、フィルターを有効にして、「違反の非表示」ボックスのチェックを外す必要があります。

プロジェクトに関わる誰かが突然表示される

Chrome56にアップデートした可能性が高いのでは？この警告は素晴らしい新機能だと私は思います。どうしても消したいときだけ消してください。評価者に点数を取られてしまいますよ。根本的な問題は他のブラウザにもありますが、ブラウザはあなたに問題があることを伝えていないだけなのです。Chromium のチケットは こちら しかし、この件に関して興味深い議論はありません。

これらのメッセージは、実際には大きな問題を引き起こさないため、エラーではなく警告となっています。フレームが落ちたり、スムーズでない体験の原因になるかもしれません。

しかし、アプリケーションの品質を向上させるために調査し、修正する価値はあります。その方法は、どのような状況でメッセージが表示されるかに注意を払い、パフォーマンステストを行って問題が発生している場所を絞り込むことです。パフォーマンステストを始める最も簡単な方法は、次のようなコードを挿入することです。

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のプロファイラ のようなベンチマーク・ライブラリーを利用することもできます。 これ .

時間がかかっているコードを見つけたら（Chromeのしきい値は50ms）、いくつかのオプションがあります。

1. 不要と思われるタスクの一部または全部をカットする。
2. 同じ作業をより速く行う方法を見つけ出す
3. コードを複数の非同期ステップに分割する

(1)と(2)は難しいか不可能かもしれませんが、時には本当に簡単なこともあるので、最初の試みとすべきです。必要であれば、(3)は常に可能であるべきです。これを行うには、次のようなものを使用します。

setTimeout(functionToRunVerySoonButNotNow);

または

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

JavaScriptの非同期性については、こちらをご覧ください。 こちら .