こんにちは。Webの世界へようこそ。
ブラウザという「魔法の箱」が、どうやって私たちが書いたコードを画面に映し出しているのか。その裏側を少しだけ覗いてみましょう。
今日は、Web開発者が避けては通れない、でも名前を聞くとちょっと身構えてしまう「Layout Thrashing（レイアウト・スラッシング）」という現象についてお話しします。
難しそうな名前ですが、大丈夫。実はこれ、私たちの日常生活でもよくある「段取りの悪さ」と同じことなんです。
—
1. そもそも「ブラウザの仕事」って何？
ブラウザは、HTMLやCSSを受け取ると、大忙しで「絵描きさん」に変身します。このプロセスを大きく分けると、3つのステップになります。
1. リフロー（計算）: 「この要素はどこに置く？」「大きさはどれくらい？」と配置を計算する時間。
2. リペイント（塗り絵）: 計算が終わったら、色を塗ったり影を落としたりする時間。
3. コンポジット（合成）: 最後に、層になった絵を重ね合わせて画面に出す時間。
このうち、一番の曲者なのが「リフロー」です。これ、ものすごく脳みそを使う重労働なんですよ。
2. なぜ「Layout Thrashing（強制同期レイアウト）」は起きるのか？
さて、ここからが本題です。
「Layout Thrashing」というのは、「計算（リフロー）中に何度も割り込みが入って、計算を何度もやり直させられる状態」のことです。
たとえ話をしましょう。
あなたは、友人のために「手書きの地図」を描いています。
- あなた: 「よし、まずは右側の角にコンビニを描こう（DOMの書き込み）」
- 友人: 「ねえ、今の地図でコンビニの横幅は何センチある？（DOMの読み取り）」
- あなた: 「えっと…（一旦定規で測る…あ、測るためには地図を完成させないと！）」
この「測るためだけに一度地図を完成させ、また描き直す」という作業を繰り返すと、地図はいつまで経っても完成しませんよね。これがLayout Thrashingです。
JavaScriptで「書き込み→読み取り→書き込み→読み取り」と交互に書くと、ブラウザは「ああ！また配置を計算し直さなきゃ！」とパニックになり、何度も何度も計算を強制されることになります。これがWebサイトをカクつかせる最大の原因です。
—
3. 回避策：お買い物リストのように「まとめてやる」
この問題を解決するのは簡単です。「読み取り」と「書き込み」を分ければいいだけです。
お買い物に行くとき、あちこちの店を行ったり来たりするのではなく、「まず何を買うかチェック（読み取り）」してから「一気にまとめて買う（書き込み）」方が効率的ですよね。
悪い例（これだとブラウザがパンクします）
// 「書き込み→読み取り」を繰り返すと、その都度リフローが発生する
const box = document.getElementById(‘box’);
// 1. 書き込み
box.style.width = ‘200px’;
// 2. 読み取り（強制的にリフローが走る！）
console.log(box.offsetWidth);
// 3. 書き込み（またリフロー！）
box.style.height = ‘300px’;
// 4. 読み取り（またまたリフロー！）
console.log(box.offsetHeight);
良い例（こうすればスッキリ！）
const box = document.getElementById(‘box’);
// 1. まずは「読み取り」だけを先に済ませる
const width = box.offsetWidth;
const height = box.offsetHeight;
// 2. その後で「書き込み」をまとめて行う
// こうすれば、リフローは最小限で済みます！
box.style.width = (width + 10) + ‘px’;
box.style.height = (height + 10) + ‘px’;
—
4. 最後に：完璧じゃなくても大丈夫
「よし、今日から全部のコードを完璧に整理するぞ！」と気負いすぎないでくださいね。
この「Layout Thrashing」を意識し始めたというだけで、あなたはもう他のエンジニアより一歩リードしています。まずは、「DOMの読み取りと書き込みが混ざっていないかな？」と、たまにコードを見直す癖をつけるだけで十分です。
ブラウザという相棒と仲良くするために、少しずつ「効率的な段取り」を身につけていきましょう。
あなたの書くコードで、世界中の誰かのブラウザが今日も軽やかに動くことを応援しています！
コメント