2012-03-23 16 views
8

私たちはモバイルデバイス用のHTML5アプリケーション(Android + iOS)に取り組んでいます。しかし、大きな問題はメモリ消費です - 使用されたメモリ量は非常に速く上昇しており、アプリケーションは遅くなります。モバイルウェブキットのメモリ使用量

HTML(JavaScript)アプリケーションでのメモリリークを防ぐためのベストプラクティス、ヒント、ツール、ソリューションなどはありますか?

P.S.私たちはWebkitブラウザのみをターゲットにしています

答えて

7

最近この件に関するいくつかの素晴らしい記事があります。あなたがそれに調整されていない限り、本当にあなたの注意を引くことができないオブジェクト作成のいくつかの本当に驚くべき情報源があります。通常、問題はメモリの使用ではなく、実際にアプリケーションがゆっくりと漏れているメモリを収集するために必要なガベージコレクションのサイクルです。

この記事は、私が最近話題に読んだ最高です:http://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

限りツールは、問題を診断/闘うためとして、Google ChromeのSpeedtracerが頭に浮かぶ。もちろん、Chromeのチューニングはすべてのブラウザのチューニングを保証するものではありませんが、Chromeでオブジェクトを作成することのほとんどは、すべてのブラウザで実装されているJS仕様に共通しています。

考慮すべき重要な点の1つは、RAMの使用とビデオRAMの使用が同じでないことです。 1つのベストプラクティスは、UIのどの部分がハードウェアアクセラレーションされているかを確認し、それらが小さくなっていることを確認することです(つまり、一度に画面に合わせる)。画面ハードウェアのスクロールした部分が高速化されていると、GPUのティアリング/タイリングや遅いスクロールが発生します。これは、iOSシミュレータを使用して部分的に検出できます。この記事では簡単にアイデアを説明しています。http://devinsheaven.com/turn-your-iphone-wacky-and-make-your-iphone-application-better/ 最後に、JavaScriptには実際に共通のメモリリークパターンが多数あり、すべてのエンジニアが時々実行します。 IBMはそれらの良いリストを持っています。私はn00bなので、2つ以上のリンクを投稿することはできませんが、 "一般的なJavaScriptのメモリリーク"についてはGoogleを使用することができます。おそらく最初の結果です。

3

Chromeで役立つ診断ツールには、タスクマネージャ、タイムラインパネル、ヒーププロファイラなどがあります。

ブラウザ - Chrome Canary(27.0.1447。3カナリア)

  • タスクマネージャ: - : - >開発ツール - ツール[ツール]> [タスクマネージャ//「のJavaScriptメモリ」

  • タイムライン]タブを見出しタブを右クリックしてご確認ください - >タイムライン//、録音をクリックして、いくつかの相互作用を行い、その後、記録

  • ヒーププロファイラを停止:[ツール] - > [開発ツール] - > [プロファイル//「テイクヒープのスナップショット」

  • リモートデバッグ

    をクリックします
  • "Gmailのメモリリークを排除する"
  • ディープメモリプロファイラ

"3スナップショット" 技術//プレゼンテーション