JavaScript によるメモリ リークとメモリ管理のヒント_JavaScript のヒント

この記事の例では、JavaScript のメモリ リーク回避およびメモリ管理手法について説明しており、非常に実用的です。皆さんの参考に共有してください。具体的な方法は以下の通りです。

この記事の内容は、Google WebPerf (London WebPerf Group)、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() {
 var largeStr = new Array(1000000).join('x');
 return function() {
  return largeStr;
 }
}();

3) DOM リーク

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

var select = document.querySelector;
var treeRef = select('#tree');
 
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf'); 
var body = select('body');
 
body.removeChild(treeRef);
 
//#tree不能被回收入，因为treeRef还在
//解决方法:
treeRef = null;
 
//tree还不能被回收，因为叶子结果leafRef还在
leafRef = null;
 
//现在#tree可以被释放了。

4) タイマーのリーク

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

for (var i = 0; i < 90000; i++) {
 var buggyObject = {
  callAgain: function() {
   var ref = this;
   var val = setTimeout(function() {
    ref.callAgain();
   }, 90000);
  }
 }
 
 buggyObject.callAgain();
 //虽然你想回收但是timer还在
 buggyObject = null;
}

5) デバッグメモリ

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

タイムラインのレコードをクリック -> メモリ:

この記事が皆さんの JavaScript プログラミングの学習に役立つことを願っています。