web-dev-qa-db-ja.com

ページのメモリ使用量を見つけるjQueryまたはjavascript

Webページ、またはjqueryアプリケーションで使用されているメモリ量を確認する方法はありますか？

私の状況は次のとおりです。

JSONでデータを提供するjqueryフロントエンドと落ち着いたバックエンドを使用して、データ量の多いWebアプリを構築しています。ページが一度ロードされると、すべてがajax経由で行われます。

UIにより、ユーザーはUI内に複数のタブを作成でき、各タブには大量のデータを含めることができます。作成できるタブの数を制限することを検討していますが、メモリ使用量が特定のしきい値を超えた場合にのみそれらを制限するのが良いと考えていました。

答えに基づいて、いくつかの明確化をしたいと思います。

  • 私のアプリケーションがユーザーのブラウザーのメモリ使用量に基づいてアクションを決定できるように、ランタイムソリューション（開発者ツールだけでなく）を探しています。
  • DOM要素またはドキュメントサイズをカウントすることは適切な推定値かもしれませんが、イベントバインディング、data（）、プラグイン、およびその他のメモリ内データ構造が含まれないため、非常に不正確になる可能性があります。
javascriptjquerymemorymemory-management
89
Tauren

2015アップデート

使用中のすべての主要なブラウザをサポートする場合、2012年にこれは不可能でした。残念ながら、今のところ、これはまだ Chromeのみ 機能（window.performance）。

window.performance.memory

ブラウザのサポート：Chrome 6+

2012年の回答

Webページ、またはjqueryアプリケーションで使用されているメモリ量を確認する方法はありますか？私のアプリケーションがユーザーのブラウザーのメモリ使用量に基づいてアクションを決定できるように、ランタイムソリューション（開発者ツールだけでなく）を探しています。

シンプルだが正しい答えはnoです。すべてのブラウザがそのようなデータを公開するわけではありません。 「手作り」ソリューションの複雑さと不正確さが解決するよりも多くの問題を引き起こす可能性があるため、単純にアイデアを捨てるべきだと思います。

DOM要素またはドキュメントサイズをカウントすることは適切な見積もりですが、イベントバインディング、data（）、プラグイン、およびその他のメモリ内データ構造が含まれないため、非常に不正確になる可能性があります。

本当に自分のアイデアに固執したい場合は、固定コンテンツと動的コンテンツを分ける必要があります。

修正されたコンテンツはユーザーアクション（スクリプトファイル、プラグインなどで使用されるメモリ）に依存しません
他のすべては動的であると見なされ、制限を決定する際の主な焦点となります。

しかし、それらを要約する簡単な方法はありません。これらのすべての情報を収集するtrackingシステムを実装できます。すべての操作は、適切な追跡メソッドを呼び出す必要があります。例えば：

ラップまたは上書きjQuery.dataデータ割り当てについてtrackingシステムに通知するメソッド。

コンテンツの追加または削除も追跡されるようにHTML操作をラップします（innerHTML.lengthが最適な推定値です）。

大きなメモリ内オブジェクトを保持する場合は、それらも監視する必要があります。

イベントバインディングについては、イベントデリゲーションを使用する必要があります。これは、ある程度固定された要因と見なすこともできます。

メモリ要件を正しく推定するのを難しくするもう1つの側面は、ブラウザごとにメモリの割り当てが異なる場合があることです（JavascriptオブジェクトとDOM要素の場合）。

58
gblazex

Navigation Timing API を使用できます。

Navigation Timingは、Webのパフォーマンスを正確に測定するためのJavaScript APIです。 APIは、ページナビゲーションおよびロードイベントの正確かつ詳細なタイミング統計を（ネイティブで）取得する簡単な方法を提供します。

window.performance.memoryは、JavaScriptのメモリ使用量データにアクセスできます。


推奨読書

39
Sindre Sorhus

この質問は5年前のものであり、javascriptとブラウザの両方がこの時期に信じられないほど進化しました。 （少なくとも一部のブラウザでは）これが可能になり、この質問が「javascript show memory useage」をGoogleで検索したときの最初の結果であるため、最新のソリューションを提供すると思いました。

memory-stats.js： https://github.com/paulirish/memory-stats.js/tree/master

このスクリプト（任意のページでいつでも実行できます）は、ページの現在のメモリ使用量を表示します。

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);
21
Dustin Brownell

ブラウザがどのくらいのメモリを使用しているかを実際に知る方法はわかりませんが、ページ上の要素の数に基づいたヒューリスティックを使用できる場合があります。 jQueryを使用すると、$('*').lengthを実行でき、DOM要素の数をカウントできます。ただし、正直なところ、いくつかのユーザビリティテストを実行し、サポートする固定数のタブを作成する方が簡単です。

8
tvanfosson

Chromeヒープスナップショットツール を使用します

MemoryBug と呼ばれるFirebugツールもありますが、まだそれほど成熟していないようです。

4
Pablo Fernandez

他の回答とはまったく異なる解決策を提案します。つまり、アプリケーションの速度を観察し、定義されたレベルを下回ると、ユーザーにタブを閉じるためのヒントを表示するか、新しいタブを開かないようにします。この種の情報を提供する単純なクラスは、たとえば https://github.com/mrdoob/stats.js です。それを除けば、このような集中的なアプリケーションが最初にすべてのタブをメモリに保持することは賢明ではないかもしれません。例えば。ユーザーの状態（スクロール）のみを保持し、最後の2つのタブを除くすべてのタブを開くたびにすべてのデータを読み込む方が安全なオプションです。

最後に、Webkit開発者はメモリ情報をjavascriptに追加することを議論していましたが、何を公開すべきではないか、何を公開すべきではないかについて多くの議論がありました。いずれにせよ、この種の情報が数年以内に利用可能になることはありそうにありません（ただし、その情報は今のところあまり有用ではありません）。

3
David Mulder

テストのためだけに見たい場合は、Chromeで開発者ページからメモリ使用量を追跡する方法がありますが、JavaScriptで直接行う方法はわかりません。

3
Zachary K

似たようなプロジェクトを始めたときの完璧な質問のタイミング！

アプリ内のJSメモリ使用量を監視する正確な方法はありません。これは、より高いレベルの特権が必要になるためです。コメントで述べたように、バインドされたイベントなどを無視するため、すべての要素の数などを確認するのは時間の無駄です。

これは、メモリリークマニフェストまたは未使用の要素が持続する場合、アーキテクチャの問題になります。閉じたタブのコンテンツが、イベントハンドラーなどを残さずに完全に削除されるようにすることは完璧です。それが完了したと仮定すると、ブラウザで大量の使用をシミュレートし、メモリ監視の結果を推定することができます（アドレスバーにabout：memoryと入力します）

ヒント：IE、FF、Safari ...、Chromeで同じページを開いた場合。また、Chromeでabout：memoryに移動するよりも、他のブラウザallでのメモリ使用量を報告します。きちんとした！

1
o.v.

何をしたいのかは、サーバーにそのセッションの帯域幅（何バイトのデータが送信されたか）を追跡させることです。サーバーがajax経由でデータを送信するのではなく、制限を超えた場合、サーバーは、使用しすぎたデータをユーザーに伝えるためにjavascriptが使用するエラーコードを送信する必要があります。

0
Cam

Document.documentElement.innerHTMLを取得して、その長さを確認できます。 Webページで使用されるバイト数がわかります。

これはすべてのブラウザで機能するとは限りません。したがって、すべてのbody要素を巨大なdivで囲み、そのdivでinnerhtmlを呼び出すことができます。何かのようなもの <body><div id="giantDiv">...</div></body>

0
Midhat