防止動態加載JavaScript引起的內存泄漏問題

2019-11-21 01:06:02

字體：大中小

來源：轉載

供稿：網友

為了釋放腳本資源，通常在返回后還要一些進行額外的處理。

 
script = document.createElement('script'); 
script.src = 
'http://example.com/cgi-bin/jsonp?q=What+is+the+meaning+of+life%3F'; 
script.id = 'JSONP'; 
script.type = 'text/javascript'; 
script.charset = 'utf-8'; 
// 標簽加到head后，會自動加載并運行。 
var head = document.getElementsByTagName('head')[0]; 
head.appendChild(script) 

實際上很多流行的JS庫都采用這種方式，創建一個scritp標簽，賦予一個ID后加載腳本（比如YUI get()），加載完并回調后清除該標簽。問題在于當你清除這些script標簽的時候，瀏覽器僅僅是移除該標簽結點。

復制代碼代碼如下:

 
var script = document.getElementById('JSONP'); 
script.parentNode.removeChild(script); 

當瀏覽器移除這標簽結點后的同時并沒對結點內JavaScript資源的進行垃圾回收，這意味著移除標簽結點還不夠，還得手動的清除script標簽結點的內容:

復制代碼代碼如下:

 
// Remove any old script tags. 
var script; 
while (script = document.getElementById('JSONP')) { 
script.parentNode.removeChild(script); 
// 瀏覽器不會回收這些屬性所指向的對象. 
//手動刪除它以免內存泄漏. 
for (var prop in script) { 
delete script[prop]; 
} 
} 