こんにちは。Webという広大な宇宙の探検へようこそ。
フロントエンドの現場に長くいると、「ブラウザって、なんて健気なんだろう」と思う瞬間があります。私たちが書いたコードを、ブラウザは常に一生懸命、一瞬たりとも休まずに「画面を描き直して」くれています。
でも、たまにその頑張りが空回りしてしまうことがあるんです。今日は、そんなブラウザの「頑張りすぎ」を優しく止めてあげる、ちょっと魔法のような技術「Display Locking API」についてお話ししますね。
—
ブラウザの「お買い物」と「棚卸し」の話
まずは、ブラウザが画面を描く仕組みを、街のスーパーマーケットのお買い物で例えてみましょう。
あなたがWebページを見るということは、ブラウザという店員さんが、巨大な倉庫（DOMツリー）から商品をピックアップして、陳列棚（画面）に並べる作業に似ています。
1. リフロー（レイアウト）: 「この商品はどこに置こう？」「この箱のサイズはどれくらい？」と場所を計算する作業。
2. リペイント（描画）: 商品に色を塗ったり、値札を貼ったりする作業。
3. コンポジット（合成）: 陳列棚をガラス越しに、お客さん（ユーザー）に見せる準備をする作業。
さて、ここからが問題です。もし、ページの「ほんの一部」にある値札を書き換えただけなのに、ブラウザが律儀に「店内の全商品」を改めて計算し直そうとしたらどうでしょう？
「えっ、全部見直すの？ それ、すごく時間がかかっちゃうよ！」と、店員さんは大パニック。これがWebの動作を重くする「リフローの罠」です。
—
そこで登場！「Display Locking API」の魔法
このAPIを一言で言うと、「このエリア以外は、今は見ないでいいよ」とブラウザに伝える境界線（ロック）です。
本来ならページ全体を更新したいブラウザに対して、「ごめんね、このサブツリー（特定の囲いの中）だけ更新してくれればOKだよ。外側は触らなくていいから！」と伝えてあげることで、無駄な計算をバッサリと省くことができます。
これができれば、何千行ものHTMLがあっても、特定のパーツだけを素早く更新できる。まさに、パフォーマンス改善の「切り札」なんです。
—
どうやって使うの？（現場のコード例）
実際にどう書くのか見てみましょう。といっても、難しく考える必要はありません。`contain-intrinsic-size` というCSSプロパティとセットで使うのがお作法です。
/ 1. まず、このエリアのサイズをあらかじめブラウザに教えてあげます /
/ これをしないと、中身が隠れた瞬間に高さが0になってガクッと動いてしまいます /
.my-heavy-component {
contain-intrinsic-size: 0 500px; / おおよそのサイズを予約席として確保！ /
}
// 2. JavaScriptでロックをかけます
const element = document.querySelector(‘.my-heavy-component’);
// ブラウザに「この中身の計算は後回しでいいよ」と伝えます
element.requestPostLayoutPromise().then(() => {
console.log(“このエリアの準備が整いました。外側には影響させません！”);
});
※現在、この技術は `content-visibility` というCSSプロパティとしてより手軽に実装できるようになっています。現場ではまずこちらから試すのが定石です。
.my-heavy-component {
/ これだけで、画面外にあるときはレンダリングを完全にスキップしてくれます /
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
—
「大丈夫ですよ」というメッセージ
もし、あなたがこのコードを書いてみて「あれ、思ったより変わらないな？」とか「逆に変な空白ができたぞ？」と悩んだら、それはあなたがちゃんとブラウザの挙動を観察できている証拠です。素晴らしいことですよ。
Display Lockingは、いわばブラウザへの「おまかせモード」です。全部自分で抱え込むのではなく、ブラウザの得意な「効率化」に身を任せる。この感覚をつかむと、Web開発がぐっと楽になります。
最初は完璧に使いこなそうとしなくて大丈夫。「今日はこの重いリストにだけ使ってみようかな？」くらいの軽い気持ちで、ぜひ試してみてください。
あなたのWebページが、より軽やかに、ユーザーにとって心地よい場所になりますように。応援しています！
コメント