Chrome Canary で、ペイント プロファイリングの連続ペイント モードが利用可能になりました。この記事では、ページ ペイント時間の問題を特定する方法と、この新しいツールを使用してペイント パフォーマンスのボトルネックを検出する方法について説明します。
ページのペイント時間を調査する
ページがスムーズにスクロールできないことに気づきました。このようにして問題に取り組みますこの例では、Dan Cederholm による Things We Left On The Moon のデモページを例として使用します。
ウェブ インスペクタを開いて、タイムラインの記録を開始し、ページを上下にスクロールします。次に、縦方向のタイムラインを表示して、各フレームで何が起こったかを示します。
ほとんどの時間が描画に費やされていることが（60 fps を超える大きな緑色のバー）場合は、その理由を詳しく調べる必要があります。ペイントを調査するには、ウェブ インスペクタ（Web Inspector の右下にある歯車アイコン）の [ペイント 長方形を表示] 設定を使用します。Chrome がペイントする 領域が表示されます
Chrome では、次のような理由からページ領域を再描画します。
- JavaScript で DOM ノードが変更されると、Chrome でページのレイアウトが再計算されます。
- フレームベースのサイクルで更新されるアニメーションを再生しています。
- ホバーなどのユーザー操作により、特定の要素でスタイルが変更されます。
- ページ レイアウトを変更するその他の操作。
デベロッパーは、ページ上で再ペイントが行われることに注意する必要があります。ペイントする長方形を見れば、それがわかります。上のスクリーンショットの例では、大きな長方形のペイントで画面全体が覆われていることがわかります。つまり、スクロールすると画面全体が再ペイントされるため、これは望ましいことではありません。このケースでは、CSS スタイル background-attachment:fixed が原因で、スクロールするとページのコンテンツがその上に移動しますが、ページの背景画像は同じ位置に留まります。
再塗装が広い範囲をカバーしている場合や、再塗装に時間がかかることが判明した場合は、次の 2 つの選択肢があります。
- ページ レイアウトを変更して、描画処理の量を減らすこともできます。表示されるページは 1 回だけペイントされ、表示されていない部分は下にスクロールしても追加されます。ただし、Chrome で特定の領域を再描画しなければならない場合もあります。たとえば、同じ位置に留まるナビゲーション要素によく使用される CSS ルール
position:fixedが原因で、このような再描画が発生する可能性があります。 - ページ レイアウトを維持したい場合は、再ペイントされる領域のペイント コストを削減できます。すべての CSS スタイルで描画コストが同じというわけではなく、ほとんど影響しないスタイルもあれば、大きな効果もあるスタイルもあります。さまざまなスタイルの塗装のコストを把握するのは大変な作業です。そのためには、[要素] パネルでスタイルを切り替えてタイムライン記録の違いを確認します。つまり、パネルを切り替えて多くの記録を行います。そこで役に立つのが連続ペイント モードです。
連続ペイント モード
連続ペイント モードは、ページ上の費用が高い要素を特定するためのツールです。ページを常に再ペイント状態にし、ペイントの処理量を示すカウンタを表示します。その後、カウンタを確認しながら要素を非表示にしたり、スタイルを変更したりして、どの部分が遅いかを判断できます。
設定
連続ペイント モードを使用するには、Chrome Canary を使用する必要があります。
Linux システム（および一部の Mac）では、Chrome が合成モードで実行されるようにする必要があります。これは、about:flags の [すべてのページの GPU 合成] 設定を使用して有効にできます。
開始方法
連続ペイント モードは、Web Inspector の [Settings] にある [Enable Continuous page repainting] チェックボックス（Web Inspector の右下隅にある歯車アイコン）で有効にできます。
右上の小さなディスプレイに、測定されたペイント時間がミリ秒単位で表示されます。具体的には、以下の項目が表示されます。
- 左側で最後に測定されたペイント時間。
- 右側の現在のグラフの最小値と最大値。
- 下には、過去 80 フレームの履歴を表示する棒グラフ（グラフの線は基準点として 16 ms を示しています）。
ペイント時間の測定値は、画面の解像度、ウィンドウ サイズ、Chrome が実行されているハードウェアによって異なります。これらは、ユーザーにとっては異なる場合が多いことにご注意ください。
ワークフロー
このようにして、連続ペイント モードを使用して、ペイントのコストを増大させる要素とスタイルを見つけることができます。
- ウェブ インスペクタの設定を開き、[ページの継続的な再ペイントを有効にする] をオンにします。
- [要素] パネルに移動し、矢印キーを使用するか、ページ上の要素を選択して、DOM ツリーをトラバースします。
- 要素の表示 / 非表示を切り替えるには、新たに導入されたヘルパーである H キーボード ショートカットを使用します。
- ペイント時間のグラフを見て、ペイント時間を長くしている要素を見つけてみましょう。
- その要素の CSS スタイルを確認し、グラフを見ながらオンとオフを切り替えて、速度低下の原因となっているスタイルを見つけます。
- このスタイルを変更し、タイムライン記録をもう一度行って、ページのパフォーマンスが改善したかどうかを確認します。
次のアニメーションは、スタイルの切り替えとペイント時間への影響を示しています。
この例では、CSS スタイルの box-shadow または border-radius のいずれかをオフにすると、描画時間が大幅に短縮されることを示しています。要素に対して box-shadow と border-radius の両方を使用すると、Chrome ではこの最適化ができないため、ペイント処理が非常に高コストになります。したがって、この例のように再ペイントが頻繁に行われる要素の場合は、この組み合わせを避ける必要があります。
メモ
連続ペイント モード: 表示されているページ全体が再ペイントされます。ウェブページを閲覧しているときは、通常こうした処理は起こりません。スクロールでは通常、これまでに表示されていない部分のみが描画されます。ページのその他の変更では、可能な限り小さな領域のみが再ペイントされます。したがって、別のタイムライン記録を使用して、スタイルの改善がページのペイント時間に実際に影響を与えたかどうかを確認してください。
continuous painting mode を使用すると、たとえば CSS スタイル border-radius と box-shadow では描画に多くの時間を要する場合があります。これらの機能の一般的な使用はおすすめできません。これらの機能がついに登場したことを嬉しく思います。ただし、タイミングと場所を把握しておくことは重要です。再ペイントが頻繁に行われるエリアでの使用は避けてください。また、通常、過剰に使用しないでください。
ライブデモ
次のデモでは、Paul Irish 氏が連続塗装作業によって費用のかかる塗装作業を特定する様子を紹介しています。