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

0 件のコメント
CSSプロパティの重みが測れる…ということを知ったので、どうやってやるの?

ってこと書きたいと思います。

インストールで筆者がつまづいてしまったので、まずはインストール編です。
(筆者がMacなので、Macのインストール談です。。Windowsのひと、ごめんなさいごめんなさい。

下記を参考にしてます!
http://havelog.ayumusato.com/develop/performance/e560-css_rendering_with_skia_debugger.html

はじめに

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 Debuggerって?

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

その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プロパティの重みを測定していきたいと思います。

以上!

0 件のコメント :

コメントを投稿