Ernest Delgado

Ernest Delgado氏がCanvasやそれ以外のレンダリングを使った場合のパフォーマンスの違いについて興味深いデモンストレーションを公開している。CanvasはHTML5で正式に導入が計画されているダイレクトグラフィック描画用要素。Canvas要素を使うことでWebブラウザ側でダイレクトリにグラフィックが描画できるようになり、従来の方法と比較してパフォーマンスが向上するほかより表現力豊かなWebアプリケーションの開発が可能になると期待されている。

Ernest Delgado氏が公開したDrawing polygons performanceはもともとCanvasの描画性能がほかの方法と比較して優れていることを示そうとしたものだが、その結果は同氏が期待していたものとは異なるものとなった。今後採用する技術の選定として興味深い結果だ。

試験で使われたのはGoogle Maps。Google MapsはIEに対してはVMLでのポリゴンレンダリングを、Windows Firefoxに対してはSVGを、SafariやLinux Firefoxに対しては画像検索を使って描画をおこなっている。これとCanvasを使った描画を比較しようというのがこのデモンストレーションの主旨だ。

デモンストレーションの実行例

クロスブラウザ試験結果 - デモンストレーションサイトより抜粋

試験の結果ではGoogle Mapsの現在の描画性能とCanvasによる描画性能には大きな開きがあり、Canvasによる描画性能が優れているようにみえる。しかしMichael Geary氏が指摘するところによると、Canvasの描画性能は必ずしもVMLやSVGよりも優れているとはいえないとされている。マークアップのみのレンダリング時間を比較すると、VML/SVGの描画はCanvasの描画よりも必ずしも遅いとはいえないということだ。つまり、同デモンストレーションでは描画性能ではなく、Canvasがスキップしている部分の処理が計測時間の差として現れているという。

Michael Geary氏の説明によれば、Canvasの描画性能が必ずしもVMLやSVGよりも優れているとはいえないが、どのレンダリングエンジンであれよりダイレクトリなアプローチを使うことで現在のパフォーマンスよりも優れたパフォーマンスが実現できることは示されているとされている。

Canvasが正式な要素となるにはHTML5の正式リリースを待つ必要があるが、すでに主要なブラウザでは実装されている。VMLはIEで実装されており、SVGも複数のブラウザで実装されている。Canvasと同じ動作をさせようとした場合、ブラウザに応じてVMLやSVGを採用するアプローチは描画性能に関していえばどれも実用的というわけだ。