iPhone/iPadのSafariで高速に画像を描画する方法

こちらのブログで紹介されていた最適化方法をテストしてみました。

HTML5/JavaScript platform game optimised for iPad | Seb Lee-Delisle
http://sebleedelisle.com/2011/04/html5javascript-platform-game-optimised-for-ipad/

最適化の方法はHTMLのエレメントに -webkit-transform:translateZ(0px) を設定するというもの。こうするとGPUで処理が行われる為、フレームレートが倍になったとの事です。

スタイルを以下の様に設定したものと、設定していないものを準備しました。

        	* {
            	-webkit-transform:translateZ(0px);
        	}

プログラムはバナナの画像を100個描画して右上から左下にスクロールさせています。

• 最適化していないもの
• 最適化したもの

※画面をタップするともう片方のサンプルへと切り替わります。

2つを比較すると最適化しているものの方が目視でもハッキリと分かるくらいに差が付きました。