Skia DebuggerによるCSSプロパティの重み測定 〜install編〜

Skia Debuggerを入れなくても、レンダリング時のペイントの重みは知る手段があります。

※ペイントってなんぞ！？って方はこちら↓
http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/reflow-and-repaint-in-browser/


1. Google ChromeのDeveloper Tools 「Timeline」
Google ChromeのDeveloper Toolsで「Timeline」のタブを選択し、
左上の「●」ボタンを押すことで現在のTimelineを測定することができます。

図 Deveroper Tools Timeline

Timelineで表示されている棒グラフの色で、このようなことが分かります。
（このページはjavascriptの実行割合が多い。

Loading(青)： 読み込みなど、ネットワークに関する処理
Scripting(黄)： javascriptの実行に関する処理
Rendering(紫)： レンダリングに関する処理
Painting(緑)： 表示に関する処理←この処理が長くなってないか？多くないか？で描画に時間がかかっているかを判断することができます。

Developer Toolsの説明は、こちら詳しいです↓
http://www.slideshare.net/yoshikawa_t/chrome-devtoolsnext?ref=http://www.studio-kingdom.com/backbone-js/743


2. Google ChromeのDeveloper Tools 「Enable continuous page repainting」
Google ChromeのDeveloper Toolsで「画面を強制的に再描画し続けるモード」があり、
図1の「Enable continuous page repainting」チェックボックスをチェックすることでモードが切り替わります。

図1. Enable continuous page repainting

すると、
画面右上に緑色のボックス(描画の処理時間を表すメーター)が出てきます。

図2. 画面を強制的に再描画し続けるモード

このボックスをを表示した上で、
CSSプロパティの有効・無効を切り替えることで描画コストを高くしている原因を探ることができます。（メーターが上下するので。

Skiaとは、Googleが開発しているグラフィックスライブラリで、Google Chromeでも使われいます。

http://ja.wikipedia.org/wiki/Skia

そのSkiaのデバッグツールがSkia Debuggerで、このツールを使うとCSSプロパティの重みが測れます。

XCODE

Google Chrome Canary

Qt

depot_tools

Skia Debugger

記述の順番通りインストール作業してもらえれば、たぶんスムーズに入るはず…

1. XCODEのインストール

https://itunes.apple.com/jp/app/xcode/id497799835?mt=12
App Storeからインストールする

2. Google Chrome Canaryのインストール
http://www.google.co.jp/intl/ja/chrome/browser/canary.html
上記サイトからダウンロードし、インストールする


3. Qtのインストール
http://qt-project.org/downloads
上記サイトからQt 4.8をダウンロードし、インストールする
最新バージョンを入れるとSkia Debuggerがインストールできなかったので要注意


4. depot_toolsのインストール
http://www.chromium.org/developers/how-tos/install-depot-tools

・depot_toolsをcloneする

$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

・depot_toolsディレクトリにパスを通す(~/.bash_profileでもパスを通すように記述する

$ export PATH=`pwd`/depot_tools:"$PATH"

⇒ 後述するgclientコマンドを叩けるようにする


5. Skia Debuggerのインストール
https://sites.google.com/site/skiadocs/developer-documentation/contributing-code/downloading

・Skiaをcloneする

$ mkdir skia
$ cd skia/
$ gclient config --name . --unmanaged https://skia.googlesource.com/skia.git
$ gclient sync

・ビルドしてアプリを出力

$ GYP_GENERATORS="ninja,xcode"
$ GYP_DEFINES="skia_os=mac skia_arch_width=64" make debugger

⇒ すると、「out/Debug/debugger.app」にSkia Debuggerが出力される！

・起動

$ open out/Debug/debugger.app

などでdebugger.appを起動させると、↓のような画面が表示されます。

図3. Skia Debugger起動

画面中央下部の、Overviewのタブとかが表示されねえ…
という方は、画面左上の「+」で画面を最大サイズにしてみてください。

Macbook Airだと画面の縦幅が足りないようで、「+」を押さないと表示されませんでした。（筆者もハマりました。


とまあ、install編はこんな感じです。

測定編では、
Google Chrome CanaryとSkia Debuggerを使ってCSSプロパティの重みを測定していきたいと思います。

以上！