WebKitに新搭載(予定)！CSSプロファイルツールでCSSのチューニングをしよう
HTML5が広まり始めた昨今、Webアプリケーションやブラウザ上で実現するゲームなどが出現し、Webブラウザは単なるWebサイトを閲覧するものからその範疇を越えて、アプリの実行環境として加速度的に進化しています。そういったブラウザ上で動作するWebアプリやゲームはパフォーマンスが非常重要になってきます。これまでは主にバックエンドやJavaScriptの最適化などの話は良く聞きましたが、CSSとそのパフォーマンスに関する話は少なかったように思います。
今回は「Profiling CSS for fun and profit. Optimization notes.」という海外の記事からCSSのセレクタとパフォーマンスの話と、Webkitに新たに搭載される(予定の)CSS プロファイラーツールをご紹介します。
ちりも積もればパフォーマンスに影響?
CSSのセレクタは右側から解釈されるというのは既にご存知の方も多いかと思います。(知らなかった方はこちらの記事をどうぞ→ CSSセレクタ高速化の話し)。
Profiling CSS for fun and profit. Optimization notesではさらにつっこんで、どのセレクタが遅くなるのかという事をOperaとWebkitのプロファイリングによる実験結果を踏まえて詳しく書かれています。この記事の要点だけを書いていくと…
- トータルのセレクタ数を減らす(.ie .foo .bar{}なども使わない方が良い)
- ユニバーサルセレクタ(*)は避けるべき。(ユニバーサルセレクタは最もコストの高いセレクタ)
- ページズームは一部のブラウザ(Opera)のcssパフォーマンスに影響を与える。
- ウィンドウサイズの変更はOperaは影響ないが、Chromeはパフォーマンスに影響が出る。
- ページのリロードはCSSのパフォーマンスに悪影響を与える(Opera)
- border-radiusとtransformは最新版のwebkit, operaでも最もコスト(レンダリングの時間)がかかるプロパティである。
- セレクタのマッチングはWebkitは非常に優秀(Operaよりも)
以前書いた「HTML初心者が知っておくべきリセットCSS と3つのポイント」でもユニバーサルセレクタについてそのデメリットを言及しましたが、この記事の実験結果からもユニバーサルセレクタは非常にコストが高いプロパティなのが分かります。
またCSS3のプロパティでコストが高いのがtransformプロパティです。たった1度だけ傾けるだけでも非常にコストのかかるプロパティのようです。なんとなくtransformはコストが高いってのは分かる気がしますね。一方意外だったのがborder-radiusプロパティ。border-radiusはtext-shadowやグラデーションを指定するlinear-gradientなどと比べてもコストの高いプロパティのようです。
ただし、border-radiusがコストが高いプロパティと言っても1つ１つは微々たる時間しかかかりません。このテストページのように400個ものボタンにborder-radiusを適用させると顕著に現れるレベルですので、普通に使う分にはあまり気にする必要は無いでしょう。ただし、CPUが非力なスマートフォン向けサイトだったり、ブラウザ上で動かすWebアプリやゲームなど、対象とするデバイスと作成するもの次第ではこれらの積み重ねが全体のパフォーマンスに影響してくると思われます。
この記事ではOperaに搭載されたStyle profilerを使ってCSSのコストを計測しています。一方webkitではOperaと同じ機能はまだ無いのでJavaScriptとTimlineなどを組み合わせて実験しています。…が、ここで気になる記述を発見。
Opera folks came out with an experimental “style profiler” (followed by WebKit’s ticket+patch shortly after).
ん？Webkitも直ぐに同じような機能が来るの？ということで調べてみたところ、なんとCSS ProfilerがWebkitにもキテター！
とは言ってもまだ正式にリリースされている訳ではなく、WebkitのNightly Build(WebKit r104394)で試す事ができます。(Nighty Build版のインストールは自己責任で)
Webkitに搭載されたCSSプロファイラを試してみる
CSSプロファイラーを使う場合にはWebkitのNightly Build版を立ち上げて上部のメニューバーから「開発 > Webインスペクタを表示」をクリックします。そしてProfileタブをクリックします。
「Select profiling type」という画面でJavaScriptか、CSSを選ぶ事ができます。CSSのプロファイルを見たいので「Collect CSS Selector Profile」を選びます。
その下にある「Startボタン」若しくは左下の「●ボタン」を押します。するとCSSのProfilingがスタートします。この状態でページをリロードすると、CSSの各セレクタのマッチング数とそれに要する時間が記録され、もう同じボタンを押すとストップし、Profileファイルが左ペインに表示されます。
「CSS SELECTOR PROFILES」に表示されたアイコンをクリックすると一覧で表示されます。これで、どのセレクタがボトルネックになっているのかが一目瞭然で分かります。
もちろんWebkitなのでChromeにも搭載予定です。さらにさらにソースコードマッピングとかもできちゃうようになるみたいですよ！ますますChromeの開発者ツールが充実していきそうで非常に楽しみですね。
