JavaScript 中分離的 DOM 元素如何導致記憶體洩漏?
分離的 DOM 元素
分離的 DOM 元素是指已從 DOM 中移除但其記憶體仍因 JavaScript 而保留的元素。這意味著只要該元素在任何地方都引用任何變數或物件,即使從 DOM 中銷燬後,它也不會被垃圾回收。
DOM 就像一個雙向連結串列,這意味著對樹中某個節點的引用將阻止整個樹被垃圾回收。
讓我們以在 javascript 中建立 DOM 元素為例。建立元素後將其銷燬,但忘記刪除儲存它的變數。這種情況會導致分離的 DOM,它不僅引用特定的 DOM 元素,還引用整個樹。
示例
在下面的示例中,即使從 DOM 中移除,'someText' 仍然在全域性 'value' 物件中具有引用。這就是為什麼它無法從垃圾回收器中刪除並繼續消耗記憶體。這會導致記憶體洩漏。
<html> <body> <script> var example = document.createElement("p"); example.id = "someText"; document.body.appendChild(example); var value = { text: document.getElementById('someText') }; function createFun() { value.text.innerHTML = "Javascript is not Java"; } createFun(); function deleteFun() { document.body.removeChild(document.getElementById('someText')); } deleteFun(); </script> </body> </html>
避免記憶體洩漏
為了避免記憶體洩漏,最佳實踐是將 var example 放入監聽器中,使其成為區域性變數。當 var example 被刪除時,物件的路徑將被切斷,允許垃圾回收器釋放記憶體。
廣告