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

98

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

これが私の状況です：

jqueryフロントエンドとJSONでデータを提供するRESTfulバックエンドを使用して、データ量の多いWebアプリケーションを構築しています。ページが一度読み込まれると、すべてがajaxを介して行われます。

UIは、UI内に複数のタブを作成する方法をユーザーに提供し、各タブには多くのデータを含めることができます。作成できるタブの数を制限することを検討していますが、メモリ使用量が特定のしきい値を超えた場合にのみ、タブを制限することをお勧めします。

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

アプリケーションがユーザーのブラウザーでのメモリ使用量に基づいてアクションを決定できるように、（開発ツールだけでなく）ランタイムソリューションを探しています。
DOM要素やドキュメントのサイズを数えるのは良い見積もりですが、イベントバインディング、data（）、プラグイン、その他のメモリ内のデータ構造が含まれていないため、かなり不正確になる可能性があります。

— タウレン
ソース

Webアプリケーションのユーザーのタイプを調査して、Webアプリケーションの使用中にメモリの問題があるかどうかを確認する必要があります。それともあなた自身のウェブアプリでメモリ/パフォーマンスの問題を抱えていますか？

— Prutswonder 2010年

@Prutswonder：いいえ、問題は発生していませんが、そのようなツールが存在するかどうか知りたいだけでした。タブに固定の制限を設定するだけでなく、動的な方法が優れていると考えただけです。

— Tauren

ビルドタイムソリューションではなく、ランタイムソリューションを探していることを明確にするために、質問にいくつかの詳細を追加しました。

— タウレン

2

ちょうど質問です。何かがすでにキャッシュされている場合でも、それはカウントされますか？

— ajax333221 2012年

65

2015年の更新

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

window.performance.memory

ブラウザーサポート：Chrome 6以降

2012年の回答

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

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

DOM要素やドキュメントのサイズを数えるのは良い見積もりですが、イベントバインディング、data（）、プラグイン、その他のメモリ内のデータ構造が含まれていないため、かなり不正確になる可能性があります。

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

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

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

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

コンテンツの追加または削除も追跡されるようにhtml操作をラップします（これinnerHTML.lengthが最善の見積もりです）。

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

イベントバインディングについては、イベント委任を使用する必要があります。その場合は、ある程度固定された要素と見なすこともできます。

メモリ要件を正確に見積もることが難しいもう1つの側面は、ブラウザによってメモリの割り当てが異なる可能性があることです（JavaScriptオブジェクトとDOM要素の場合）。

— gblazex
ソース

innerHTML.length処理にメモリ、RAM、CPU（または他の何か、私にはわからない）を使用しないのですか？

— mrReiha

この機能のブラウザサポートは、IE9 +またはChrome以外のものではありません。Window.performance.memoryはChromeのみです。docs.webplatform.org/wiki/apis/timing/properties/memory

— Blunderfest

あなたは正しい、私は記憶がナビゲーションのタイミング基準とwindow.performanceオブジェクトの一部であると思った。古い「サポート対象」エントリは、その標準に適用されました。Chrome window.performance.memoryは非標準の拡張機能と見なします。

— gblazex 2016

window.performance.memoryによるリアルタイムメモリモニタリングを有効にするには、-enable-precise-memory-infoフラグを指定してChromeを起動する必要があります。

— kluverua

更新：Operaもこれをサポートしています。出典：Mozilla。developer.mozilla.org/en-US/docs/Web/API/…–

— HoldOffHunger

39

Navigation Timing APIを使用できます。

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

window.performance.memory JavaScriptのメモリ使用量データへのアクセスを提供します。

推奨読書

ナビゲーションタイミングによるページ読み込み速度の測定

— シンドレ・ソルフス
ソース

素晴らしい提案。ありがとうございました。

— MaximOrlovsky、2015

21

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

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);

スニペットを展開

— ダスティンブラウネル
ソース

1

これは、JSのメモリ使用量ではなく、ページメモリの使用状況を報告しているように見える、Chromeに組み込まれているタスクマネージャのメモリ-stats.jsは33.7メガバイト報告しながら、Gmailは250メガバイトを使用していると言う

— Brandito

Bookmarklet.jsのgithubページにはライセンスが記載されていないため、おそらく著作権で保護された知的財産です。それは、そのプロジェクトに依存することにある程度の不確実性を残します。

— HoldOffHunger 2018

8

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

— Tvanfosson
ソース

3

@tvanfosson：悪い考えではありませんが、.data（）やメモリデータ構造などの非DOMメモリに関する情報は得られません。しかし、それは私が使用できる全体的な重量の良い見積もりを与えることができます。

— Tauren

4

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

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

— パブロ・フェルナンデス
ソース

@パブロ：ありがとう。私は確かに開発ツールを使用しますが、実行時に各ユーザーのブラウザーでのメモリ使用量を見つけるために使用できるものを見つけたいと思っていました。

— Tauren

3

テストのためだけに表示したい場合は、デベロッパーページを介してChromeでメモリ使用量を追跡する方法がありますが、JavaScriptで直接実行する方法はわかりません。

— ザカリーK
ソース

@Zachary：ありがとう。私は確かに開発ツールを使用しますが、ランタイム分析ソリューションを見つけることを望んでいました。

— Tauren

1

あなたが私に知らせてくれたら、私は1つの便利なものを持っていると思います

— Zachary K

3

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

最後に、webkit開発者はメモリ情報をJavaScriptに追加することについて話し合っていますが、何を公開すべきか、何を公開してはならないかについて、多くの議論を呼んでいます。どちらにしても、この種の情報が数年後に利用可能になる可能性は低くありません（ただし、現時点ではその情報はあまり役に立ちません）。

— デビッド・モルダー
ソース

1

私と同じようなプロジェクトを始めるのに最適な質問のタイミング！

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

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

Protip：IE、FF、Safari ...、Chromeで同じページを開いた場合。Chromeのabout：memoryに移動すると、他のすべてのブラウザーでのメモリ使用量が報告されます。きちんと！

— ov
ソース

0

サーバーがそのセッションの帯域幅（何バイトのデータがクライアントに送信されたか）を追跡することをお勧めします。ユーザーが制限を超えると、ajax経由でデータを送信する代わりに、サーバーはエラーコードを送信して、JavaScriptがユーザーに過剰なデータを使用したことを知らせるために使用する必要があります。

— カム
ソース

@incrediman：これもいいアイデアですが、多くの追跡機能を組み込まないとうまくいかないと思います-バイト数だけではうまくいきません。問題は、タブ内のデータが、ユーザーがさまざまな方法でフィルタリングおよびソートするリストであることです。変更を加えるたびに、サーバーから新しいデータが取得され、現在のdom要素が置き換えられます。さらに、「リロード」を実行せず、新しいページから始めるとはどういう意味ですか？その場合は304なども追跡する必要がありますが、静的なHTMLのみを提供するつもりで、すべてのデータはRESTサービスから取得されます。

— Tauren

このアプローチでは、クライアントのメモリ使用量に影響を与えるcreateElement（）またはremove（）で作成または破棄された要素は考慮されません。しかし、それは他の回答とは興味深いことに異なります（クライアント側ではなくサーバー側で測定することにより、測定値は他の回答のようにメモリを変更しません）。

— HoldOffHunger

0

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

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

— ミッドハット
ソース

4

生成されたinnerHTML文字列の長さは、ブラウザがそのHTMLをレンダリングするために（たとえば、その内部オブジェクトモデルで）使用するメモリと効果的に相関する可能性は低いです。

— TJクラウダー

なんで？私の理論的根拠は、ブラウザにテキストがロードされた場合、それをメモリに保存する必要があるということです。そのため、ブラウザがページをレンダリングするために使用するメモリの測定値を提供します。

— Midhat

4

このように考えてください。「1000万ドルあげたい」と言えば8ワードです。一方、「ナプキンでくしゃみをしたい」と言った場合、それは7です。

— 2010年

1

これは、DOM要素の数を取得するという@tvanfossonの提案に似ています。異なるdom要素には異なる量のテキストを含めることができるため、おそらくもう少し正確です。しかし、それでもdata（）、クリックハンドラー、メモリ内のデータ構造やオブジェクトなどに関する情報は取得されません。私のアプリはこれらの機能の多くを使用しています。

— Tauren

1

スコープ内には、分離されたDOMノードを指すJS変数があり、ドキュメント要素の一部にはなりません。また、ページのテキストに影響を与えずに、非常に長い文字列を変数にロードし、ギガバイトのメモリを消費するコードを書くこともできます。

— Josh Ribakoff、2015年