ここで初めて質問しましたが、このサイトは非常に役に立ちました。問題に対する答えが見つかりませんでした。
ご容赦ください。質問を提示する前に、十分に説明します:)
私は、デスクトップ上で実行される html5 ゲームと、アプリとしてのモバイル デバイスに取り組んでいます。
ゲームの一部で、一度にレンダリングされる 1500 x 1200 のキャンバスがあり、それは DOM のどこかに配置され、より小さな div 内に配置されます。これにより、その div 内でキャンバスをスクロールできます。
これは、デスクトップおよび iOS モバイルで非常にうまく機能します。しかし、Android ではうまく動作しません。パフォーマンスが低いということは、タッチが登録されるまでに 1 ～ 2 秒かかることを意味し、その後、指がスクロールするためにキャンバスが遅れます。
私は多くの調査と多くのテストを行いました：
-easeljs と関連するスクリプトを一時的にオフにすることでパフォーマンスを少し改善できましたが、アプリの残りの部分ではこれが必要です。- $(document) およびその他の要素からバインドを削除することで、さらにパフォーマンスが向上しました。それでも、Android のパフォーマンスは iOS やデスクトップに匹敵しませんでした。
最終的に、キャンバス要素が .removed() であり、代わりに html 'body' に追加されたときに、ほぼデスクトップのパフォーマンスが得られました。どうしてこれなの？もちろん、ゲームでこのようにすることはできませんが、このパフォーマンスの向上をどうにかして再現する必要があります。
さらにややこしいのがこちら。同じ Canvas 要素を再度削除して DOM 内の場所に追加すると、パフォーマンスの点でさらに優れています。タッチ入力の遅延が少なくなり、スクロールがよりスムーズになりました。誰かがヒントを与えたり、その理由を説明できますか?
この種の動作の考えられる原因は何ですか?
//編集: 私の質問に関する詳細な説明。要素をスクロールするときの Android での主要なパフォーマンス ヒットは何ですか? タッチで起動するイベントが多すぎますか? DOM の要素が深すぎますか? DOM の CSS が多すぎますか? EaselJS がうまく動作しませんか?
ありがとうございました