【入門編】コンポジタースレッドと合成レイヤー – Webブラウザの仕組み実践ガイド

こんにちは。Webブラウザという「魔法の箱」の奥底を覗きに来てくれてありがとうございます。

普段何気なく見ているWebサイト。ページをスクロールしたり、アニメーションが滑らかに動いたりするのを見て「当たり前」に感じているかもしれませんが、実はその裏側でブラウザは、とんでもないスピードで「絵画の修復作業」のようなことを繰り返しているんです。

今日は、その中でも特に「画面をいかに素早く、綺麗に描き出すか」の心臓部である「コンポジタースレッド」と「合成レイヤー」という、ちょっと強そうな名前の仕組みを紐解いていきましょう。

—

突然ですが、あなたが「紙芝居」を作る職人さんだと想像してください。

一枚の画用紙に、背景からキャラクター、吹き出しまで全部描き込むとしたらどうでしょう？キャラクターが少し動くだけで、また背景から描き直さないといけませんよね。これでは効率が悪すぎます。

そこで、「背景は背景の紙」「キャラクターは切り抜いた別の紙」「吹き出しも別の紙」というように、バラバラの紙（レイヤー）に描いて、最後に重ねて一つの絵にしたらどうでしょうか？キャラクターを動かしたいときは、キャラクターの紙をずらすだけで済みますよね。

ブラウザも全く同じことをしています。

ブラウザはWebページを丸ごと一枚の絵として扱うのではなく、特定の条件（スクロールする場所や、アニメーションする要素など）を見つけると、それを「別のレイヤー」として切り離します。これが「合成レイヤー（Compositing Layers）」です。

ブラウザには、仕事を分担する「スレッド」というチームがいくつかいます。

メインスレッド： HTMLを読み込んだり、JavaScriptを動かしたりする「司令塔」。非常に忙しい。
コンポジタースレッド： メインスレッドから「ここをいい感じに表示して！」という指示を受け取り、GPU（グラフィック専用の脳みそ）を使ってレイヤーを高速で重ね合わせる「凄腕職人」。

メインスレッドがJavaScriptの計算で「うわっ、忙しい！」となっている時でも、コンポジタースレッドは独立して動けるため、スクロールがカクつかずに済むんです。この「メインスレッドに頼らず、GPUでレイヤーを動かす」ことこそが、ヌルヌル動くUIの正体です。

では、ブラウザはどんな時に要素を「別のレイヤー（特別扱い）」にしてくれるのでしょうか。これを「レイヤー昇格」と言います。

代表的な条件はいくつかありますが、代表的なのは以下のCSSです。

.box {
/ これが「別レイヤーにして！」という魔法の呪文の一つ /
will-change: transform;

/ 3D変換を加えることでもレイヤーに昇格します /
transform: translateZ(0);
}

「あれ？全部レイヤーにすれば速くなるんじゃないの？」と思ったあなた、鋭いです！……が、実はそうはいきません。

レイヤーをたくさん作ると、その分だけメモリ（ブラウザの作業机の広さ）を大量に消費します。机が書類で埋め尽くされると、逆に仕事が遅くなりますよね。「必要なところだけ特別扱いする」のが、一流のエンジニアの作法です。

どれがレイヤーになっているか、ブラウザの「開発者ツール」で確認できます。

1. Chromeで `F12` を押して開発者ツールを開く。
2. `Esc` キーを押して、下のパネルに「レンダリング（Rendering）」タブを探す。
3. 「レイヤーの境界（Layer borders）」という項目にチェックを入れる。

すると、ページ上のレイヤーがオレンジ色の枠で囲まれて表示されます。画面をスクロールしてみてください。どこのパーツが独立したレイヤーとして動いているか、一目瞭然ですよ！

—

最初は「コンポジタースレッド？ GPU？なんか難しそう……」と感じるかもしれません。でも、大丈夫です。

最初は「ブラウザは画面を『紙芝居』のように重ねて描いているんだな」「transform（位置の変化）やopacity（透明度の変化）を使うと、ブラウザは裏でGPUを使って頑張ってくれるんだな」というイメージを持つだけで十分です。

Web開発の面白さは、こうした「ブラウザの性格」を理解して、彼らが気持ちよく動けるように手助けしてあげることにあります。

もしコードを書いていて「ちょっと動きがカクつくかな？」と思ったら、今日学んだ「レイヤー」のことを思い出してみてください。「あ、この要素は特別扱いしてあげたほうがいいかな？」と、ブラウザの気持ちになって調整してあげるだけで、あなたの作るWebサイトは驚くほど滑らかで心地よいものに変わるはずです。

さあ、今日も素敵なコードを書いていきましょう！何かあれば、いつでも聞きに来てくださいね。