設問とコンテキスト
コンテンツページで数百枚のカードが一度にDOMに配置され、初回レイアウトおよびスクロール中に長いタスク（Long Tasks）が発生しています。面接官は、content-visibility: auto を評価し、スキップされる処理内容を説明し、画面外のサイズを見積もり、ページネーションや仮想化が依然として必要となるタイミングを判断することを求めています。測定、アクセシビリティ、およびロールバック基準も含めてください。
面接官が見ているポイント
レンダリングパイプラインとCSSコンテインメントの関係を理解しているか、画面外レンダリングのスキップとDOMサイズの削減を区別できるか、そして推定される高さ、フォーカスナビゲーション、互換性を適切に処理できるかを確認しようとしています。CSS 1行や未検証の倍率を示すだけでは、最適化の証明にはなりません。
最初に確認すべき明確化のための質問
- カードは何枚あり、各カードの複雑さはどの程度で、ファーストスクリーンの目標は何ですか？
- ボトルネックはスクリプト、スタイル計算、レイアウト、ペイント、メモリ、ネットワークのどこにありますか？
- カードの高さは安定していますか、それとも画像やフォントによって読み込み後に変化しますか？
- ページはページ内検索、キーボードフォーカス、スクリーンリーダー、または印刷に依存していますか？
- 対象となるブラウザサポート範囲とアクセシビリティの合格基準は何ですか？
30秒で答える回答フレームワーク
まずPerformanceパネルでロングタスクとレイアウトコストを確認し、次に分割された画面外のカードに対して content-visibility: auto を試します。これにより、ブラウザは一時的に不要なサブツリーのレイアウトとペイントをスキップできますが、コンテンツ自体はDOMおよびアクセシビリティツリーに残ります。サイズコンテインメントによって未レンダリングのコンテンツが空のボックスのように動作する可能性があるため、計測に基づいた contain-intrinsic-size と組み合わせ、レイアウトシフトを追跡します。DOMサイズやデータ量が引き続きボトルネックとなる場合は、ページネーションまたは仮想化を採用します。
ステップごとの詳細解説
ステップ 1: 最適化対象を確認する
ファーストペイント、インタラクションレイテンシ、ロングタスク、レイアウト回数、ペイント時間、およびメモリを記録します。ネットワークの変動をCSSによる改善と誤認しないように、同一のデータ、デバイス、ビューポート、キャッシュ条件でベースラインを保持します。
ステップ 2: コンテンツをスキップ可能な単位に分割する
ブラウザがビューポート付近のサブツリーを評価できるように、繰り返し配置されるカードを安定したsectionやarticleでラップします。境界は実際のコンテンツ単位と一致させる必要があります。頻繁に変更される1つの大きなコンテナを隠すことは避けてください。
ステップ 3: auto の挙動を理解する
content-visibility: auto は、レイアウト、スタイル、およびペイントのコンテインメントを有効にします。画面外の要素がユーザーに関連していない場合、ブラウザはそのサブツリーのレンダリングをスキップし、ビューポートに近づいたときに再開することがあります。これは display: none ではありません。コンテンツはDOMおよびアクセシビリティツリーに残り、検索やフォーカスも可能な状態を維持できます。
ステップ 4: 測定可能な固有プレースホルダーを提供する
サイズコンテインメントにより、ブラウザは外側のサイズを計算するためだけに子要素をレンダリングする処理を回避できます。プレースホルダーがない場合、要素のレイアウトの高さがほぼゼロになり、スクロールバーのジャンプが発生する可能性があります。推定には contain-intrinsic-size を使用するか、ブラウザが以前にレンダリングされたサイズを記憶できるように auto を使用します。
.card-section {
content-visibility: auto;
contain-intrinsic-size: auto 420px;
}ステップ 5: レンダリングを強制するコードを監査する
レイアウトや寸法のDOM読み取りの一部は、スキップされたサブツリーの処理をブラウザに強制します。測定処理、同期的なスクリーンショット、アニメーション、サードパーティ製ウィジェットを見直してください。スクロールハンドラ内での反復的な読み取り/書き込みサイクルを避け、可能であれば測定をバッチ処理するかObserverを使用します。
ステップ 6: アクセシビリティとインタラクションを検証する
画面外のコンテンツに対して、キーボードナビゲーション、ページ内検索、スクリーンリーダー、アンカージャンプをテストします。auto と hidden はアクセシビリティのセマンティクスが異なるため、パフォーマンスのために一方を他方に置き換えないでください。真に非表示にすべきコンテンツには明示的なセマンティック非表示戦略を使用し、フォーカス順序を再テストします。
ステップ 7: 仮想化との境界を比較する
content-visibility はDOM全体を保持するため、コンテンツサイズは中程度だが画面外のレンダリングコストが高いページに適しています。ノード数、リスナー、またはデータメモリ自体が大きすぎる場合は、仮想化、ページネーション、またはサーバーサイドでのチャンク化を使用します。これらの手法はページの領域ごとに組み合わせることができます。
優れた回答例
パフォーマンストレースでボトルネックを確認した後、カードをチャンク化して content-visibility: auto をテストします。これにより画面外のサブツリーのレイアウトとペイントはスキップされますが、DOMサイズは削減されません。contain-intrinsic-size は、未レンダリングのカードが高さゼロのボックスのように見えるのを防ぎます。レイアウトの読み取りを監査し、キーボード、ページ内検索、スクリーンリーダーの挙動をテストした上で、ファーストペイント、インタラクションレイテンシ、レイアウトシフト、メモリを比較します。依然としてDOMサイズが主なコストである場合は、ページネーションまたは仮想化に切り替えます。
よくある間違い
間違い: auto を仮想リストとして扱う
auto は主に画面外のレンダリング処理をスキップするものであり、ノード自体は存在し続けます。リスナー、データメモリ、巨大なDOMのコストが自動的に解消されるわけではありません。
間違い: 固有サイズの見積もりを省略する
サイズコンテインメントでは、プレースホルダーを使用して外側のボックスがレイアウトされることがあります。値が小さすぎるとスクロールバーやスクロール位置が変わってしまうため、実際のカードの分布から推定して再調整してください。
間違い: ファーストペイントのみを測定する
コンテンツがビューポートに入るときにもレンダリングは発生します。初回ロードに加えて、スクロールのインタラクションレイテンシ、ロングタスク、レイアウトシフト、メモリ、アクセシビリティも測定してください。
間違い: hidden と auto を混同する
hidden はコンテンツをスキップし、ページ内検索、フォーカス、選択に影響を与えます。一方、auto は画面外のコンテンツをユーザーエージェント機能から利用可能な状態に保ちます。セマンティックおよびインタラクションの仕様に基づいて選択してください。
フォローアップの質問と回答
フォローアップ: ネットワークリクエストは削減されますか？
いいえ。このプロパティはレンダリングとコンテインメントに影響を与えるものであり、データやリソースはすでにダウンロードされている可能性があります。ネットワークとメモリのコストを削減するには、ページネーション、遅延読み込み（lazy loading）、またはサーバーサイドのチャンク化を使用してください。
フォローアップ: スクロール中にページがジャンプするのはなぜですか？
サイズコンテインメント下で要素がプレースホルダーを使ってレイアウトされ、レンダリング後にその高さが変化したためです。見積もりを改善し、contain-intrinsic-size: auto を使用して、レイアウトシフトの指標で検証してください。
フォローアップ: コンテンツはまだアクセシビリティツリーに残っていますか？
auto の場合、画面外のコンテンツはDOMおよびアクセシビリティツリーに残り、通常は検索やフォーカスが可能です。hidden では異なります。対象のブラウザと支援技術で再テストしてください。
フォローアップ: どのような場合に避けるべきですか？
高さが予測不能で推定値がスクロールを損なう場合、コンポーネントが頻繁にレイアウトを強制する場合、またはDOMサイズがすでにボトルネックになっている場合は、このプロパティに依存することを避けてください。代わりに仮想化、ページネーション、またはチャンク読み込みを使用してください。
フォローアップ: デグレードがないことをどのように証明しますか？
固定されたデバイスとデータで前後比較テストを実行し、ファーストペイント、p95インタラクションレイテンシ、ロングタスク、レイアウトシフト、スクロールフレームレート、メモリ、アクセシビリティの結果を記録し、実際のトラフィックでパーセンタイル指標を監視します。