javascriptウェブアプリケーションによるラムメモリ消費の最適化方法

Question

私はアプリケーションを起動すると、アプリケーションで何らかの処理をしている間にメモリ消費量が700〜800MBになると、4GB以上のRAMメモリを異常に消費するjavascript Webアプリケーションがあります。直ちにメモリ消費量が急上昇する。 何がその根本的な原因である可能性があり、アプリケーションを400〜500MBのRAMを消費するようにするにはどうすればいいですか？

Answer 1

あなたの質問に答えることは不可能です。幅広く、あなたのコードはわかりません（明らかな理由ですべてを読まない）。しかし、私はあなたがGoogle Chromeのデベロッパーのウェブサイトでjavascriptの最適化に関するこの記事を読むべきだと思います。

ほとんどのメモリを使用する関数を分析し、問題を指摘してメモリリークを見つけたり、コードを最適化する必要があります。 JavaScriptコードに

著者の最適化

https://developers.google.com/speed/articles/optimizing-javascript

：グレゴリー・ベイカー、GMailの&エリックArvidsson上のソフトウェアエンジニアは、Google Chromeの ソフトウェアエンジニアを

推奨経験：JavaScriptの

に関する実践的な知識

クライアント側のスクリプトによって、アプリケーションを動的にすることができますアクティブな ですが、このコードのブラウザの解釈では、それ自体が の非効率性をもたらす可能性があり、異なる構文のパフォーマンスはクライアントからクライアントへと になります。ここでは、JavaScriptコードを最適化するためのヒントとベストプラクティスについてご説明します。

定義クラスメソッド

以下がbaz.Barのインスタンスが構築 各時間として、新たな機能及びクロージャがfooのために作成され、非効率的である：

baz.Bar =関数（） {//コンストラクタ本体this.foo = function（）{ //メソッド本体}; }好ましいアプローチは次のとおりです。

baz.Bar = function（）{//コンストラクタ本体};

baz.Bar.prototype.foo = function（）{//メソッド本体};この アプローチを使用すると、baz.Barのインスタンス数がいくつあっても、 fooに対して1つの関数しか作成されず、クロージャには が作成されません。 （むしろ参照型より）値型を持つインスタンス変数 初期値のプロトタイプ に

初期インスタンス変数

プレイスインスタンス変数宣言/初期化（すなわち、型番、ブール値、ヌル、 の値は不定、または文字列）。これにより、コンストラクタが呼び出されるたびに 初期化コードが不必要に実行されるのを回避します。 （ の初期値がコンストラクタへの 引数、または 構築時の他の状態に依存するインスタンス変数に対しては、これを行うことはできません。）例えば

、代わりに：

foo.Bar =関数（）{this.prop1_ = 4。 this.prop2_ = true;
this.prop3_ = []; this.prop4_ = 'blah'; };使用：

foo.Bar =関数（）{this.prop3_ = []; };

foo.Bar.prototype.prop1_ = 4。

foo.Bar.prototype.prop2_ =はtrue。

foo.Bar.prototype.prop4_ = '何とか';

クロージャはJavaScriptを強力かつ便利な機能は、クロージャと落とし穴を回避しています。彼らは、メモリリークの最も一般的な原因です

：しかし、 彼らには、いくつかの欠点を持っています。クロージャを作成すると クロージャなしの内部関数を作成するよりも大幅に遅くなり、静的関数を再利用するよりもはるかに遅くなります。 例えば：

関数setupAlertTimeout（）{VAR MSG = '警告するメッセージ'。
window.setTimeout（function（）{alert（msg）;}、100）; }は、以下より遅い：

function setupAlertTimeout（）{window.setTimeout（function（）{ var msg = '警告するメッセージ'; 警告（msg）;}）100; }よりも遅くなる。

関数ALERTMSG（）{VAR MSG = '警告するメッセージ'。警告（msg）; }

関数setupAlertTimeout（）{window.setTimeoutは（ALERTMSG、100）。 } スコープチェーンにレベルを追加します。ブラウザが プロパティを解決すると、スコープチェーンの各レベルをチェックする必要があります。 次の例で：= 'A'

VaRのA。

関数createFunctionWithClosure（）{VAR B = 'B';戻り値 関数（）{ var c = 'c'; a; b; c; }; }

するvar F = createFunctionWithClosure（）。 f（）; fが呼び出されると、aを参照する はbを参照するよりも遅く、 を参照するよりも遅い。クロージャを使用する場合の情報については、IE + JScriptのパフォーマンスの推奨事項第3部： JavaScriptコードの非効率性を参照してください。 とIE。

避けてください

あなたのコードでwithを使用しないでください。スコープチェーンを変更するため、 のパフォーマンスに悪影響を及ぼし、他のスコープで変数を検索するために、より高価な を作成します。ブラウザのメモリを回避

は

メモリリークをリークしたWebアプリケーションとあまりにも共通の問題であり、 は、巨大なパフォーマンスヒットにつながることができます。 ブラウザのメモリ使用量が増加すると、残りのユーザーのWebアプリケーションと システムの速度が低下します。ウェブアプリケーションの最も一般的なメモリリーク JavaScriptスクリプトエンジンとInternet ExplorerのCOMインフラストラクチャ の間、またはJavaScriptエンジンとFirefoxの間のDOMを実装するブラウザのC++オブジェクト（たとえば、JavaScriptスクリプトエンジンと ）間の循環参照が含まれます。 XPCOMインフラストラクチャ）。ここで

は、メモリリークを回避するための親指のいくつかのルールです：

は、イベントハンドラ

最も一般的な循環参照パターン[DOM要素に取り付けるためのイベントシステムを使用してください - >イベント ハンドラ - >閉鎖をスコープ - > DOM]要素については、このMSDN ブログ記事で説明しています。この問題を回避するには、Google doctype、 Dojo、JQueryなどのイベントハンドラを添付するために、よくテストされたイベント システムのいずれかを使用します。

さらに、インラインイベントハンドラを使用すると、IEで別の種類の がリークする可能性があります。これは一般的な循環参照型のリークではなく、 ではなく内部の一時的な匿名スクリプトオブジェクトのリークです。 の詳細については、このJavaScriptキットのチュートリアルの Internet Explorerのリークパターンの理解と解決方法、および の例の「DOM挿入順序リークモデル」のセクションを参照してください。

避けてはExpandoプロパティ

はExpandoプロパティは、DOM要素 上で任意のJavaScriptプロパティであり、循環参照の共通のソースです。 expando プロパティを使用してメモリリークを導入することはできませんが、偶然に を導入するのはかなり簡単です。ここでのリークパターンは[DOM要素 - > via expando - >中間オブジェクト - > DOM要素]です。 のベストプラクティスは、それらの使用を避けることです。それらを使用する場合は、プリミティブ型の場合にのみ値 を使用してください。非プリミティブ値を使用する場合は、不要になったときに expandoプロパティを無効にします。 Internet Explorer 漏洩パターンの理解と解決の 「循環参照」のセクションを参照してください。