JavaScript メモリーリーク

Windows の場合には「タスク マネージャー」を使用して、
「時間の経過に対するメモリー使用量を示すグラフを表示し、
アプリケーションのさまざまな部分を操作するにつれてグラフが階段状に上昇していく場合には、メモリー・リークがあると判断」します。

JavaScript アプリケーションがどの程度メモリーを使用しているかを把握するためには、
「Google Chromeの開発ツールを使用してブラウザーのメモリー・リーク調査」
することがでいます。

原因、方法をまとめてみました。

１、用語及び原因など
◎グローバルスコープ
・関数の外（トップレベル）で宣言した変数のことで、プログラム全体から参照できる
・プログラムが終了するまで記憶領域を確保するため、関数内でしか必要ない変数までグローバル変数にした場合、無駄にメモリを消費することになる
◎ローカルスコープ
・関数内でvar/letを使って宣言された変数で、 関数の仮引数としても使われる。
・変数の記憶領域は、関数の実行が終わり次第、破棄される

◎クロージャ
・ローカル変数を参照している、関数の中に定義している関数 ⇒メモリーリークを引き起こす原因となる
⇒JavaScriptは、GC（ガベージコレクション：プログラムが動的に確保したメモリ領域の内、不要になった領域を自動的に開放する機能）採用しているので、
書き手がメモリの確保・開放を意識することなくメモリ領域から解放できる。
しかし、オブジェクトの参照が残っていると回収できず、メモリ上に残ってしまう。

・メモリリークは、循環参照が原因
⇒2 つのオブジェクトが互いに相手を保持する形で互いを参照している場合、循環参照が発生します
　必要が無い場合は、クロージャを行わないようする


２、Google ChromeのDevToolsを使ってメモリーリークを調査
(1) パフォーマンス計測
Recordボタンを押してから停止する間、ページ上の操作や各処理にどれくらい時間がかかっているか計測します。
Google開発ルールの【Performance】タブを選択する。
画面上部に「ゴミ箱ボタン」は、これを押すと強制的にGCを発生させてメモリ解放ができる
1.Recordボタンを押して録画開始
2.最初にゴミ箱ボタン押す
3.オペレーションを行って、関数を実行させる
4.もう一回ゴミ箱ボタンをおす
5.stopボタンを押してRecord停止させる

(2) メモリ監視：スナップショットで該当する関数を探す
Google開発ルールの【Memory】タブを選択する。
①「Take Heap SnapShot」を選択して、現在のメモリ状態を取得
②オペレーションを行って、関数を実行させる
③「Take Heap SnapShot」をクリックで、メモリ状態を取得
⇒①と③との比較は、「Comparison」を選んで、Sanpshot1を選択して、比較対象にSnapshot2を選択する

◎テーブル表示のデータ内容
Constructor： クラス名
Distance： DOMツリールートからの距離
Object Count： オブジェクトの数
Shallow Size ：オブジェクト単体のメモリ使用量
Retained Size  ： オブジェクトとオブジェクトが参照しているオブジェクトも含めた使用量
このように複数のスナップショットを比較することで、任意のタイミングのメモリ使用状況を比較して、「何が増えているのか」を特定できるようになる。

◎【参考URL】
【メモリー・リーク】
https://www.ibm.com/developerworks/jp/web/library/wa-jsmemory/index.html
https://utage.headwaters.co.jp/blog/?p=1116
https://postd.cc/simple-guide-to-finding-a-javascript-memory-leak-in-node-js/
https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=ja
【JavaScriptのクロージャ】
https://ichimaruni-design.com/2017/09/js-closure/
https://ichimaruni-design.com/2015/06/javascript-closure/
https://utage.headwaters.co.jp/blog/?p=1116
【メモリに関する用語】
https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101?hl=ja
【Chromeデベロッパー・ツールの機能】
https://www.buildinsider.net/web/chromedevtools/01
https://qiita.com/y_fujieda/items/a0a69151cf7307039f74
http://weback.net/utility/1410/