こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。
Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな…」「アニメーションがちょっと重い気がする」と感じたことはありませんか？ コードは綺麗に書いたはずなのに、なぜかブラウザが機嫌を損ねている。そんな時、私たちは「どこが重いのか」を突き止めるために、ブラウザの裏側の動きを覗き見する必要があります。
今回は、ブラウザが画面を塗り替えるときにこっそり起こしている「ペイントフラッシング（再描画）」と、そのボトルネックを見つけ出すためのレンダリングデバッグの世界へご案内します。
難しい専門用語はできるだけ噛み砕いて、身近な例えを交えてお話ししますので、どうぞ肩の力を抜いてリラックスして読んでくださいね。
—
1. ブラウザは「動くキャンバス」：再描画の裏側を覗いてみよう
まずは、Webブラウザが画面を表示する仕組みを、身近なもので例えてみましょう。
想像してみてください。あなたは今、巨大なキャンバスに向かって絵の具で絵を描いています。
最初の一筆を置くときは、全体をキャンバスに描き上げますよね。これがブラウザの世界でいう「最初の読み込み（初期レンダリング）」です。
では、その絵の一部（例えば、マウスを乗せたら色が変わるボタンなど）を書き換えるときはどうでしょう？
絵の具が乾いたキャンバス全体をわざわざ捨てて、最初から描き直したりはしませんよね。「あ、このボタンの部分だけ色が変わったな」と気づいて、その部分だけ上から新しく塗り直すはずです。
ブラウザもこれと全く同じことをやっています。
画面の一部が変化したときに、ブラウザが「どこを新しく塗り直す必要があるか」をペタペタとフリック（フラッシュ）しながら再描画する現象を、私たちは「ペイントフラッシング」と呼んでいます。
「無駄な塗り直し」がパフォーマンス泥棒になる
ここで問題になるのが、「本当は変えなくていい場所まで、勘違いして大きく塗り直してしまう」という現象です。
例えば、Webページの一番端っこで、小さなアイコンがパタパタとアニメーションしているとします。
理想なのは「そのアイコンのまわりだけ」を塗り直すことですが、CSSの書き方やレイアウトの構造（もっと言うと、ブラウザの機嫌や限界）によっては、「ページ全体をもう一度キレイに塗り直そう！」とブラウザが頑張ってしまうことがあります。
これが、スクロールがカクついたり、スマホのバッテリーがガリガリ削られたりする最大の原因です。「小さな変更なのに、部屋の壁紙を全部貼り替えるような大工事」をブラウザにさせてしまっている状態なんですね。
—
2. デベロッパーツールで「ブラウザの汗」を見える化する
「じゃあ、うちのサイトのどこがそんな大工事をしているの？」という疑問が湧きますよね。それを暴くために、みんな大好き（だけど少し取っ付きにくい）Chromeの「デベロッパーツール」を使ってみましょう！
大丈夫です、難しい設定はいりません。魔法のスイッチをポチッと入れるだけで、ブラウザがどこを塗り直しているのかが丸見えになります。
ペイントフラッシングを可視化する手順
1. Chromeでデベロッパーツールを開きます（右クリック ＞「検証」、または `F12` キー）。
2. キーボードの `Esc` キーを押して、下部に出てくるコンソールパネルの端っこにある「3つの点（その他のツール）」から 「Rendering（レンダリング）」 を選んで開きます（※「Command Menu」から `Show Rendering` と打ち込んでも一発で開けます）。
3. その中に「Paint flashing（ペイントの点滅）」というチェックボックスがあるので、ここにチェックを入れます。
さあ、その状態でマウスを動かしたり、ページをスクロールしたりしてみてください。
画面のあちこちに、緑色や赤色のフワッとした光（フラッシュ）が点滅しませんか？
- 緑色の光： 「あ、ここを新しく塗り直したよ！」というブラウザの足あとです。
- 激しく光り狂っている場所： 「うわっ、ここ、毎回ぜんぶ塗り直しててめちゃくちゃ重いぞ！」というパフォーマンスのボトルネック（弱点）です。
この「緑色の点滅が、必要最小限の場所だけで起きていれば合格」ですが、「関係ないはずのヘッダーやフッターまでビカビカ光っている場合」は、改善の余地ありです。
—
3. つまずきがちなポイントと、優しく解決するアプローチ
「よし、デベロッパーツールでビカビカ光る場所を見つけたぞ！ でも、どう直せばいいの？」
ここが一番悩ましいところですよね。初心者がよくつまずく代表的なポイントと、そのやさしい処方箋をいくつかご紹介します。
つまずき①：小さな変更なのに画面全体が再描画される
【原因】
「レイアウトの変更（幅や高さ、位置など）」を引き起こすプロパティ（`width`, `height`, `top`, `left` など）をアニメーションさせていませんか？ これらはブラウザに「まわりの要素のサイズや位置も計算し直さなきゃ！」と思わせてしまうため、広範囲の再描画（リフロー・ペイント）を誘発します。
【やさしい解決策】
位置や大きさを変えるのではなく、「変形（Transform）」や「透明度（Opacity）」を使いましょう。
`transform: translateX()`, `transform: scale()`, `opacity` といったプロパティは、ブラウザの「GPU（グラフィック専用のエンジン）」にお仕事をお任せできるため、他の要素に迷惑をかけず、単独のレイヤーでスルスルと滑らかに動いてくれます。
ここで、実際に手を動かして試せる簡単なサンプルを見てみましょう。
マウスを乗せて、デベロッパーツールの「Paint flashing」で光り方を比べてみよう！
このコードをコピーしてブラウザで開き、先ほどの「Paint flashing」をONにした状態で2つのボックスにマウスを乗せてみてください。
`.bad-animation` の方は広範囲が緑色に光りやすいのに対し、`.good-animation` の方は動いている要素のまわりだけ、あるいはスマートに処理される違いが体感できるはずです。
—
4. チーフアーキテクトからのエール
Webブラウザは、私たちが書いたHTML、CSS、JavaScriptという「ただのテキスト」を読み解き、一瞬にして目の前にリッチな絵を描き出してくれる、ものすごく優秀で健気な相棒です。
でも、たまに無理難題を押し付けられて、裏で冷や汗をかきながら必死に画面を塗り替えています。
今回ご紹介した「Paint flashing」のようなデバッグツールを使うことは、「相棒がどこで疲れているのか、体調を気遣ってあげること」に他なりません。
「なんだか動きがカクカクするな」と感じたら、ぜひ怖がらずにデベロッパーツールの扉を開いてみてください。「あ、ここで無駄に頑張っちゃってたんだね、優しく書き直してあげるからね」と気づくことができれば、あなたの書くコードはぐっと洗練され、ユーザーにとっても最高に心地よいWebサイトに生まれ変わります。
最初は難しく感じるかもしれませんが、一歩ずつ、ブラウザとの対話を楽しんでいきましょう！ あなたのWeb制作ライフを、これからも応援しています。
コメント