JavaScript でメモリリークを防ぐ

1. メモリリークとは何ですか?

プログラムの実行にはメモリが必要です。プログラムがメモリを要求するたびに、オペレーティング システムまたはランタイムはメモリを提供する必要があります。

継続的に実行されるサービス プロセス (デーモン) の場合、使用されなくなったメモリは適時に解放される必要があります。そうしないと、メモリ使用量がますます高くなり、システムのパフォーマンスに影響を及ぼし、最悪の場合はプロセスがクラッシュする可能性があります。

使用されなくなり、期限内に解放されなかったメモリはメモリ リークと呼ばれます。

一部の言語 (C 言語など) では手動でメモリを解放する必要があり、プログラマがメモリ管理を担当します。

りー

上記は C 言語のコードです。malloc メソッドを使用してメモリを確保します。使用後は、free メソッドを使用してメモリを解放する必要があります。

これは面倒なので、ほとんどの言語ではプログラマの負担を軽減するために自動メモリ管理が用意されています。これを「ガベージコレクタ」と呼びます。

2. ガベージコレクションの仕組み

ガベージ コレクション メカニズムは、どのメモリが不要になったかをどのようにして知るのでしょうか?

最も一般的に使用される方法は「参照カウント」と呼ばれます。言語エンジンには、すべてのリソース (通常はさまざまな値) への参照数をメモリに保存する「参照テーブル」があります。値への参照数が 0 の場合は、その値が使用されなくなったことを意味するため、メモリを解放できます。

上の図では、左下隅の 2 つの値には参照がないため、解放できます。

値が不要になったが参照番号が 0 でない場合、ガベージ コレクション メカニズムはメモリを解放できず、メモリ リークが発生します。

りー

上記のコードでは、配列 [1, 2, 3, 4] は値であり、メモリを占有します。変数 arr はこの値への唯一の参照であるため、参照の数は 1 です。次のコードでは arr は使用されていませんが、引き続きメモリを占有します。

arr を [1, 2, 3, 4] に逆参照するコード行を追加すると、このメモリはガベージ コレクション メカニズムによって解放できます。

りー

上記コードでは、arrをnullにリセットすると、[1, 2, 3, 4]への参照が解放され、参照回数が0になり、メモリを解放することができます。

したがって、ガベージ コレクション機構によってプログラマが緩和されるという意味ではありません。それでもメモリ使用量に注意する必要があります。多くのスペースを占める値は、使用されなくなったら、それらへの参照がまだあるかどうかを確認する必要があります。存在する場合は、手動で参照解除する必要があります。

3. メモリリークを特定する方法

メモリリークはどうやって観察できるのでしょうか?

経験則として、ガベージ コレクションを 5 回連続して実行するたびにメモリ使用量が大きくなる場合は、メモリ リークが発生していると考えられます。これには、メモリ使用量をリアルタイムで表示する必要があります。

3.1 ブラウザ

Chrome ブラウザのメモリ使用量を確認するには、次の手順に従います。

1. 開発者ツールを開き、タイムラインパネルを選択します

2. 
   

3. 上部のキャプチャフィールドでメモリ

4. 
   

5. を確認してください 左上隅にある録音ボタンをクリックします。

6. 
   

7. ページ上でさまざまな操作を実行して、ユーザーの使用状況をシミュレートします。

8. 
   

9. 一定の時間が経過した後、ダイアログ ボックスの停止ボタンをクリックすると、この期間中のメモリ使用量がパネルに表示されます。

10. 
    

メモリ使用量が基本的に安定しており、ほぼ平準化されている場合は、メモリ リークがないことを意味します。

それ以外の場合は、メモリ リークが発生します。

3.2 コマンドライン

コマンドラインでは、Node が提供する process.memoryUsage メソッドを使用できます。

りー

Process.memoryUsage は、Node プロセスのメモリ使用量情報を含むオブジェクトを返します。このオブジェクトには 4 つのフィールドが含まれており、単位はバイトであり、その意味は次のとおりです。

• rss (常駐セット サイズ): 命令領域とスタックを含むすべてのメモリ使用量。

• 
  

• heapTotal："堆"占用的内存，包括用到的和没用到的。

• 
  

• heapUsed：用到的堆的部分。

• 
  

• external： V8 引擎内部的 C++ 对象占用的内存。

• 
  

　　判断内存泄漏，以heapUsed字段为准。

　四、WeakMap

　　前面说过，及时清除引用非常重要。但是，你不可能记得那么多，有时候一疏忽就忘了，所以才有那么多内存泄漏。

　　最好能有一种方法，在新建引用的时候就声明，哪些引用必须手动清除，哪些引用可以忽略不计，当其他引用消失以后，垃圾回收机制就可以释放内存。这样就能大大减轻程序员的负担，你只要清除主要引用就可以了。

　　ES6 考虑到了这一点，推出了两种新的数据结构：WeakSet 和 WeakMap。它们对于值的引用都是不计入垃圾回收机制的，所以名字里面才会有一个"Weak"，表示这是弱引用。

　　下面以 WeakMap 为例，看看它是怎么解决内存泄漏的。

const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"

　　上面代码中，先新建一个 Weakmap 实例。然后，将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对element的引用就是弱引用，不会被计入垃圾回收机制。

　　也就是说，DOM 节点对象的引用计数是1，而不是2。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。

　　基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。

　五、WeakMap 示例

　　WeakMap 的例子很难演示，因为无法观察它里面的引用会自动消失。此时，其他引用都解除了，已经没有引用指向 WeakMap 的键名了，导致无法证实那个键名是不是存在。

　　我一直想不出办法，直到有一天贺师俊老师提示，如果引用所指向的值占用特别多的内存，就可以通过process.memoryUsage方法看出来。

　　根据这个思路，网友 vtxf 补充了下面的例子。

　　首先，打开 Node 命令行。

$ node --expose-gc

　　上面代码中，--expose-gc参数表示允许手动执行垃圾回收机制。

　　然后，执行下面的代码。

// 手动执行一次垃圾回收，保证获取的内存使用状态准确
> global.gc(); 
undefined

// 查看内存占用的初始状态，heapUsed 为 4M 左右
> process.memoryUsage(); 
{ rss: 21106688,
  heapTotal: 7376896,
  heapUsed: 4153936,
  external: 9059 }

> let wm = new WeakMap();
undefined

> const b = new Object();
undefined

> global.gc();
undefined

// 此时，heapUsed 仍然为 4M 左右
> process.memoryUsage(); 
{ rss: 20537344,
  heapTotal: 9474048,
  heapUsed: 3967272,
  external: 8993 }

// 在 WeakMap 中添加一个键值对，
// 键名为对象 b，键值为一个 5*1024*1024 的数组  
> wm.set(b, new Array(5*1024*1024));
WeakMap {}

// 手动执行一次垃圾回收
> global.gc();
undefined

// 此时，heapUsed 为 45M 左右
> process.memoryUsage(); 
{ rss: 62652416,
  heapTotal: 51437568,
  heapUsed: 45911664,
  external: 8951 }

// 解除对象 b 的引用  
> b = null;
null

// 再次执行垃圾回收
> global.gc();
undefined

// 解除 b 的引用以后，heapUsed 变回 4M 左右
// 说明 WeakMap 中的那个长度为 5*1024*1024 的数组被销毁了
> process.memoryUsage(); 
{ rss: 20639744,
  heapTotal: 8425472,
  heapUsed: 3979792,
  external: 8956 }

　　上面代码中，只要外部的引用消失，WeakMap 内部的引用，就会自动被垃圾回收清除。由此可见，有了它的帮助，解决内存泄漏就会简单很多。

　六、参考链接

• Simple Guide to Finding a JavaScript Memory Leak in Node.js

• 
  

• Understanding Garbage Collection and hunting Memory Leaks in Node.js

• 
  

• Debugging Memory Leaks in Node.js Applications

以上がJavaScript でメモリリークを防ぐの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。