首頁 > web前端 > js教程 > 主體

JavaScript常見幾種的記憶體洩漏

coldplay.xixi
發布: 2020-11-09 17:31:37
轉載
2683 人瀏覽過

javascript欄位教學介紹常見的記憶體洩漏。

JavaScript常見幾種的記憶體洩漏

  • 前言
  • 1 介紹
  • 2 記憶體洩露的主要原因
  • 3 常見的記憶體洩露
    • 3.1 全域變數
    • 3.2 計時器
    • #3.3 多重引用
    • 3.4 閉包
  • #4 Chrome記憶體分析工具
  • 資料

前言

##在閱讀這篇博客之前,或許需要具備一些JavaScript記憶體管理的知識:

  • V8中JavaScript的記憶體管理與垃圾回收

記憶體洩漏(Memory Leaks):是指應用程式已經不再需要的內存,由於某種原因未返回給作業系統或者空閒記憶體池(Pool of Free Memory)。

記憶體外洩可能帶來的問題:變慢、卡頓、高延遲。

#JavaScript記憶體洩漏的主要原因在於一些不再需要的參考(

Unwanted References

)。 所謂的Unwanted References指的是:有一些內存,其實開發人員已經不再需要了,但是由於某種原因,這些內存仍然被標記並保留在活動根目錄樹中。 Unwanted References就是指這些記憶體的引用。在JavaScript上下文中,Unwanted References是一些不再使用的變量,這些變數指向了原本可以釋放的一些記憶體。

3 常見的記憶體外洩

#3.1 全域變數

首先,我們得知道,JavaScript中的全域變數是由根節點(root node)引用的,因此它們在應用程式的整個生命週期中都不會被垃圾回收。

場景一:在JavaScript中,如果引用未宣告的變量,將會導致,在全域環境中建立新的變數。

function foo(arg) {    
bar = "this is a hidden global variable";
}
登入後複製

上面這串程式碼,實際上如下:

function foo(arg) {   
window.bar = "this is an explicit global variable";
}
登入後複製

假如,我們希望bar這個變數只在foo函數作用域內部使用,但上面這種情況就會意外地在全域作用域內建立bar,這將造成記憶體洩漏。

場景二:

function foo() {    
this.variable = "potential accidental global";
}foo();
登入後複製

同樣的,如果我們希望bar這個變數只在foo函數作用域內部使用,但如果不知道foo函數內部的this指向全域對象,將造成內存洩漏。

建議:

  1. 避免意外地建立全域變數。例如,我們可以使用嚴格模式,則本節的第一段程式碼將會報錯,而不會建立全域變數。

  2. 減少建立全域變數。

  3. 如果必須使用全域變數來儲存大量數據,請確保在處理完數據後將其置null或重新分配。

3.2 計時器

##場景範例:

for (var i = 0; i < 100000; i++) 
{    
var buggyObject = {        
callAgain: function () {            
var ref = this;            
var val = setTimeout(function () 
{                
ref.callAgain();            
}, 10);        
}    
}    
buggyObject.callAgain();    
buggyObject = null;}
登入後複製

3.3 多处引用

多处引用(Multiple references):当多个对象均引用同一对象时,但凡其中一个引用没有清除,都将导致被引用对象无法GC。

场景一:

var elements = 
{    
button: document.getElementById(&#39;button&#39;),    
image: document.getElementById(&#39;image&#39;),    
text: document.getElementById(&#39;text&#39;)};function doStuff() 
{    
image.src = &#39;http://some.url/image&#39;;    
button.click();    
console.log(text.innerHTML);    
// Much more logic}function removeButton() 
{    // The button is a direct child of body.    
document.body.removeChild(document.getElementById(&#39;button&#39;));    
// At this point, we still have a reference to #button in the global    
// elements dictionary. In other words, the button element is still in    
// memory and cannot be collected by the GC.s}
登入後複製

在上面这种情况中,我们对#button的保持两个引用:一个在DOM树中,另一个在elements对象中。 如果将来决定回收#button,则需要使两个引用均不可访问。在上面的代码中,由于我们只清除了来自DOM树的引用,所以#button仍然存在内存中,而不会被GC。

场景二: 如果我们想要回收某个table,但我们保持着对这个table中某个单元格(cell)的引用,这个时候将导致整个table都保存在内存中,无法GC。

3.4 闭包

闭包(Closure):闭包是一个函数,它可以访问那些定义在它的包围作用域(Enclosing Scope)里的变量,即使这个包围作用域已经结束。因此,闭包具有记忆周围环境(Context)的功能。

场景举例:

var newElem;function outer() 
{   
var someText = new Array(1000000);   
var elem = newElem;   
function inner() 
{       if (elem) return someText;  
 }   
 return function () {};
 }setInterval(function ()
  {   newElem = outer();}, 5);
登入後複製

在这个例子中,有两个闭包:一个是inner,另一个是匿名函数function () {}。其中,inner闭包引用了someText和elem,并且,inner永远也不会被调用。可是,我们需要注意:相同父作用域的闭包,他们能够共享context。 也就是说,在这个例子中,inner的someText和elem将和匿名函数function () {}共享。然而,这个匿名函数之后会被return返回,并且赋值给newElem。只要newElem还引用着这个匿名函数,那么,someText和elem就不会被GC。

同时,我们还要注意到,outer函数内部执行了var elem = newElem;,而这个newElem引用了上一次调用的outer返回的匿名函数。试想,第n次调用outer将保持着第n-1次调用的outer中的匿名函数,而这个匿名函数由保持着对elem的引用,进而保持着对n-2次的...因此,这将造成内存泄漏。

解決方案:setInterval中的參數1的程式碼改為newElem = outer()();

這一節內容的具體剖析,可以見資料1和資料2。

4 Chrome記憶體分析工具

#Chrome(最新的86版本)開發者工具中有兩個關於記憶體的分析工具:

  1. Performance

  2. Memory

相關免費學習推薦:javascript(影片)

#

以上是JavaScript常見幾種的記憶體洩漏的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板