いやぁ、みんな、こんにちは！ Webサイトがサクサク動かないときって、ちょっとイラッとしませんか？ もしくは、頑張って作ったのに「あれ、なんか動きがカクカクするな…」って悩んだり。
ウェブの世界って、見た目は華やかだけど、その裏側ではブラウザという名の「職人さん」たちが、それはもう泥臭く、健気に働いてくれているんですよ。今日は、その職人さんたちの作業を、私たちがうっかり邪魔しちゃって、サイトの動きを遅くしてしまう「レイアウトスラッシング」という、ちょっと手強いけれど、知れば簡単に避けられる「落とし穴」について、膝を突き合わせてお話ししましょう。
大丈夫ですよ、難しい話は抜きにして、まるで隣でコーヒーを飲みながら話すように、一緒に紐解いていきましょうね。
—
サイトが画面に表示されるまでのお話（超ざっくり！）
まず、Webサイトが皆さんの画面に表示されるまでの、ごくごく基本的な流れを、ざっくりと押さえておきましょう。
ウェブブラウザは、私たちがインターネットから受け取ったHTML（サイトの骨組み）とCSS（見た目のデザイン）を元に、一生懸命「絵」を描いてくれます。この「絵を描く」作業には、大きく分けて3つのステップがあるんです。
1. リフロー (Reflow) – 「大工さん」のお仕事
これは、サイトの「間取り」や「家具の配置」を決めるような作業です。
「この要素は幅が何ピクセルで、高さが何ピクセル。あの要素はその右隣に置いて、マージンはこれくらい…」といった具合に、画面上のすべての要素がどこに、どれくらいの大きさで配置されるかを計算し直します。
例えるなら、「大工さん」 が家の設計図（HTML）と内装デザイン（CSS）を見て、「ここに壁を立てて、ここに窓を作って、このスペースにソファを置こう」と、すべての配置を決めるようなものです。この作業は、要素の一つでもサイズや位置が変わると、それに合わせて他の要素も影響を受けるため、結構大掛かりで時間もかかります。
2. リペイント (Repaint) – 「ペンキ屋さん」のお仕事
リフローで配置が決まったら、次は「色を塗る」作業です。
「このボタンは青色で、文字は白色、この背景にはグラデーションをつけよう」といったように、要素の見た目（色や影、背景画像など）を描画します。
これは、「ペンキ屋さん」 が大工さんの配置した壁や家具に、色を塗っていくようなイメージですね。リフローほどではないですが、これもそれなりに手間がかかる作業です。
3. コンポジット (Composite) – 「監督さん」のお仕事
最後に、リペイントで描かれたたくさんの「絵のパーツ」を、一枚の最終的な絵としてまとめて、皆さんの画面に表示します。
これは、「監督さん」 が、大工さんとペンキ屋さんが作ったパーツを全部受け取って、「はい、これで完成！」と一枚の美しい絵として仕上げるようなものです。この作業は、最近のブラウザはGPU（グラフィック処理に特化した部品）をうまく使って、サクサクとこなしてくれます。
—
さて、この「リフロー」や「リペイント」というのは、ブラウザにとって結構な「コスト」がかかる作業なんです。特にリフローは、一つ変更すると芋づる式に他の計算も発生するので、できるだけ回数を減らしたい。ブラウザの職人さんたちは、とっても賢いので、基本的には「あ、いくつか変更が来たな。じゃあ、まとめて一回で計算しちゃおう！」と、効率よく作業を進めてくれます。
でも、私たちがその賢い職人さんたちの邪魔をしてしまうことがあるんです。それが今日の主役、「レイアウトスラッシング」！
「レイアウトスラッシング」って、一体なにもの？
「スラッシング」って聞くと、なんかギターを掻き鳴らすような、激しいイメージがありますよね？ まさにその通り！ ブラウザの裏側で、ドタバタと、ガタガタと、無駄な作業が何度も繰り返されてしまう状況を指します。
これは、JavaScript（JS）が、HTMLの要素（DOMと呼びます）の「情報を読み取る」作業と、「変更する」作業を、交互に、しかも何度も繰り返してしまうことで発生します。
身近な例え話：お店での棚卸しとレイアウト変更
想像してみてください。あなたは、家具屋さんの店長さん（ブラウザ）です。店員さん（JavaScript）がいて、お店の棚（DOM要素）を管理しています。
1. 店員さん（JS）：「店長！この棚の高さ、今いくつですか？（`element.offsetHeight` や `element.getBoundingClientRect()` などで情報を読み取る）」
2. 店長さん（ブラウザ）：
「えーっと、ちょっと待ってね。この前、誰かがあっちの棚を動かしたから、全部計算し直さないと正確な高さは言えないな。よし、大工さん（リフロー）！頼む、棚の高さを全部正確に計算し直してくれ！」
（ここで強制的にリフローが発生）
「はい、今のこの棚の高さは120cmだよ。」
3. 店員さん（JS）：「なるほど！じゃあ、この棚の高さを150cmに変えてください！（`element.style.height = ‘150px’` などで情報を変更する）」
4. 店長さん（ブラウザ）：「OK。じゃあ、大工さん（リフロー）！この棚の高さが変わるから、また全部計算し直してくれ！」
（ここで再度、強制的にリフローが発生）
5. 店員さん（JS）：「あ、すみません。もう一度、隣の棚の高さ、今いくつですか？（また情報を読み取る）」
6. 店長さん（ブラウザ）：「ええっ！？またかよ！よし、大工さん（リフロー）！頼む、また全部計算し直してくれ！」
（ここで三度、強制的にリフローが発生）
…どうですか？ 店員さんが、「聞く → 変える → また聞く → また変える」を繰り返すたびに、店長さんがその都度、「大工さん（リフロー）！」と叫んで、棚の配置をやり直させている状態です。
これでは、大工さんは何度も呼ばれては仕事を中断し、またやり直し…と、全然効率が上がりませんよね？ 店長さんも疲れ果ててしまいます。これが、まさに「レイアウトスラッシング」がブラウザの裏側で引き起こしていることなんです。
なぜ、読み取りでリフローが強制されるの？
ブラウザの職人さんたちは、本来なら「よし、変更がいくつか来たな。じゃあ、全部まとめてから一回だけリフローしよう」と、賢く作業を遅延させてくれます。
でも、`element.offsetHeight` や `element.getBoundingClientRect()`、`getComputedStyle()` といったプロパティを使って要素のサイズや位置の情報を「読み取ろう」とすると、ブラウザはこう思うんです。
「おいおい、ちょっと待て。お前さん、今まさに正確な最新のサイズや位置が知りたいって言ってるんだろ？ なら、まだ確定してない変更があるかもしれないけど、とりあえず今の状態を全部計算し直して、正確な値を出してやるぜ！」
そう、ブラウザは私たちの要求に応えようとして、あえて未処理の変更をすべて適用し、強制的にリフローを実行してしまうんです。だから、読み取りと書き込みが交互に発生すると、そのたびにリフローが何度も何度も発生し、サイトの表示がカクカクしたり、動作が遅くなったりする原因になるんですね。
—
悪い例を見てみよう！
実際にコードで見てみましょう。こんな書き方をしていると、レイアウトスラッシングが起こりやすくなります。
// レイアウトスラッシングを引き起こす可能性のある悪い例
const items = document.querySelectorAll(‘.item’); // .itemクラスの要素を全て取得
items.forEach(item => {
// 1. 要素の幅を読み取る（ここでリフローが強制的に発生！）
// ブラウザは「現在の正確な幅を知りたいのか！じゃあ、一度全部計算し直すか！」となる
const currentWidth = item.offsetWidth;
// 2. 読み取った幅に基づいて、新しい幅を設定する（DOM書き込み）
// この変更は、通常ならブラウザがまとめて処理しようとする
item.style.width = (currentWidth + 10) + ‘px’; // 幅を10px増やす
// 1. (再度) 要素の高さを読み取る（ここでまたリフローが強制的に発生！）
// 先ほどの幅の変更も考慮して、再度計算し直される
const currentHeight = item.offsetHeight;
// 2. (再度) 読み取った高さに基づいて、新しい高さを設定する（DOM書き込み）
item.style.height = (currentHeight + 10) + ‘px’; // 高さを10px増やす
});
// このループが回るたびに、「読み取り」→「書き込み」→「読み取り」→「書き込み」が交互に発生し、
// そのたびにブラウザはリフローを何度も実行させられてしまいます。
// たとえ要素が少なくても、このパターンは避けるべきです。
このコードでは、`forEach`ループの中で、`item.offsetWidth` や `item.offsetHeight` で要素のサイズを「読み取り」、その直後に`item.style.width` や `item.style.height` で「書き込み」をしていますよね。
この「読み取り」と「書き込み」が交互に発生するたびに、ブラウザの「大工さん」が何度も呼ばれて、棚の配置を計算し直す羽目になるんです。これがパフォーマンス低下の大きな原因！
—
レイアウトスラッシングを回避する方法
じゃあ、どうすればこの「ドタバタ劇」を避けることができるのでしょうか？ とってもシンプルです。先ほどの例え話で言うなら、店員さんが賢く動けばいいんです。
「必要な情報を先に全部メモしてから、まとめて変更する！」
これが基本中の基本です。
対策の基本：読み取りと書き込みを完全に分離する
ブラウザの「大工さん」を何度も呼ばずに済むように、JavaScriptのコードを工夫しましょう。
1. すべての「読み取り」処理を、まず最初にまとめて行う。
- 必要なサイズや位置の情報を、先に全て変数などに保存しておきます。
2. すべての「書き込み」処理を、その後にまとめて行う。
- 読み取った情報を使って、まとめてDOM要素を変更します。
// レイアウトスラッシングを回避する良い例
const items = document.querySelectorAll(‘.item’); // .itemクラスの要素を全て取得
// 1. まず、必要な「読み取り」処理を全てまとめて行う
// （ここでは、各アイテムの現在の幅と高さを記憶する配列を用意）
const itemDimensions = [];
items.forEach(item => {
// ここでは読み取りだけを行うので、リフローはループが始まる前に一度、
// もしくはこのループ中に必要なだけ（ただし、後続の書き込みによる強制リフローはない）
// 発生する可能性がありますが、読み取りと書き込みの交互発生は避けます。
itemDimensions.push({
element: item,
width: item.offsetWidth, // 幅を読み取る
height: item.offsetHeight // 高さを読み取る
});
});
// 2. 次に、読み取った情報に基づいて、すべての「書き込み」処理をまとめて行う
// このループでは、DOMの書き込みだけが行われるため、
// ブラウザはまとめて効率的にリフローを処理することができます。
itemDimensions.forEach(data => {
// 読み取った幅と高さを利用して、新しいスタイルを設定する
data.element.style.width = (data.width + 10) + ‘px’;
data.element.style.height = (data.height + 10) + ‘px’;
});
// このようにすることで、「読み取り」フェーズと「書き込み」フェーズが明確に分離され、
// ブラウザはリフローの発生を最小限に抑えることができます。
// 結果として、サイトの動作がはるかにスムーズになります！
どうですか？ このコードでは、最初のループで必要なサイズ情報を全部集めておき、次のループでその情報を使ってまとめてスタイルを適用していますよね。
これで、ブラウザの「大工さん」は、最初の情報収集のときに一度だけ呼ばれるか、もしくは「変更」がまとめて来たときに一度呼ばれるだけで済みます。何度も中断させられることがなくなり、効率的に作業を進められるようになるんです！
その他のヒント：`requestAnimationFrame` を活用する（ちょっと上級者向け）
もしアニメーションなど、画面の描画と密接に関わる処理を行う場合は、`requestAnimationFrame` を使うとさらに効果的です。これは、「ブラウザが次の画面を描画するタイミングに合わせて、この処理を実行してね」とお願いする仕組みです。
これにより、ブラウザの描画サイクルとJavaScriptの処理を同期させることができ、よりスムーズなアニメーションやレイアウト変更が可能になります。読み取りと書き込みの分離と組み合わせると、最強のパフォーマンスを発揮できますよ。
// requestAnimationFrameを使った例（読み書き分離も併用）
const items = document.querySelectorAll(‘.item’);
const newDimensions = [];
// 1. まず読み取りフェーズ（これは requestAnimationFrame の外で行ってもOK）
items.forEach(item => {
newDimensions.push({
element: item,
currentWidth: item.offsetWidth,
currentHeight: item.offsetHeight
});
});
// 2. 次に書き込みフェーズを requestAnimationFrame のコールバック内で行う
// これにより、ブラウザが描画の準備ができた最適なタイミングでDOM変更が適用される
requestAnimationFrame(() => {
newDimensions.forEach(data => {
// 読み取った値を使って、スタイルを更新
data.element.style.width = (data.currentWidth + 10) + ‘px’;
data.element.style.height = (data.currentHeight + 10) + ‘px’;
});
console.log(“DOM更新完了！”);
});
// requestAnimationFrameは、ブラウザが次のフレームを描画する直前にコールバックを実行します。
// これにより、読み取りと書き込みを同じフレーム内で行うのではなく、
// 最適なタイミングで書き込み処理をまとめて実行させることができます。
// 特に、アニメーションや連続的なDOM操作で威力を発揮します。
—
まとめ：ちょっとした意識で、サイトはもっとサクサクに！
「レイアウトスラッシング」って聞くと難しそうに聞こえるかもしれませんが、結局のところ、「JavaScriptでDOMの情報を読み取るのと、変更するのを、なるべく分けてやろうね！」という、ちょっとした意識の問題なんです。
Webサイトのパフォーマンスって、ユーザー体験に直結します。「なんかこのサイト、重いな…」と思われちゃうと、せっかくの素晴らしいコンテンツも見てもらえなくなっちゃうかもしれません。
今日の話は、そんなブラウザの裏側の職人さんたちと、私たちがどうやって仲良く、効率よく作業を進めていくか、というお話でした。この知識があれば、皆さんの作るWebサイトは、きっと今よりもっとサクサクと、気持ちよく動くようになるはずです。
大丈夫、一歩ずつ進んでいけば、誰もがWebブラウザの仕組みを理解し、より良い体験を届けられるようになりますよ。応援しています！
コメント