こんにちは。Webブラウザという「巨大な迷宮」へようこそ。
普段、私たちが何気なくスクロールしたり、ボタンをクリックしたりしているWebサイト。実はその裏側では、ブラウザがものすごい速度で「絵画」を描き続けていることをご存知でしょうか？
今日は、そんなブラウザの裏側で、「いかにしてWebサイトの動きをカクつかせないか」という職人芸の極致、コンポジター・スレッドの秘密についてお話しします。「難しそう…」と思う必要はありません。お買い物の流れに例えて、優しく紐解いていきましょう。
—
メインスレッドは「万能な店長」
まず、ブラウザの中には「メインスレッド」という、非常に忙しい店長がいます。この店長は、JavaScriptを実行し、HTMLを解釈し、CSSを当てて…と、お店（Webページ）のあらゆる作業を一人でこなしています。
しかし、もし店長が「JavaScriptで複雑な計算」をしている最中に、お客さん（ユーザー）が「スクロール」を要求したらどうなるでしょう？ 店長は「ちょっと待って！今計算中だから！」と作業を止めざるを得ません。これが、画面がカクつく原因です。
コンポジター・スレッドという「専属の配送スタッフ」
ここで登場するのが、コンポジター・スレッドです。彼は「表示担当のプロ」です。
メインスレッド店長が頭を抱えている間も、コンポジター・スレッドは「ページ全体の絵」をあらかじめ「レイヤー（層）」という断片に切り分けて保管しています。
- メインスレッド店長： 「商品の仕入れ（JS）や陳列（CSS）の計画を立てる」
- コンポジター・スレッド： 「陳列棚をすばやく移動させる（スクロール・アニメーション）」
店長が忙しくても、コンポジター・スレッドが「今ある絵をサッとずらす」だけであれば、店長の許可（メインスレッドでの計算）を待たずに即座に反応できるのです。これが、今のブラウザがヌルヌル動く魔法の正体です。
—
実践：コンポジターに「お任せ」してヌルヌル動かす
では、どうすればブラウザは「これはコンポジター・スレッドに任せよう！」と判断してくれるのでしょうか？
実は、ブラウザは「GPU（画像処理装置）に優しいプロパティ」を監視しています。特に `transform` や `opacity` は、コンポジター・スレッドが大好物なプロパティなんです。
逆に、`top` や `left` を使って位置を動かそうとすると、ブラウザは「メインスレッド店長、位置計算をやり直してください！」と毎回呼び戻してしまいます。これがリフロー（レイアウトの再計算）の正体です。
良い例：コンポジターに任せる書き方
`transform` を使うことで、メインスレッドを介さず、コンポジターだけで完結させます。
/ コンポジター・スレッドが大喜びする書き方 /
.box {
transition: transform 0.3s ease;
will-change: transform; / ブラウザに「ここは動くから準備しておいてね」と伝える魔法の呪文 /
}
.box:hover {
/ topやleftを使わず、transformで動かすのが鉄則 /
transform: translateX(100px);
}
—
つまずきポイント：`will-change` は「切り札」
よく「全部に `will-change` を書けば速くなる！」と勘違いされる方がいますが、それは間違いです。
例えるなら、`will-change` は「特別な警備員を雇う」ようなもの。あまりに多くの警備員を雇いすぎると、逆に店（メモリ）がパンクしてしまいます。本当に「ここぞ！」というアニメーションの開始前にだけ、そっと添えてあげてください。
—
最後に：ブラウザへの「思いやり」
Web制作を始めたばかりの頃は、「なぜ自分のサイトは重いんだろう？」と悩むこともあるでしょう。でも大丈夫です。
ブラウザの仕組みを知ることは、ブラウザという「相棒」に対する思いやりを持つことです。メインスレッド店長を疲れさせないように、重い仕事はコンポジター・スレッドに任せる。この「役割分担」の意識を持つだけで、あなたの書くコードは驚くほど優しく、そして速くなります。
今日から、CSSを書くときに「これはコンポジターくんが楽に動かせるかな？」と、一度だけ立ち止まって考えてみてください。その小さな心遣いが、ユーザーにとって最高に心地よい体験を生み出すはずです。
また分からないことがあれば、いつでも聞きに来てくださいね。あなたのWeb開発ライフを、心から応援しています！
コメント