「mir.aculo.us with Thomas Fuchs » Blog Archive » Making an iPad HTML5 App & making it really fast」（iPad用HTML5アプリを作る＆そしてそれを高速にする）というタイトルの英語の記事があり、なかなかおもしろいことが書かれていたので、メモ代わりにまとめてみます。ただし、この記事の真偽の程はわかりません（例えばGPUアクセラレーションが効くとか効かないってどうやったらわかるのだろう）。

まずはこの方が作ったHTML5アプリです。

http://everytimezone.com/

タイムゾーンを見るアプリだそうで、広告以外は画像を使っていないそうです。また、JavaScriptライブラリや外部CSSも使っていないそうです。

このHTML5アプリを最初作った時はとても遅かったそうで、そこでわかったことがまとめられています。

1.画像が遅くさせる

「day bar」（日にちの部分）に-webkit-gradienを使って複雑なことをやっていたそうなんですが、これがとにかく遅い、と。-webkit-gradientを使うとビットマップイメージを作成するようです（外部のpngファイルを読み込んだのと同じことになる）。で、Mobile safariでの画像はとにかく遅いそうです。なので画像やgradientは使わないようにしたそうです。

その代わり、canvasタグを使ったそうです（背景など）。

リンク先にはgradien部分をcanvasタグに書き換えたbeforeとafterのコードが掲載されています。

2.テキストとボックスにシャドウを使わない

これらも動作を遅くさせるそうです。理由は書いていませんでした。

3.ハードウェアによるアクセラレーションは新しく、そしてバギーである。

-webkit-transformを使用するとハードウェアによるアクセラレーションが有効になります（opacity もです）。

しかし同時に実行できる数には制限があり、その数を超えるとちらつきが発生したりレンダリングエラーが発生するそうです。

4.できるだけtouchイベントを使う

onClickをiPadで使うとディレイが発生するのでtouchイベントを使った方がよいようです。

リンク先の記事ではtouchイベントが使えないブラウザでも使えるようにするためのコードのサンプルが掲載されていました。

5.opacityを避ける

いくつかの理由でopacityを使うとちらつきが発生するようです。

6.自作のJavaScriptとCSSを使う

フレームワークに頼ってはいけません。必要最低限のスクリプトやスタイル設定を含んだHTMLファイルにすることでロードも速くキャッシュも効きオフラインでも動作させることができるようになったそうです・

Appleから提供されているSDKに含まれているiPadシミュレータ上で作ったものを実際にiPadで実行してみるとその違いに唖然としたようです。

このあたりの話は実際に経験してみないとわからないですけど、事前に頭の片隅にこういう情報があると早期に問題を解決することができるでしょう。

まあ、でもCSS3っておもしろいので猿みたいにあれこれ使いたくなっちゃうんですけどねｗ