Chromeの開発者ツールを使って、レンダリングのパフォーマンスを調査しました。快適にwebサイトを閲覧するために、ページの読み込みスピードは重要な要因の一つで、フロントエンド側でもパフォーマンスを考慮する必要性は大きいと思われます。ページの読み込みの中で時間がかかる物の一つに画像の読み込みがあります。一般的に画像を使わずにスタイルシートを使って表現できれば処理の性能があがり、またJavaScriptからアクセスすることもでき便利であるとは言われていますが、どの程度違いがあるのか今回検証してみました。
開発者ツールの使用方法
Chromeで、右クリックから「要素の検証」をクリック、もしくはF12キーから開発者ツールを起動できます。Chromeの開発者ツールでは左側のウインドウでHTMLの構造の確認や変更を行うだけではなく、スタイルシートのプロパティ変更を右側のウインドウで動的に行うことができ、効率的に開発を行うために大変便利です。様々な機能が用意されているのでテキストエディタを使用せずに、開発者ツールからページを作ることも可能です。
読み込みスピードの検証
開発者ツールのTimelineでは、ページのローディンングやレンダリングにかかる時間を調べることができます。使い方は、左上の丸いボタンを押下すると計測が始まり、もう一度同じボタンを押下するまでに行った処理にかかった時間を計測して、タイムライン上や、円グラフで確認することができます。わずかな時間でも読み込みにかかる時間を短縮するためにとても便利そうです。
今回は検証のために以下のテスト項目を用意しました。図形を表示するときにスタイルシートを使うべきか、画像を貼付けるべきか、もしくはSVGやCanvasを使うべきか開発するエンジニアの好みで決めてしまっていることが多いと思われます。
【テスト項目】
・CSSのプロパティで表示
・image（png）をはりつけ
・svgで表示
・Canvasで表示
CSSのプロパティで表示
25×25pxのdiv要素の個数と描画にかかる時間を調べました。この検証ではCSSのプロパティで背景色を指定しています。横軸がdiv要素の個数、縦軸がページをリロードするときにかかった時間をレンダリング時、ペインティング時それぞれを示しています。要素数が増えるに従ってリロード時間は増加傾向にありますが、81要素で2.25msとなっています。
ing要素でpng形式の画像を表示
次にimg要素を使って25×25pxのpng形式の画像を読み込んでみます。グラフを見てみるとほぼ同じ画面を表示するのにcssで表示した時の倍ほど時間がかかっていることがわかります。レンダリングよりもペインティングに時間がかかっているというよくわからない現象も起きているので、もしかしたら検証の仕方も良くないかもしれません。
SVGを使用して画像を挿入
SVG(Scalable Vector Graphics)はグラフィックスを描画する機能の一つで、拡大してもが図が荒くならない、XMLで記述されるためJavaScriptからDOMにアクセスできると行った特徴があります。同じように25px×25pxのSVG形式の画像を描画して検証してみました。
今回の検証ではCSSのプロパティの設定で描画した場合と描画にかかった時間はほとんど同じであることがわかりました。
Canvasを使用して描画
Canvasはブラウザ上でグラフィックスを描画するための機能です。線を引く、短形で塗りつぶすといった描画用のAPIで<canvas>要素に対して描画を行います。
興味深いことにSVGと比較してペインティングには時間がかかっていますが、描画する要素の数が増えても描画にかかる時間はあまり変わりませんでした。
総合評価
最後に１００個の要素に対して、ローディングとスクリプティングにかかる時間も含めて比較します。
総合的に比較してみるとCSSとcanvasはほぼ同じだったのに対して、png形式の画像を読み込んだ場合に最も時間がかかっていることがこの結果からもわかりました。また、画像を読み込んだ場合loadingに最も時間がかかっている事がわかります。
おわりに
これまでCSSのプロパティ、img要素で画像を指定して張りつけ、SVG、Canvasの４つの方法で図形を描画し、その処理速度を検証してきました。結果としてはimg要素で画像を貼付けた場合少し他の手法と比較して時間がかかることがわかりました。SVGは少し時間はかかるけどベクトル画像なので拡大しても画像が荒くならなかったり、CSSは描画に時間がかからず、JavaScriptのコードを書かずに描画できるなど、それぞれ特徴があるので用途に合わせて使い分けるのが良さそうです。img要素を使って画像を張る場合もCSSなどでは表現できない物もあるのでそういったときには積極的に使用すべきだと思います。スクリプトを読み込む位置や外部ファイルに記述するべきか、CSSスプライトの効果も今後検証してみたいと思います。
[追記]
図形を描画する際に考慮するべき事として、CPUやメモリの使用率も考慮しないといけない場合があります。通信速度がある程度速ければ画像を貼り付けてしまうのが適切な場合もあるので、どの手段が良いのか一概には言えず、それぞれのメリット、デメリットを考慮して選択していかなくてはいけません。