web-dev-qa-db-ja.com

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

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

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

私も見ました:

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

これは何ですか?

enter image description here

33
nonstop328

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

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

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

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

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

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

Timer fired filter on timeline

71
Garbee