Android搭載端末のJavaScript/HTML/CSSアプリケーション - 極端に遅い

Question

JavaScriptのゲームをいくつか作っています。彼らはiPhoneとiPadとデスクトップでも完全に動作します。最大の問題はAndroidデバイスですHoneycomb OS 3.x（Samsung Tab 10.1、Motorola Xoom、Acer Iconiaなど）のすべてのタブレットは、JavaScriptが実行されてコンテンツがレンダリングされると非常に遅くなります。 （これは、2.xの携帯電話に優れているが、それでもこれまでのAppleデバイスの背後にある...

は、我々は div要素など HTML5キャンバスとの伝統的なアプローチを使用しようとしましたが、それでも簡単なバウンドするボールの例は極端に遅いですテストする場合は、 http://sie.mautilus.com/canvasにアクセスしてください）。

我々はは、OpenGLレンダリングを有効にAndroid上でデバッグメニューで無効にした場合、それは通常のユーザがこれをしないだろうという、事実について話していない、幅広い視聴者のために使用可能なわずかに良いですが、まだありません...

これはJavaScriptベースのユーザーインターフェイスで、イベントビットはAndroidで完全に使用できなくなります。

インテル386マシンのMS-DOSで実行されていた単純なバウンスボールは、ハイエンドタブレットでは使用できませんデュアルコア1 GHz Cortex-A9 CPUを搭載していますか？

も参照してくださいあり：私は唯一見つけるあなたはそれがAndroidデバイス上で非常に遅いですが、私は同じ問題に遭遇してインターネットを検索すること正しい
http://code.google.com/p/android/issues/detail?id=17353
http://groups.google.com/group/phonegap/browse_thread/thread/fc13b40165db8a00?pli=1a

よろしく、 ステン

Answer 1

私たちに同意する人。

私は物事をスピードアップするためにいくつかのことを行いました（それは低品質ですが）。私はまた、HTC SensationとSamsung Galaxyタブ10.1をチェックしました。私はあなたが別の携帯電話用に異なる設定を使用する必要があると思う。

1. 私の携帯電話が大きなキャンバスを作成してから再び縮小するようにスクリーンサイズを設定します。
2. あなたが実際に小さなキャンバスがフルスクリーン
3. 張られているので、これは、半体中に使用する画素を削減する要因2によってスケールアップシーンはキャンバス全体をクリアしてから、すべてを再描画するclearRectを使用してはいけません。あなたのバウンスボールの例で実際にclearRectを削除すると、多くの改善が見られます。実際に変化する領域（コウモリやボール）をクリアし、それを再描画すれば十分です。

私は、アンドロイド2と4の方が速く3回実行されていることに気づいていませんでしたが、これは3つのデバイスでのテストに基づいているため、ハードな統計ではありません。

また、キャンバスでtranslate3dを使用するとハードウェアレンダリングがトリガーされることがわかりましたが、私はチェック/確認していません。

あなたを助けるかもしれないいくつかのコード：

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/> 


$(gameEl).css('-webkit-transform', 'scale3d(2, 2, 0) translate3d(0, 0, 0)'); 
$(gameEl).css('-webkit-transform-origin', '0 0');