IE下比較常見的記憶體洩露問題——document.getElementById
阿新 • • 發佈：2020-12-22
由於IE的JScript和DOM物件使用不同的垃圾收集方式，因此閉包在IE中會導致一些問題，就是記憶體洩漏的問題，也就是無法銷燬駐留在記憶體中的元素。
當頁面中元素被移除或替換時，若元素繫結的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在記憶體洩露。
例如：以下程式碼會存在記憶體洩露：
下面“btn.onclick”事件，沒有被移除，一直存在記憶體中，沒有被銷燬
<div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <scripttype="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ document.getElementById("myDiv").innerHTML = "Processing..."; } </script>
應該改成以下寫法：
<div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div><script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ btn.onclick = null; document.getElementById("myDiv").innerHTML = "Processing..."; } </script>
或者採用事件委託（個人認為“document.onclick”，在字面意思上，沒有上面“onclick ”的效率高。）
<div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> document.onclick = function(event){ event = event || window.event; if(event.target.id == "myBtn"){ document.getElementById("myDiv").innerHTML = "Processing..."; } } </script>
demo測試
多個重複的點選事件，只是為了看看能否更明顯看到記憶體變化
值得疑惑的是：
在進行記憶體洩漏測試過程中，我一開始使用的 IE11 (window.navigator.platform="Win32") 瀏覽器下，檢查不出記憶體洩露。
我換了一個裝置的IE11(window.navigator.platform="Win64")，就可以看到記憶體漲了。
不知道這個IE的記憶體回收機制，是否和IE的版本有關。
以下是64位下的IE11測試資料，可以看到10多分鐘過去，記憶體漲了30MB
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>記憶體洩漏測試</title> 5 </head> 6 <body> 7 <div id="myDiv"> 8 <input type="button" value="Click me" id="myBtn"> 9 </div> 10 <div id="myDiv2"> 11 <input type="button" value="Click me" id="myBtn2"> 12 </div> 13 14 <div id="myDiv3"> 15 <input type="button" value="Click me" id="myBtn3"> 16 </div> 17 <div id="myDiv4"> 18 <input type="button" value="Click me" id="myBtn4"> 19 </div> 20 21 </body> 22 <script> 23 var btn = document.getElementById("myBtn"); 24 btn.onclick = function(){ 25 document.getElementById("myDiv").innerHTML = "Processing..."; 26 } 27 28 var btn2 = document.getElementById("myBtn2"); 29 btn2.onclick = function(){ 30 document.getElementById("myDiv2").innerHTML = "Processing...2"; 31 } 32 33 var btn3 = document.getElementById("myBtn3"); 34 btn3.onclick = function(){ 35 document.getElementById("myDiv3").innerHTML = "Processing...3"; 36 } 37 38 var btn4 = document.getElementById("myBtn4"); 39 btn4.onclick = function(){ 40 document.getElementById("myDiv4").innerHTML = "Processing...4"; 41 } 42 </script> 43 </html>