ノードを削除しているはずなのに解放されない
Javascriptでulノード下にliノードを追加や削除できる機能を作成しました。liノードを削除後メモリリークしていないかを、Google Chrome の DevTools の Performance で Memory Timeline をオンにして調べました。
結果はliノードを削除してもメモリグラフのNodeが減少しませんでした。下に載せたコードまで単純化して調べたところ、原因となる操作は「liノード内のbuttonノードをクリックする」ことでした。
buttonノードをクリックしなければNodeは減少します。しかしクリックするとNodeは減少しません。なぜなのでしょうか? 皆様のお知恵をお貸しください。
Node が減少しないコード
html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta lang="en"> 8 <title>Sample</title> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10</head> 11 12<body> 13 <button id="addListItem">add</button> 14 <button id="deleteAllItem">delete all</button> 15 <ul id="list"></ul> 16 <script> 17 document.getElementById("addListItem").addEventListener("click", () => { 18 const ul = document.getElementById("list"); 19 const li = document.createElement("li"); 20 const btn = document.createElement("button"); 21 ul.appendChild(li); 22 li.appendChild(btn); 23 btn.appendChild(document.createTextNode("button")); 24 }); 25 26 document.getElementById("deleteAllItem").addEventListener("click", () => { 27 const ul = document.getElementById("list"); 28 while (ul.firstChild) { 29 ul.removeChild(ul.firstChild); 30 } 31 }); 32 </script> 33</body> 34 35</html>
再現方法
- 上記のHTMLをGoogle Chromeで読み込む
- addボタンを何回か押す
- buttonボタンをいくつか押す
- delete allボタンを押す
2から4の操作をPerformanceツールで計測すると、buttonボタンを押したliノード分のNodeが減少しません。画像はGarbageCollectしています。
補足情報
OS: Windows 10 (ver 1709)
Browser: Google Chrome (ver 67.0.3396.87)
回答5件
あなたの回答
tips
プレビュー