「Webフロントエンドハイパフォーマンスチューニング」を読んだ。

2章レンダリングのしくみ

ブラウザは、以下のようなレンダリングエンジンとJavaScriptエンジンを用いてレンダリングを行う。

レンダリングの流れはLoading, Scripting, Rendering, Painting である。(ローディング、スクリプティング、レンダリング、ペインティング）

HTML, CSS, JavaScriptファイルや、Jpeg, SVG, PNGなどの画像ファイルを読み込む。

JavaScirptコードのトークン列をパースし、コンパイルしたあとコードを実行する。

スタイルの計算を行なったあと、要素の大きさやパッディング、マージン、位置などを決定する。

内部の低レベルな2Dグラフィック向けの命令を行なったあと、その命令に基づきz軸の存在するレイヤーという単位で1枚ごとに生成する。最終的にそのレイヤーを合成し、レンダリング結果を生成する。

「再レンダリング」するときに、以上の一連の流れを再び必ず行うというわけではなく、状況に応じて内部表現のオブジェクトをなるべく再利用する。ただし、どの程度再利用するかは、場合によって異なる。

推測するな、計測せよ。(UNIX格言)

RAILというパフォーマンスモデルがあり、ウェブアプリケーションやハイブリッドアプリに対するパフォーマンスの指標として利用できる。

Response(応答) 基準時間: 100ms
- ユーザーの何らかのアクションに対して応答するまでの時間。
Animation(アニメーション) 基準時間: 16ms
- アニメーションの1フレーム処理の時間(16ms以下だと60FPSを実現できる)
Idle(アイドル処理) 基準時間: 50ms
- アイドル状態(何らかのユーザーのアクションを待っている状態)のJavaScriptの処理時間
- Responseとあわせて150ms以下で実際のUI上の応答があることになる。
Load(読み込み) 基準時間: 1000ms
- コンテンツ読み込みにかかる時間

Next.js使ってるとどれが使えるかすぐわからないので、深くは追求せず。