ブラウザの描画関連プロファイリングツールと利用方法

Chrome

Rendering

利用方法

Developer Toolsの下部、ハンバーガーボタンから"Rendering"を選択すると表示される。

項目

• Paint Flashing
  • 表示中のDOM要素内でリペイントを行う必要がある要素を緑色のボックスのオーバーレイで示す
• Layer Borders
  • Compositing Layerとtileを表示する
    • Compositing Layer: オレンジ/オリーブ色
    • tile: シアン
• FPS Meter
  • 現在のFrame RateとGPUラスタライズの有効状況、GPUメモリの状況を表示する
• Scrolling Performance Issues
  • スクロールのレスポンスを阻害するようなEvent Listenerやスクロールの度に再描画される要素があれば画面内に表示する
• Emulate CSS Media
  • CSSのMediaタイプをprint/screenと切り替える

Layer

利用方法

• chrome://flags にアクセス
• "デベロッパーツールの試験運用版機能"(enable-devtools-experiments) を有効にして再起動
• Developer Toolsを開き、右上のメニューからSettingsへアクセス(F1)
• ExperimentsタブでLayers panelにチェックを入れる
• Developer Toolsを閉じ、再度開くとLayersタブが表示される

描画がすごく重くなるので注意。

項目

• Layer Tree(左ペイン)
  • ページ内のCompositing Layerの構造をツリーで表す
• Layer Preview(右ペイン上部)
  • Compositing Layerの構造を3Dで表す
    • マウス+Ctrl, Shift, Altとかでぐるぐる回したりできる
    • レイヤをダブルクリックすると、そのレイヤの内容を描画する
  • Slow scroll rects
    • スクロールのレスポンスを阻害するようなEvent Listenerやスクロールの旅に再描画される要素があればLayerを赤で着色して表示
  • Paints
    • レイヤをダブルクリックした際に、そのレイヤの内容を表示するかどうかのフラグ
• Layer Details(右ペイン下部内タブ)
  • Size
    • そのレイヤのサイズ
  • Compositing Reasons
    • そのCompositing Layerが生成された理由を表示
    • 一覧: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/platform/graphics/CompositingReasons.cpp
  • Memory estimate
    • そのCompositing Layerが消費しうるメモリの大きさ
  • Slow scroll regions
    • スクロールのレスポンスを阻害する要因が影響する範囲
• Layer Profiler(右ペイン下部内タブ)
  • このプロファイラは、レイヤをダブルクリックして一度描画すると内容が表示される
  • drawRectなどの図形描画はオレンジ色、text, imageの描画やclipping, translateなどの処理は紫色で、その処理時間をグラフに表す
  • 右ペインの棒グラフ内では範囲指定ができる

ほか

• 画面内で右クリックすると"Show internal layers"というオプションが選択できるが、internal layersの対象が不明。Compositing Layerではないけど、最適化とかのために内部的にlayerを作って保持している？ Stacking Context辺りとも関わりがありそうだけど、どなたか知ってたら教えて欲しい。

Safari(Webkit)

普通のSafariであれば、

defaults write com.apple.Safari IncludeInternalDebugMenu -boolean true

をTerminal.appかなにかで実行して、デバッグメニューを表示させる。
Webkit Nightlyであれば最初から表示されている(はず)。

Debug > Drawing/Compositing Flags

• Show Compositing Borders
  • Compositing Layerとtileを表示
    • Compositing Layer: 緑
    • tile: 青
      • tileの左上の数字は、そのタイルが再描画されるごとにincrementされる(Suppress Incremental Renderingのオプションでincrementされなくなる)
• Show Tiled Scroll Indicator
  • 画面内で使用されているタイルを並べて表示

Debug > Debug Overlays

• Non-fast-scrollable Region
  • スクロールのレスポンスを阻害するような要素があれば画面内にオレンジ色のオーバーレイで表示する
    • ただ、必ずしも再描画されるわけではないような要素もオーバーレイで表示されているので条件がよく分かっていない
• Wheel Event Handlers Region
  • Scroll Event Listenerがあれば画面内に赤色のオーバーレイで表示する

###　ほか

• Xcodeの開発ツールにある、Instrumentsではプロセスとハードウェア間のプロファイリングも取れるので、必要に応じて使うこともできる
  • 自分でビルドしたものではないので、一部のプロファイラは使用できない(逆に言えば自分でWebkitをビルドしたら見れるかも？)

Firefox

開発ツール

• 描画領域の表示
  • 右上、ギアボタンから 利用可能なツールボックスのボタン > 描画された領域を強調表示します にチェックを入れる
  • 描画された範囲が、描画されるたびにランダムな色で表示

about:config

• layers.acceleration.draw-fps
  • 現在のfpsをブラウザ左上に表示
• layers.draw-borders
  • Compositing Layerを緑色で表示
• layers.draw-tile-borders
  • tileを緑色で表示

Gecko Profiler

Geckoエンジンのクラスプラットフォームなプロファイリングツール。GeckoProfilerはバックエンドで、cleopatraというフロントエンドでデータを閲覧できる。イメージ的にはchrome://tracingに近い。

https://github.com/bgirard/GeckoProfiler
https://github.com/bgirard/Gecko-Profiler-Addon
https://github.com/bgirard/cleopatra

導入記事: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler

基本的な使い方は

• Ctrl+Shift+1で測定開始, 再度押下で停止
• 測定中にCtrl+Shift+2で結果を閲覧できる

かなりクセのあるツールだが、Call Graph, Layer TreeなどGeckoのレンダリング層を見れる貴重な存在。

Layer Tree

• about:configで以下を設定
  • layers.offmainthreadcomposition.enabled: true
  • layers.dump: true
• Gecko ProfilerのAddonで、Multi-Threadにチェック
• 計測するページでCtrl+Shift+1
• 計測する行動が終わったら、Ctrl+Shift+2
• cleopatraの画面が開くので、TimelineのFrames内から"Composite"のバルーンを選択する
• Layer Treeタブを開くと、各Compositing Layerを確認できる

Edge

他ブラウザのような、Compositing Layerを見るツールや描画状態を表示するようなものはなさそうだった。
Performanceタブ内で、Styling, Renderingの値を見ながら推測していくか、もしくはWindows Performance Analyzer, Xperfなんかを使用してもいいかもしれない。いずれも、存在しか知らないので情報求む。

---

上記は、以下のブラウザとバージョンでの確認です。

• Google Chrome 52.0.2743.82 (64-bit)
• Safari 9.1.2 (11601.7.7)
• Firefox 47.0.1
• Edge 25.10586.0.0(modern.ie)