こんにちは！フロントエンドの世界へようこそ。
Webブラウザというものは、実はとても「気が利くけれど、同時にものすごく神経質な職人」のような存在なんです。
今日は、そんなブラウザが現場で密かに悲鳴を上げている原因、「強制同期レイアウト（Layout Thrashing）」というちょっと怖い名前の現象について、一緒に紐解いていきましょう。大丈夫、仕組みさえ分かれば、驚くほど簡単に解決できる問題ですよ。
—
1. ブラウザは「お絵描き職人」
ブラウザが画面を表示するまでの流れを、「料理のフルコースを作る」ことに例えてみましょう。
1. HTMLパース: レシピ（HTML）を読んで、どんな料理が必要かリストアップする。
2. DOMツリー構築: 「サラダ、メイン、デザート…」と骨組みを作る。
3. CSSOMツリー構築: 「サラダは瑞々しく、メインは熱々に」といった装飾の指示を決める。
4. レンダリングツリー構築: 骨組みに装飾を乗せていく。
5. レイアウト（配置）: 「皿のどこに何を置くか」を厳密に計算する。
6. ペイント: 実際に料理を盛り付ける（画面に描画する）。
この「レイアウト」という作業、実はめちゃくちゃ重労働なんです。「右に10pxずらすと、隣の要素が押し出されて…」という計算を、ブラウザは画面全体を見渡して必死に行っています。
2. 「強制同期レイアウト」は、なぜ悪いのか？
さて、ここからが本題。「強制同期レイアウト（Layout Thrashing）」は、この職人の作業を「超・非効率なやり方で邪魔する」行為です。
想像してみてください。職人がようやく「よし、配置計算が終わったぞ！」と一息ついた瞬間に、あなたが横から「あ、やっぱりメインのお皿を1cm左に動かして！」と指示を出す。職人は「えっ、じゃあ全部計算し直しだ…」とやり直す。
それを繰り返すとどうなるでしょう？ 職人は計算ばかりさせられて、いつまで経っても料理をお客さん（画面）に出せません。これが、Webサイトが「カクカクして動かない」「重い」と感じる最大の原因の一つです。
悪夢のパターン（悪い例）
// ボタンをクリックした時の処理だと想像してください
const box = document.getElementById(‘box’);
// 悪い例：読み込みと書き込みを交互にやってしまう
box.style.width = ‘100px’; // 書き込み
console.log(box.offsetWidth); // 読み込み（強制的にレイアウト計算が発生！）
box.style.width = ‘200px’; // 書き込み（またレイアウトやり直し！）
console.log(box.offsetWidth); // 読み込み（また強制計算！）
`offsetWidth` のような「今、幅は何ピクセルある？」という質問をすると、ブラウザは「正確な値を教えるために、今すぐレイアウトを計算しなきゃ！」と、作業を強制中断させられてしまいます。これが何度も続くと、ブラウザはパンクしてしまうのです。
3. どうすれば解決できるのか？
解決策はシンプルです。「読み込み（取得）」と「書き込み（変更）」を分けてグループ化すること。
要は、「先に必要な情報を全部集めてから、一気にまとめて変更する」という、仕事の段取りと同じです。
良い例：段取り上手なコード
// 1. まず、必要な情報だけを先に集める（読み込みフェーズ）
const currentWidth = box.offsetWidth;
// 2. その後、一気に変更を加える（書き込みフェーズ）
// ブラウザは1回の計算で済むので、とっても快適！
box.style.width = ‘100px’;
box.style.height = ‘100px’;
もし操作が複雑で、どこで読み込みが発生しているか分からない時は、「RequestAnimationFrame」という魔法の言葉を思い出してください。
// ブラウザが「今なら作業してもいいよ！」というタイミングを待ってから実行する
requestAnimationFrame(() => {
box.style.width = ‘100px’;
console.log(box.offsetWidth);
});
これを使うと、ブラウザの描画タイミングに合わせて処理を行ってくれるので、無駄な計算が極端に減ります。
—
最後に：完璧を目指さなくて大丈夫
「強制同期レイアウト」という言葉を聞くと難しく感じますが、要は「ブラウザ職人に何度も同じ計算をやり直させない」という、ちょっとした思いやりの話なんです。
最初は意識しなくても大丈夫。もしサイトが少し重いなと感じたら、コードの中に「読み込みと書き込みが交互に並んでいないかな？」と探してみてください。それだけで、あなたの書くコードはぐっとプロフェッショナルなものに進化しますよ。
Webブラウザの仕組みを知ることは、ブラウザという「相棒」と仲良くなること。ぜひ楽しみながら、快適なWeb体験を追求していきましょう！応援しています。
コメント