スクロールの滑らかさを改善するための長時間実行タイマータスク

Question

私は自分のページを調べていて、この警告が出ました：

スクロールの滑らかさを改善するための長時間実行タイマータスクの遅延。 crbug.com/574343を参照してください

私も見ました：

Blinkは、スクロールをよりスムーズにするためにタスクを延期しました。これを回避するには、タイマータスクの実行に50ミリ秒未満が必要です。 https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail および https://crbug.com/574343#c40を参照してください。 詳細については。

これは何ですか？

Answer 1

これは、Blink（Chromeのレンダリングエンジン）がタイマー（requestAnimationFrame、setTimeout、またはsetIntervalに渡される関数など）の実行を遅らせることを決定したときに発生します。実行に50msandユーザータッチ入力があります。サイトが行っていることよりもユーザー入力（スクロールやタップなど）の処理を優先するために行われました。

このメッセージが表示された場合、ユーザーが同様の動作をする可能性があります。このシナリオの再現方法を次に示します。

1. タイマーを介してトリガーされる実行時間の長いJavaScriptを使用する
2. モバイルであること（またはDevToolsデバイスモードでエミュレートすること）
3. タッチ入力があり、画面上で指で下にスクロールすることが最も信頼できます。ページをタップまたはフリングすることでトリガーすることもできますが、再現する可能性は低く、再現が困難です。
4. Devtoolsの実験的CPUスロットリングにより、JSの時間が長くなり、表示される可能性が高くなります。

の解決方法これは、コメント40のコンソールメッセージの 参照された問題 から直接のものです。

1. 延期に関するコンソールメッセージをトリガーしているページにタイムラインを記録します。
2. タイムライン全体を選択し、ウィンドウの下部近くにある「イベントログ」ペインを開きます。
3. フィルターテキストフィールドに「タイマー起動」と入力します。 （下の画像を参照）
4. リストで「合計時間」が50ミリ秒を超えるタイマーを探します。これらは問題のあるものです。 （10ミリ秒を超えるタイマーは、ブラウザがユーザージェスチャを処理している場合に、このメッセージをトリガーすることもあります。）

これらの関数をより速く、またはより頻繁に実行しないようにします。