【入門編】コンポジットレイヤーの生成条件と昇格 – Webブラウザの仕組み実践ガイド

ブラウザの裏側、覗いてみませんか？「レイヤー昇格」でWebサイトをサクサク動かす魔法のコツ

こんにちは！Web開発の深淵へようこそ。
Webサイトを作っていると、最初は楽しいけれど、だんだん「あれ？なんかスクロールがカクつくぞ…？」なんて悩みにぶつかること、ありますよね。

大丈夫、それはあなたが悪いわけじゃありません。実は、ブラウザが裏側でどれだけ必死に汗をかいて描画しているかを知るだけで、その悩みは魔法のように消えていくんです。

今日は、ブラウザの「レイヤー（層）」という仕組みについて、少しだけ内側の世界をお話ししますね。

—

まず、ブラウザが画面を表示する時のことを想像してみてください。
ブラウザは、HTMLやCSSを読み込んで、最終的に「一枚の絵」として画面に貼り付けます。

もし、画面の中で動くものがひとつでもあるたびに、この巨大な絵をゼロから描き直していたらどうなるでしょう？
想像するだけで疲れますよね。PCやスマホも同じで、これだとすぐに悲鳴を上げて動作が重くなってしまいます。

そこでブラウザは、ある知恵を使います。それが「レイヤー（層）に分ける」という技です。

透明なフィルムを何枚も重ねて、ひとつの絵を作るイメージです。
例えば、背景の空は「1枚目のフィルム」、動くキャラクターは「2枚目のフィルム」という風に分けておけば、キャラクターが動くときに「空」をわざわざ描き直す必要はありませんよね。キャラクターのフィルムだけをスッと横にずらせばいいんです。

—

通常、ブラウザは「なるべく一枚の絵で済ませたい」と思っています。レイヤーを作りすぎると、今度はそのフィルムを重ね合わせるための「メモリ」をたくさん消費してしまうからです。

でも、「こいつは激しく動くぞ！」とブラウザが判断した要素については、特別に「レイヤー」として昇格させてあげます。これを「コンポジットレイヤーへの昇格」と呼びます。

ブラウザが「よし、お前は独立したフィルムになれ！」と判断する主なきっかけはこれらです。

—

「動きがカクつくな」と思ったとき、特定の要素に以下のCSSをあててみてください。

.box {
/ 魔法の呪文：GPUを使ってレイヤーを別枠にしてね、と伝えます /
transform: translateZ(0);

/ 最近の推奨：ブラウザに「将来的にここが変わるよ」と優しく教えてあげる /
will-change: transform;
}

※注意点：
この魔法は強力ですが、使いすぎには気をつけてください。すべての要素をレイヤーに昇格させると、ブラウザのメモリがパンクして、逆に「スマホが熱い！」「ブラウザが落ちた！」なんてことになりかねません。「本当に動きが激しい場所」にだけ使うのが、プロのたしなみです。

—

レイヤーを増やすことは、お財布の中身を分けるようなものです。
ポケットに小銭を全部入れる（1枚のレイヤー）と探すのが大変ですが、小銭入れをたくさん持ち歩きすぎると、今度は重くて持ち運べなくなりますよね。

ブラウザも同じで、「必要最小限のレイヤー数で、最大のパフォーマンスを出す」のが、私たちエンジニアの腕の見せ所です。

最初は難しく感じるかもしれませんが、まずは「Chromeの開発者ツール」を開いて、`Rendering`タブから「Layer borders」にチェックを入れてみてください。ブラウザが今、どんな風にレイヤーを切り分けているのか、視覚的に見ることができてワクワクしますよ！

Web制作は、まさにブラウザという「相棒」との共同作業です。
少しずつその仕組みを理解して、あなたの作るサイトを、世界一軽快で心地よい場所に育てていきましょう。

大丈夫、一歩ずつ進めば必ず分かります。またいつでも聞きに来てくださいね！