Paint Flashing Tool はアクティブ時に、何らかの入力 (例えばユーザがマウスを動かしたりスクロールしたりするなど) への応答としてブラウザが再描画を行わなければならない部分をハイライトします。このツールにより、Web サイトがブラウザに過剰な再描画を行わせていないかを明らかにできます。再描画はパフォーマンスへの影響が大きい処理になりえるため、不必要な再描画をなくすことで Web サイトの応答性を改善できます。
再描画と応答性
ブラウザは Web ページをレンダリングするときに、HTML や CSS の解析、どのようにレイアウトするかの決定、そして実際に画面へコンテンツを表示するために描画を行います。Web ページで見えている部分が変更するイベントが発生するたびに、ブラウザはページの一部分を再描画しなければなりません。例えばユーザがページをスクロールしたり、要素のスタイルを変更する :hover 疑似クラスを持つ要素にマウスポインタを載せたりすると、再描画が必要です。
再描画は高コストな処理であるため、ブラウザは必要な再描画量の最小化を図ります。ブラウザは画面上のどの部分が "損傷" しているかを解析して、そこだけを再描画しようとします。また、互いに独立して更新されると考えられるレイヤーに、ページのモデルを分割します。レイヤーは独立して描画された後に合成されますので、ひとつのレイヤーで外観が変更しても他のレイヤーでの再描画を引き起こしません。また 2 つのレイヤーの関係が変化するだけ (例えばアニメーションで) では、再描画はまったく必要ありません。
Web 開発者によってなされた選択がブラウザの上記動作を妨げる場合があり、必要以上の画面領域に対してより多くの再描画を引き起こします。これにより、ユーザの入力に対するサイトの応答が遅くなるかもしれません ("janky" とも言われます)。Paint Flashing Tool はここで役立ちます: イベントへの応答としてブラウザが再描画した領域を示すことで、過剰な再描画ではないかを確認できます。
Paint Flashing Tool の使用
Paint Flashing を有効にする方法は 2 つあります:
- ツールボックスを開いて、"描画された領域をハイライトします" というラベルのアイコンをクリックします:
- 開発ツールバーを起動して、"paintflashing on" と入力して Enter キーを押下します:
ページを使用してみましょう。マウスを動かしたり少しスクロールしたりすると、上図のページが下図のようになります:
この例では、再描画の主な原因が 2 つあります:
- リンクに
:hover疑似クラスが適用されたスタイルがあるため、リンク上でマウスを動かすと、ブラウザが再描画を行います。 - スクロールを行うと、画面の下部に現れるページの新たな一部分をブラウザが再描画します。また、右上でスクロールバーも再描画します。
Paint Flashing を無効にするには、ツールバーで "描画された領域をハイライトします" のアイコンを再度クリックするか、開発ツールバーに "paintflashing off" と入力して Enter キーを押下します。
例: CSS トランジション
実装の選択が再描画の効率に影響を与える可能性がある分野のひとつが、CSS トランジションにあります。以下の例は、CSS トランジションを使用して要素を動かすための、2 つの異なる方法を示しています。第一の方法は要素の margin-left に対してトランジションを適用する、第二の方法は transform プロパティを使用して要素を動かします。
<body>
<div id="container">
<div class="moving-box" id="moving-box-left-margin">Transition using margin-left</div>
<div class="moving-box" id="moving-box-transform">Transition using transform</div>
</div>
</body>
#container {
border: 1px solid;
}
.moving-box {
height: 20%;
width:20%;
margin: 2%;
padding: 2%;
background-color: blue;
color: white;
font-size: 24px;
}
#moving-box-left-margin {
transition: margin-left 4s;
}
#moving-box-transform {
transition: transform 4s;
}
body:hover #moving-box-left-margin{
margin-left: 74%;
}
body:hover #moving-box-transform {
transform: translate(300%);
}
以下の領域にマウスポインタを動かすと、トランジションをご覧いただけます:
ここで Paint Flashing を有効にして、もう一度試してみましょう。margin-left 版では要素が動くにつれて一連の再描画が発生するのに対して、transform 版では始点と終点だけで再描画が発生します。
なぜでしょう? transform を使用するとき、ブラウザは要素のために別のレイヤーを生成します。よって要素が移動するときは、すべての変更点が 2 つのレイヤー相互の関係であり、合成処理によって対処されます: どちらのレイヤーも再描画が不要です。
シンプルなスタイルである本ケースでは、追加の再描画は大きな違いにはなりません。しかしスタイルが描画処理的に高コストなものになると、大きな違いになるでしょう。ブラウザの再描画を最小化する最適化は何かを知るのは難しく、またバージョンが変わると最適化の方法が変わる可能性があります。よって Paint Flashing Tool で Web サイトのテストを行うと、最適な動作であることを確かめるのに役立ちます。