Chrome DevTool でメモリリーク調査
参考にしたいくかのサイトは末尾に記載しています。
ChromeブラウザのタスクマネージャーでJSのメモリ利用状況を確認
https://scrapbox.io/files/651c99041a2226001b8f1971.png
メモリ使用量はネイティブメモリで、DOMノードはネイティブメモリに格納される
JavaScriptメモリはJSヒープで、カッコ内のライブ数はページ上の到達可能なオブジェクト使っているメモリ量
タイムラインの記録
https://scrapbox.io/files/651c998e13e758001c09d5cc.png
DevToolsのパフォーマンスを開き、メモリ チェックボックスを有効にして、以下の手順で進める
1. 「強制ガベージコレクション」ボタン（メモリ の右のゴミ箱）を押す
2. 左端の◎（録画ボタン）を押す
3. 画面を操作する
4. 「強制ガベージコレクション」ボタンを押す
ヒープスナップショットの比較
https://scrapbox.io/files/651ca5c36a2927001c320373.png
DevToolsのメモリを開き、「ヒープスナップショット」を選択して、以下の手順で進める
1. 左端の◎（録画ボタン）を押してスナップショットを保存
2. 画面を操作する
3. 左端の◎（録画ボタン）を押してスナップショットを保存
4. 「すべてのオブジェクト」をクリックして、2つのスナップショットの間に割り当てられたオブジェクトを参照
https://scrapbox.io/files/651ca671c468a3001baa3ac3.png
5. オブジェクトをながめてもリークを把握するのは難しいので、Detachedかstringで絞り込んで確認する
https://scrapbox.io/files/651ca7f7339fdd001cedc0bc.png
https://scrapbox.io/files/651ca8102a2e09001bc88953.png
6. 上部「コンストラクター」で1つ選択すると、下部「オブジェクト」に参照ツリーが表示される
ここでソースコードをクリックしてソースを参照したいところだけど、この例ではJS bundleによってファイル名もバンドル後のものだし、コードも名前が圧縮されて読み解けない https://scrapbox.io/files/651ca8a7ce561d001bdd1259.png
ソースマップ設定
参考記事
https://scrapbox.io/files/651ca9b87b62b8001cad7793.png
ソースタブの Filesystem で「ワークスペースにフォルダを追加」
2. ソースコードを置いたフォルダを指定
SourceMapから参照される相対パスと一致する階層を指定
ソースにmapを関連付け
https://scrapbox.io/files/651caa453e6e69001b5f6783.png
1. 9.25b4111.min.jsに対するmapファイルをWorkspaceで探して、リンクアドレスをコピー
例えば file:///Users/shimizukawa/sourcemap/9.25b4111.min.js.map のようなアドレスがコピーされる
2. 対象ソース(mapじゃないよ)を開いた状態で、エディタを右クリックしてソースマップを追加でアドレスを設定する
https://scrapbox.io/files/651caaad79f492001ba5b87c.png
https://scrapbox.io/files/651cab35d9d848001bf7d442.png
https://scrapbox.io/files/651cab95402a6d001c9a3900.png
「ソースマップを読み込みました」と表示されたら成功。
shimizukawa.iconこの手動関連付け、省略できないかなあ... ファイル名から自動で判別してほしいなあ
SourceMapを本番向けコードに //# sourceMappingURL=...で入れてしまうとブラウザが404出しまくるのでNG これで、「メモリ」タブを見るとソースファイル名やソース自体が見れるようになります。
https://scrapbox.io/files/651cabdd488558001b8de324.png
https://scrapbox.io/files/651cac08c468a3001baa8101.png
それで、メモリリークは解消した？
難しい... 1つは解消できたけど、全部解消するには時間がかかりそう
参照したサイト
Chromeでの調査方法の説明が分かりやすかった
メモリリークとは何か、JSでどうするとメモリリークになるのか、の説明が分かりやすい
黄色い表示がリークだ、という表現があるけど、2023年時点では黄色い表示はなさそう
パフォーマンス測定とメモリリークについて
日本語で読めるメモリリーク調査の記事