15

こんにちは、スマートフォンとデスクトップ ブラウザの両方で同じように実行できる Webapp があります。Iphone のような小さなデバイスで奇妙な動作が得られることを期待していましたが、現時点でテストを実行できる Android デバイスである Android Galaxy Tab でうまく動作すると確信していました。

これで、Galaxy Tab に一連のブラウザをインストールして、次のことをテストしました。

  • Android ネイティブ ブラウザ
  • Android 用 Chrome
  • Android 版 Firefox

私が使用したデスクトップで

  • ファイアフォックス
  • グーグルクローム

最後に、テストする Iphone を用意しました。

Web サイトでは、ピクセルおよびスプライト ベースの描画に HTML5 キャンバスを使用しており、手の込んだ変換、フィルター、または効果はなく、ほとんどが単純なパスとポリゴンです。私はタッチイベントをリッスンしrequestAnimationFrame、適切な再描画に使用します。

全体として、このアプリケーションはデスクトップ ブラウザで問題なく動作します。また、iOS Safari (iPhone) および Firefox-on-Android でも問題なく動作します。しかし、Android のネイティブ ブラウザが問題を引き起こしています。JavaScriptが応答しないときに画面が赤くフラッシュするように設定しました。画面に触れると、ほとんど常にフラッシュします。

そこで、Android Native App と HTML5 に既知の問題があるかどうか疑問に思います。ネイティブ ブラウザの名前が存在しないため、これに関する情報をグーグルで検索するのは非常に困難です。より多くの情報を入手できるアイデアはありますか? ネイティブ Android ブラウザの遅延の原因となる可能性のあるアイデアはありますか?

この問題についていくつかのアイデアがあります。

  • iOS は requestAnimationFrame をサポートしていないため、タイムアウト ベースの置換に置き換えました。その代わりに Android のネイティブ ブラウザを使用しても、問題は解決しません。

  • 私は AJAX (google clojure xhrio) を定期的に使用して、サーバーからデータを取得しています。データ取得コールバックがイベント パイプラインを詰まらせている可能性はありますか?

  • ログ コンソール メッセージ (console.log) は、アプリケーションの速度を低下させることが知られていますか? ブラウザーが DOM ツリーまたは関連するものを再実行するようにトリガーできますか?

4

2 に答える 2

44

私は多くのブラウザーでキャンバスを使って多くの実験を行ってきました。私が気づいたいくつかのパフォーマンスの問題:

まず、あなたの推測について：

  • がブラウザでサポートされている場合requestAnimationFrame、描画やアプリ自体の応答性が向上します。setTimeoutまたはをフォールバックとして使用するsetIntervalことは常に可能ですが、タイミングに注意する必要があります。この堅牢なポリフィルは少しは役立つかもしれませんが、ネイティブの requestAnimationFrame と比較すると何もありません。

  • console.log がフレームごとに (またはほとんど) 呼び出されると、パフォーマンスが低下します。ネイティブの Android ブラウザーにはコンソール オブジェクトがないため、呼び出されるたびにエラーが生成され、アプリケーションの速度低下にもつながります。あなたはこれを行うことができます：

    if(typeof console === "undefined"){ console = {}; }

  • 集中的なリアルタイム アプリケーションの場合、 Web ソケットは http 要求よりも高速です。残念ながら、この機能は古いネイティブ Android ブラウザーではサポートされていません。Web ソケットを使用できない場合は、http 要求を最小限に抑える必要があります。

注: Android 用ChromerequestAnimationFrameは、ここで引用されている HTML5 機能のほとんどをサポートしていますwebsockets。

詳しくは：

  • コンテキスト 2d を使用してテキストを描画fillTextするのはコストがかかりすぎますが、一部のブラウザーではこれはさらに悪いことです。テキストを別のキャンバスに事前にレンダリングするか、ビットマップ フォントを使用します。(ネイティブの Android ブラウザーでは、filltext描画をプリレンダリングのものに置き換えた後、私が作成したいくつかのゲームでパフォーマンスが 10-15 FPS から 30-45 FPS に向上しました)。

  • パフォーマンスの低下も引き起こすため、コンテキストのスケーリングとローテーションは避けてください。スプライトを 1 回だけスケーリングまたは回転する必要がある場合は、事前レンダリングを使用します。

  • リアルタイム描画を最小限に抑える必要があります。できる限り事前にレンダリングしてください。変更され、更新が必要なものだけを再描画します。

  • メモリ効率が良く、ガベージ コレクターに適したコードを書くようにしてください。

やるべきことはもっとたくさんあります。いくつか引用しただけです。

ヒント: 機能がパフォーマンス キラーかどうかわからない場合は、いくつかのストレス テストを行い、ベンチマークの結果を取得してください。

モバイル アプリケーション、特にリアルタイム アプリケーションでは、過度の最適化やわずかなメモリ ゲインの場合でも、すべての最適化を歓迎します。

詳細については、以下のリンクを参照してください。

Posts & Tutorialsでパフォーマンスを検索することもできます。

編集
このjsfiddleコードスニペットは、この回答でカバーされているいくつかのものを示し、ベンチマークへの大まかなfpsカウンターを提供します。このフィドルを自分で編集して確認してください。

于 2013-04-25T06:47:59.843 に答える