私の質問は Chrome DevTools についてです。具体的には、タイムライン タブについて質問があります。そのため、何度も読んだことがありますが、私のブラウザーは 60 fps の速度でピクセルをレンダリングする必要があります。ただし、重い JS が実行され、60fps が発生するのを妨げている場合があります。また、DOM ツリー (ツリーの一部または全体) の再計算と再描画を引き起こす CSS と JS がある場合、1 フレームに 16 ミリ秒以上かかることもあります。これは、私たちのアプリからのそのような長いフレームの写真です:
わかりました、ここで私は明確に見ることができます.2つのリクエストは非常に長い時間(192ms + 14ms)を要し、ブラウザは60fpsを描くことができず、そこに近づくことさえできません.
ここに別の写真がありますが：
だから今はずっと良くなっています。今は〜42fpsです。しかし、今では理由がわかりません..
「レイヤーツリーの更新」と「ペイント」の機会がいくつかあります。いくつかのマウス イベントがありますが、ここではすべて 1 ミリ秒未満です。
このフレームには、このような「イベント」が 12 回あります。それらの 10 は 0.30 ミリ秒未満であるため、それらをすべて合計すると、間違いなく 16 ミリ秒未満 (正しく数えると 3.57 ミリ秒) になりますが、Chrome はこのフレームが 23.9 ミリ秒であると言います。
タイムラインで、ここにジャンクがあると表示されるのはなぜですか? それを取り除くにはどうすればよいですか?また、ボトルネックがどこにあるかを知る方法は?
タイムラインを調べる際に間違いなく何かを見落としているため、ここで少し混乱しています..そのような「ジャンク」を取り除く方法とそれらを検出する方法について、詳細な説明または詳細なチュートリアルを教えてください。私はすでにいくつかの記事を読み、パフォーマンスに関する Udemy コースをほぼ終了しましたが、まだ混乱しています..
ありがとうございました
