【実務・中級編】 ペイントホールディング（Paint Holding） – Webブラウザの仕組み実践ガイド

お疲れ。最近、社内のあちこちから「画面遷移の時に一瞬ホワイトアウトして目が痛い」「SPAのルーティングでちらつき（FOUC）が気になるんだけど何とかならない？」なんて相談を受けてないか？

フロントエンドエンジニアとしてUIの滑らかさにこだわるのは素晴らしいことだが、実はその悩み、JavaScriptやCSSを書く前の段階、つまり「ブラウザのコア（レンダリングエンジン）が裏側でどう動いているか」を理解していないと永遠に解決しない迷宮に入り込む。

今回は、ブラウザがページ遷移の絶望的な暗闇（白飛び）から私たちを救い出してくれる隠れたヒーロー、「ペイントホールディング（Paint Holding）」について徹底的に解説しよう。仕様の裏側から、現場で使える実践的なハックまで、シニアの視点ですべて叩き込んでやる。心して聞いてくれ。

—

1. ペイントホールディングとは何か？仕様とブラウザの裏側の泥臭い現実

まず、ペイントホールディングの定義を正確におさえておこう。
ペイントホールディングとは、ユーザーがリンクをクリックするなどして新しいページへナビゲーション（遷移）した際、ブラウザが「直前まで表示していた古いページのスクリーンショット」を一時的に保持し、新しいページのDOM構築と最初のレンダリングが完了するまで表示し続けるブラウザの最適化機能のことだ。

これがない世界を想像してみてほしい。リンクを踏むたびに、画面は一瞬「完全な白（または黒の背景）」になり、HTMLが降ってきて、CSSOMが構築され、レイアウト計算（Reflow）が走り、ペイントが終わってようやく新しいコンテンツが表示される。あの激しい明滅、いわゆる「ホワイトアウト地獄」だ。あれはユーザーの認知負荷を跳ね上げ、アプリが「重い」と感じさせる最大の戦犯だった。

ブラウザの裏側で何が起きているのか？

Chromium（Blink）やWebKitなどのモダンブラウザの内部では、ナビゲーションが発生した瞬間、次のようなドラマチックな処理が高速で走っている。

1. ナビゲーションのトリガーとスナップショットの保持:
ユーザーが別ページへ遷移しようとした瞬間、ブラウザは「今、ユーザーが見ている画面の最終状態」をGPUメモリ上にテクスチャ（要するにスクリーンショット）としてキャプチャし、保持する。
2. 古いプロセスの破棄と新しいプロセスの生成（Site Isolationなど）:
クロスサイト間遷移であればプロセスが切り替わり、メインスレッドは新しいHTMLのパースとDOMツリー、CSSOMツリーの構築に全リソースを捧げる。
3. ホールディングの継続:
この間、ユーザーに見せ続づけられているのは、さっきキャプチャした「偽物の古い画面」だ。ユーザーは「まだ前のページにいる」と錯覚するが、裏では着々と新しいページの準備が進んでいる。
4. ファーストペイント（First Paint）による剥奪:
新しいページの最初の描画（First Paint）が完了した瞬間、ブラウザは持っていたスクリーンショットを捨て、本物の新しい画面を表示する。

この一連の仕組みにより、ユーザーは「アプリがサクサク動いている」という錯覚を得られる。これがペイントホールディングの正体だ。

—

2. 現場で直面する「ペイントホールディングが効かない・邪魔になる」罠

さて、ここからがシニアの腕の見せ所だ。このペイントホールディング、基本的には素晴らしい機能なのだが、実務の現場では「意図せずハックされてしまうケース」や「逆におかしな挙動を招く原因」になることがある。

① SPA（Single Page Application）の罠

悲しいお知らせだが、React, Vue, Next.jsなどで構築された一般的なSPAのクライアントサイドアウティング（`history.pushState`などを用いた画面遷移）において、ブラウザのネイティブなペイントホールディングは自動的には発動しない。
なぜなら、ブラウザから見れば「同じ一つのタブ（同じドキュメント内）」でDOMが書き換わっているだけだからだ。したがって、SPA特有の「ページ遷移時のカクつきや白飛び」を防ぐには、私たちフロントエンドエンジニア側でこの挙動をエミュレートするか、適切なローディング状態（スケルトンUIなど）を制御してやる必要がある。

② 古いスクリーンショットが毒になるケース

マルチテナントなSaaSや、ユーザーの権限によって動的にUIが激変するダッシュボードを開発しているとき、ペイントホールディングが「余計なお世話」をすることがある。
例えば、ユーザーAの情報を表示していた画面から、ログアウトまたは別アカウントに切り替えた瞬間、ブラウザが「ユーザーAの機密情報が含まれる古い画面」を次のページの読み込み中ずっと保持して表示してしまう可能性がある。セキュリティやプライバシーの観点から、これは厳に防がなければならない。

—

3. 実践！ペイントホールディングと共存し、UIのちらつきを撲滅するコード例

では、マルチページアプリケーション（MPA）のガッツリした遷移、あるいはSPAのルーティングにおいて、この仕組みを理解した上でどうコードを書くべきか。

ここでは、「SPAのクライアントサイド遷移において、ブラウザのペイントホールディングに似た滑らかなトランジションを自前で実装する実践的なコード例」を紹介しよう。そのままプロジェクトのコンポーネントに組み込めるクオリティにしてある。

import React, { useState, useEffect, useTransition } from ‘react’;
import { useNavigate, useLocation } from ‘react-router-dom’; // 例としてReact Routerを使用

/

• プレースホルダー（スケルトンUI）を伴うスムーズな画面遷移コンポーネント
• ブラウザのペイントホールディングの思想をSPAのルーティングに応用した実装

/
export function SmoothTransitionLayout({ children }) {
const location = useLocation();
const [isPending, startTransition] = useTransition();
const [displayLocation, setDisplayLocation] = useState(location);
const [isCapturing, setIsCapturing] = useState(false);

useEffect(() => {
// 画面遷移がトリガーされた瞬間にキャプチャ状態（トランジション開始）とする
if (location.pathname !== displayLocation.pathname) {
setIsCapturing(true);

// React 18のuseTransitionを使い、重いレンダリングを裏側で非同期処理させる
startTransition(() => {
setDisplayLocation(location);
});
}
}, [location, displayLocation]);

// 新しいページの描画準備（マウント）が完了したらキャプチャ状態を解除
const handleContentReady = () => {
setIsCapturing(false);
};

return (