JavaScript のメモリ リークを引き起こしやすいいくつかの側面_JavaScript のヒント

Google WebPerf (ロンドン WebPerf グループ)、2014 年 8 月 26 日に公開。

効率的な JavaScript Web アプリケーションは、スムーズかつ高速である必要があります。ユーザーと対話するアプリケーションでは、メモリを効率的に使用する方法を検討する必要があります。メモリを消費しすぎるとページがクラッシュし、ユーザーの再読み込みが強制されるためです。そして隅に隠れて泣くことしかできません。

自動ガベージ コレクションは、特に大規模で長時間実行される Web アプリケーションでは、効果的なメモリ管理の代わりにはなりません。この講義では、Chrome の DevTools を使用してメモリを効果的に管理する方法を説明します。

そして、メモリ リーク、頻繁なガベージ コレクションの一時停止、全体的なメモリの肥大化など、実際に致命的な問題となるパフォーマンスの問題を修正する方法を学びましょう。

Addy Osmani は、PPT で Chrome V8 でのメモリ リークの多くの例を示しました:

1) オブジェクトのプロパティを削除すると、オブジェクトの速度が低下します (15 倍のメモリを消費します)

コードをコピーします コードは次のとおりです:

var o = { x: 'y' };
delete o.x; //この時点で o は遅いオブジェクトになります
o.x; //

var o = { x: 'y' };
o = null; //次のようになるはずです

2) 終了

クロージャの外にある変数がクロージャに導入された場合、クロージャの終了時にオブジェクトをガベージコレクション(GC)することはできません。

コードをコピー コードは次のとおりです:

var a = function() {
varlargeStr = new Array(1000000).join('x');
return function() {
largeStr;
を返します }
}();

3) DOM リーク

元の COM が削除されると、子ノード参照は削除されない限り再利用できません。

コードをコピー コードは次のとおりです:

var select = document.querySelector;
vartreeRef = select('#tree');

//COM ツリーでは、leafRef は TreeFre の子ノードです
varleafRef = select('#leaf'); var body = select('body');

body.removeChild(treeRef);

//#treeRef がまだ存在するため、#tree をリサイクルできません

//解決策:
ツリー参照 = null;

//リーフ結果のleafRef がまだ存在するため、ツリーはまだリサイクルできません

葉参照 = null;

//これで #tree を解放できるようになりました。

4) タイマーのリーク

タイマーもメモリ リークが発生する一般的な場所です。

コードをコピー コードは次のとおりです:

for (var i = 0; i var buggyObject = {
callAgain: function() {
var ref = this;
var val = setTimeout(function() {
ref.callAgain();
}, 90000);
}
}
buggyObject.callAgain();

//リサイクルしたいのに、タイマーがまだ残っています
buggyObject = null;
}

5) デバッグメモリ

Chrome の組み込みメモリ デバッグ ツールを使用すると、メモリ使用量とメモリ リークを簡単にチェックできます:

タイムラインのレコードをクリックします ->

詳細については、

オリジナルの PPTをご覧ください。