ブラウザの「空白恐怖症」を克服せよ：Paint Holding が支えるシームレスな体験の裏側
Webアプリのパフォーマンスを語る時、私たちはつい `LCP` や `CLS` といったメトリクスに目を奪われがちだ。だが、アーキテクトとして本当に意識すべきは、ブラウザが「ページ遷移」という最も不安定な瞬間に、いかにしてユーザーの視覚的な拠り所を維持しているかという点にある。
今日は、その影の立役者である Paint Holding について、ブラウザの深層心理とメモリ管理の観点から解剖していこう。
—
Paint Holding とは「最後の砦」である
ブラウザのレンダリングパイプラインにおいて、ページ遷移は暴力的なイベントだ。古いDOMツリーが破棄され、新しいネットワークリクエストが走り、DOMの構築、スタイル計算、レイアウト……と続く。この「空白のギャップ」を埋めるために、ブラウザは最後に描画されたフレームをメモリ上に保持し、次ページが十分に準備されるまでそれを表示し続ける。これが Paint Holding だ。
一見、ブラウザが勝手にやってくれる恩恵に見えるが、この挙動を理解していないと、SPA（Single Page Application）のルーター設計で痛い目を見る。
なぜ「白画面」が忍び寄るのか
ブラウザが Paint Holding を「諦める」瞬間がいくつかある。特に注意すべきは以下のケースだ。
1. メモリの逼迫: ブラウザが「もうこのフレームを保持する余裕はない」と判断した場合。
2. クロスオリジン遷移: セキュリティ上の観点から、前ページの情報を保持したまま別ドメインへ遷移することは許されない。
3. 強制的なリペイント: 遷移直後に JS が DOM を激しく書き換え、ブラウザが「これはもう前のページじゃない」と認識した場合。
特に 3 つ目の「JS による DOM の破壊的変更」は、フロントエンドエンジニアが自ら招くパフォーマンスの地雷だ。遷移直後に `document.body.innerHTML = ”` のような荒業を行うと、ブラウザの描画パイプラインは混乱し、Paint Holding が無効化される。その結果、ユーザーは一瞬の白い閃光を拝むことになる。
現場で使える「視覚的安定化」のアーキテクチャ
単に「遷移を速くする」だけでなく、「遷移中も画面を安定させる」ためには、以下の設計思想が必要だ。
1. 遷移前の `will-change` との付き合い方
遷移直前に重い処理を走らせると、ブラウザはレイアウト計算を強制され、Paint Holding が意図せず解除されることがある。遷移のトリガーを引く前に、描画を完了させておく必要がある。
// 遷移を開始する直前に、描画の完了をマイクロタスクで保証する手法
function navigate(url) {
// レンダリングパイプラインを一度完遂させてから遷移する
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// ここで画面の状態が確定（Paint Holding対象として安定）
window.location.href = url;
});
});
}
2. コンポジット層の分離（Compositing Layers）
Paint Holding が保持するのは、実際にはブラウザの「レイヤー」の状態だ。CSS で `will-change: transform` や `opacity` を適切に使い、レイヤーを分離しておけば、ブラウザは遷移中も合成（Compositing）だけで画面を維持しやすくなる。
/ レイヤーを分離し、ブラウザの描画負荷を軽減する /
.page-container {
will-change: transform; / コンポジット層として隔離 /
backface-visibility: hidden;
}
アーキテクトへの提言：SPA のルーター設計を見直せ
React や Vue のルーターを使う際、遷移時に「Loading…」を即座に表示させるのは、実は Paint Holding を台無しにしている可能性がある。
もし、遷移直後にステートをクリアしてローディング画面を表示すると、ブラウザは「古いフレームを保持する意味はない」と判断し、保持していたピクセルを破棄する。結果として、「前の画面が静止している状態」から「唐突に真っ白なローディング画面」に切り替わるという、視覚的なジャンプが発生する。
推奨される戦略:
- 遷移時は「前の画面を維持したまま、新しいデータのフェッチを先行させる」
- 画面の更新は、新しいデータが揃ってから一気に行う（`Suspense` を活用する）
- 遷移中のスクロール位置や状態を `history.pushState` で管理し、視覚的な一貫性を担保する
最後に：ブラウザは「嘘」をつくのが上手い
ブラウザは、ユーザーを不安にさせないために必死で「嘘（保持された古いフレーム）」をついている。我々エンジニアの仕事は、その嘘を暴くことではなく、ブラウザがより自然に、より長く「嘘」をつき続けられるような舞台を用意することだ。
メモリ効率を意識し、不必要なリペイントを抑制し、描画パイプラインの非同期性を理解する。これらの地味な積み重ねこそが、最高峰のユーザー体験（UX）を生む唯一の道であると、私は確信している。
さあ、あなたのアプリケーションの遷移時、本当に「一瞬の空白」は存在しないだろうか？ デベロッパーツールの「Rendering」タブから「Paint Flashing」を有効にして、もう一度自分の手で確かめてみてほしい。そこには、まだ改善できる余地が眠っているはずだ。
コメント