Opera、SVGを高速化するバッファ機能

Opera's Developer Relations Team - Buffered rendering in SVGにおいて、最近のOperaに追加された新しいSVG機能が紹介されている。SVGのレンダリングパフォーマンスを向上させることができる機能で、SVGコンテンツを制作しているWebデザイナやWebデベロッパは注目しておきたい内容になっている。

Operaは最近の実装でSVGプロパティbuffered-renderingを追加した。どの程度の頻度で要素が更新されるのかを示唆するためのプロパティで、ブラウザはこの指定内容を加味してレンダリング性能の改善に取り組むことができるようになる。buffered-renderingに指定できる値はauto、dynamics、staticの3つ。それぞれ次の意味があるという。

buffered-rendering値	内容
auto	ブラウザには更新速度とリソースアロケーションの間で妥当な設定を利用することが期待される。
dynamic	要素が頻繁に更新されることを示す。
static	要素がほとんど更新されないことを示す。結果として再描画性能を引き上げるためにオフスクリーンバッファを確保するといった処理が実施されることになる。しかしこれは将来に渡って要素が変更されないことを示すものではなく、要素が変更された場合にはその段階のパフォーマンスが落ちる。

Buffered rendering in SVGにはレンダリングサンプルとしてbuffered-renderingの指定がないものと、buffered-rendering="static"が指定されたものが用意されている。Opera 10.6系でサンプルを表示すると、バッファが有効になっていないSVGではきわめて動作が重くなることを確認できる。バッファが指定されているサンプルはサクサク動作する。

用意されているサンプルはSVGの内部にPNG画像を埋め込んだもので、これに対して複雑なフィルタを適用してあるというもの。フィルタの処理に時間がかかるため、バッファの有効無効でレンダリングに大きな差が生まれている。興味深いのは、このサンプルをOpera 10.70開発版で閲覧すると、どちらもほとんど変わらなくなることだ。Opera 10.70ではSVGフィルタが最適化されており、複雑なフィルタリングを実施していてもそれほど性能が劣化しない。

Buffered rendering in SVGではバッファ指定が有効になっているSVGと無効になっているSVGとで、レンダリングのフレームレートがどのように変化するかのサンプルも提供している。バッファ指定がある方が高いフレームレートを実現していることがわかる。