ブラウザのレンダリングの流れ

Loading -> Scripting -> Rendering -> Painting

この4つの処理のかたまりを Frame と呼部

この指標はGoogle Chromeの検証ツールのPerformanceタブのSummaryタブで見ることができる

Loadingは、リソースのダウンロード、リソースのパース
Scriptingは、JavaScriptの実行
Renderingは、レイアウトツリー構築（CSSルールマッチング処理など）
Paintingは、レンダリングエンジンが描画した画面が表示される

CSSルールマッチング処理

CSSは右のセレクタから評価される

index.css

.container > .button { }

最初に.buttonを持つDOMを探し
次に、.container要素内の.buttonか？

を確認し適用する。

パフォーマンス指標RAIL

Googleがパフォーマンス指標のRAILを提唱しています。
公式ドキュメント↓
https://developers.google.com/web/fundamentals/performance/rail?hl=ja

RAILはそれぞれの頭文字を取って、Response、Animation、Idle、Load。
それぞれ以下の意味と基準値を示します。

指標	意味	時間
Response	ページ内のアクションに対する応答	100msc
Animation	連続して行われるFrameの中で1フレームの処理の目安	16msec
Idle	ユーザが待っている状態でのJavaScriptの実行	50msec
Load	ウェブページコンテンツの読み込みにかかる時間	100msec

Chromeの検証ツールの指標の意味

検証ツールは開いたことがあるものの、それぞれの指標の意味をしっかり理解できていなかったのでまとめておきます。

Network > Timingタブ内に表示される内容

Queueing ... レンダリングエンジン内のキューイングに処理されるのにかかる時間
Stalled ... マシンのネットワークを活性化させるのにかかる時間
DNS Lookup ... ドメイン名をIPアドレスに解決するために行う時間
Initial connection ... TCPでの接続を確立するのにかかる時間
SSL ... TLS での通信トンネルを確立するのにかかる時間

Request sent ... HTTPリクエストを送信するのにかかる時間
Waiting(TTFB) ... Time To First Byte, リクエストを送信し終えてから、最初のデータを受け取るまでにかかる時間
Content Download ... コンテンツの最初のバイトからすべて受け取り終えるまでにかかる時間

Loadingのチューニング

・HTML/CSS/JavaScriptを最小化
・適切な画像形式
・画像ファイル最適化
・CSSのimportを避ける（CSSのimportは直列でロードされる)
・JavaScriptを非同期で読み込む(async、defer)を使う
・DNSプリフェッチ
└ リソースの名前解決を先に行っておくことでオーバーヘッドを削減
・ページプリレンダリング
・Gzip圧縮を有効にする
・CDNを用いてリソース配信
└ ネットワークのオーバーヘッド削減、キャッシュ
・ドメインシャーディング
└ HTTP1.1だと同一ドメインのHTTPコネクション数が最大6つまでだが、複数のドメインからコンテンツを取得すれば、6 * nのコネクション数を得ることができる（HTTP/2が利用できるならやる必要がない）
・ブラウザキャッシュ
・Service Workerによるキャッシュ

async、deferの違い

async... 複数のJSがasyncでロードされる場合、順番が保証されない。DOMのロードと並行してロードする
defer ... ドキュメントのパース完了後に発火（DOMMContentLoadedイベントの前に発火する)。

HTTP vs HTTPS Test

HTTPとHTTPSのロード時間の差が視覚的にわかる
https://www.httpvshttps.com/

JavaScriptのチューニング

Performanceタブで計測
・GCを防ぐ
・メモリ使用量を抑える

モバイルのクリックイベントは、ダブルタップを検知するために300ms待ちが発生する

レイアウトツリーのチューニング

・利用していないCSSルールセットを減らす

[メモ] Webフロントエンドチューニング