JavaScript 記憶體洩漏（Memory Leak）問題

這裡我們將解釋為什麼 JavaScript 會產生記憶體洩漏的問題，並示範會產生這個問題的程式寫法，讓大家知道該如何處理這類的問題。

JavaScript 是一種功能強大的語言，在現今許多的網頁中都扮演著重要的角色，雖然其語法簡單、撰寫容易，但是在某些瀏覽器上會產生記憶體洩漏（memory leak）的問題，卻很讓人頭痛。

本文是假設讀者已經對於 JavaScript 與 DOM 都非常熟悉，如果你是使用 JavaScript 撰寫網頁應用程式的開發者，這篇文章應該會很有用。

JavaScript 的記憶體洩漏（Memory Leak）

JavaScript 是一種會自動回收記憶體（garbage collection）的程式語言，也就是記憶體會在 JavaScript 物件被宣告與建立的時候動態配置，而當該 JavaScript 物件不會再被使用時，瀏覽器就會將其收回，而 JavaScript 這樣的記憶體回收方式基本上是沒有什麼問題的，問題會出在部分瀏覽器處理配置與回收 DOM 物件記憶體的方式上。

Internet Explorer 與 Mozilla Firefox 是兩個以參照計數（reference counting）來處理 DOM 物件記憶體的瀏覽器，在這樣的架構下，每一個 DOM 物件都會記錄有多少其他的 DOM 物件有使用到它，當這個數字變成零的時候，就代表這個 DOM 物件已經不會被任何其他 DOM 物件所使用，這時候瀏覽器就會將這個 DOM 物件的記憶體收回至 heap，雖然這種記憶體處理方式非常有效率，但是如果碰到循環式的參照（circular references 或 cyclic references）就會有問題。

循環式參照（circular references）

循環式參照是指兩個物件互相使用對方，所以讓兩個物件的參照計數都至少維持在 1 以上，在單純使用自動回收記憶體的系統中，這個不會有問題，只要檢查這兩個物件，看看是否有被其他的物件所使用，如果發現都沒有其餘的物件會使用它們兩個，就直接把這兩個物件都回收即可。

但是在一個混合式（hybrid）的系統中，同時使用自動回收記憶體與參照計數兩種機制，當系統無法判定循環式參照的出現時，就會發生記憶體洩漏，這樣的狀況下不管是 DOM 物件或是 JavaScript 物件都無法被回收：

<html>
<body>
<script type="text/javascript">
document.write("Circular references between JavaScript and DOM!");
var obj;
window.onload = function(){
  obj=document.getElementById("DivElement");
  document.getElementById("DivElement").expandoProperty=obj;
  obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
  };
</script>
<div id="DivElement">Div Element</div>
</body>
</html>

在這段程式碼中，obj 這個 JavaScript 物件保有一個 DOM 物件的參照 DivElement，而接著這個 DOM 物件又透過 expandoProperty 參照該 JavaScript 物件，形成了一個 JavaScript 與 DOM 物件之間循環式的參照，這時候因為 DOM 物件是使用參照計數的方式來管理的，所以這樣的情況下兩個物件都不會被回收。

下面這是一個呼叫外部 JavaScript 函數的例子，同樣會形成循環式參照的問題，最後造成記憶體的洩漏：

<html>
<head>
<script type="text/javascript">
document.write("Circular references between JavaScript and DOM!");
function myFunction(element) {
  this.elementReference = element;
  // 這裡會形成循環式參照
  // DOM-->JS-->DOM
  element.expandoProperty = this;
}
function Leak() {
  // 造成記憶體的洩漏
  new myFunction(document.getElementById("myDiv"));
}
</script>
</head>
<body onload="Leak()">
<div id="myDiv"></div>
</body>
</html>

從上面兩個例子可以看出來，循環式參照其實很容易會發生，另外在 JavaScript 的 closure 中也常常出現。

JavaScript 的 Closures

JavaScript 語言可以允許巢狀（nested）的函數結構，也就是在一個函數中定義另外一個內部函數（inner function），許多 JavaScript 的程式設計者會使用這樣的技術，在一個大函數中定義一些小的 utility 函數來使用：

function parentFunction(paramA) {
  var a = paramA;
  function childFunction() {
    return a + 2;
  }
  return childFunction();
}

在內部的函數中可以直接使用外部函數中的變數，而內部函數中所宣告的變數對於外部而言則是私有的（private）。在這個例子中，內部的 childFunction() 函數直接存取外部函數 parentFunction() 中的變數，這樣的狀況就稱為 closure。

接著看下面這個例子：

<html>
<body>
<script type="text/javascript">
document.write("Closure Demo!!");
window.onload=
function  closureDemoParentFunction(paramA) {
  var a = paramA;
  return function closureDemoInnerFunction (paramB) {
    alert( a +" "+ paramB);
  };
};
var x = closureDemoParentFunction("outer x");
x("inner x");
</script>
</body>
</html>

在上面的例子中，closureDemoInnerFunction() 是一個定義在 closureDemoParentFunction() 函數中的內部函數，當 closureDemoParentFunction("outer x") 被呼叫時，外層函數 closureDemoParentFunction() 中的 a 變數會被指定為 "outer x"，然後該外層函數會傳回一個指向內部函數 closureDemoInnerFunction() 的指標，然後儲存至 x 變數中。

這裡要注意一點，在 closureDemoParentFunction() 函數中的區域變數 a 在整個函數執行結束並返回之後，還是會持續存在，這跟 C/C++ 這類的語言是不一樣的，在 C/C++ 語言中，區域變數在整個函數執行完成且返回之後就會消失，而在 JavaScript 中當 closureDemoParentFunction 被呼叫時，會產生一個俱有 a 屬性的 scope 物件，這個 a 屬性會儲存 paramA 的值（也就是 "outer x"）。由於 x 變數所儲存的 closureDemoInnerFunction() 這個內部函數包含一個指向外層變數的指標，所以先前所產生的 scope 物件在這個時候也就不會被回收，而當 x("inner x") 被呼叫時，就會顯示 "outer x inner x" 這個訊息。

關於 closure 詳細說明，亦可參考 MDN 的教學。

上面這個例子是一個很簡單的 JavaScript closure 範例，由於 clusure 可以讓內部函數中所有會用到的變數都保留下來，即便是外層的函數已經返回了，這些變數還是可以繼續保留下來，雖然 clusure 很好用，但是他也很容易在背後造成 JavaScript 與 DOM 物件間的循環式參照。

Closures 與循環式參照

這個例子中有一個 clusure 的情況，JavaScript 物件 obj 透過 "element" 這個 id 保留一份 DOM 物件的參照，而 DOM 物件也保留一份 JavaScript 物件 obj 的參照，形成一個循環式的參照，造成記憶體洩漏。

<html>
<body>
<script type="text/javascript">
document.write("Program to illustrate memory leak via closure");
window.onload=function outerFunction(){
  var obj = document.getElementById("element");
  obj.onclick=function innerFunction(){
    alert("Hi! I will leak");
  };
  // 這個是為了讓記憶體洩漏更明顯
  obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
};
</script>
<button id="element">Click Me</button>
</body>
</html>

避免記憶體洩漏

雖然 JavaScript 很容易造成記憶體洩漏，但是在了解會出問題的狀況之後，我們就可以避開這些狀況，像上面 closures 與循環式參照的問題，就可以改用下面幾種方式解決。

第一種方式就是將 JavaScript 物件 obj 設定為 null，這樣就可以直接破壞循環式參照：

<html>
<body>
<script type="text/javascript">
document.write("破壞循環式參照，避免記憶體洩漏");
window.onload = function outerFunction(){
  var obj = document.getElementById("element");
  obj.onclick = function innerFunction() {
    alert("這樣可以避免記憶體洩漏");
    // ... 一些程式碼 ...
  };
  obj.bigString = new Array(1000).join(new Array(2000).join("XXXXX"));
  obj = null; // 這裡破壞循環式參照
};
</script>
<button id="element">"Click Here"</button>
</body>
</html>

另外一個方式是加入另外一個 clusure，破壞循環式參照：

<html>
<body>
<script type="text/javascript">
document.write("加入另外一個 clusure，破壞循環式參照。");
window.onload=function outerFunction(){
  var anotherObj = function innerFunction() {
    // ... 一些程式碼 ...
    alert("這樣可以避免記憶體洩漏");
  };
  (function anotherInnerFunction(){
    var obj = document.getElementById("element");
    obj.onclick = anotherObj;
  })();
};
</script>
<button id="element">"Click Here"</button>
</body>
</html>

最後一種方式是直接避開 closure，不要讓循環式參照形成：

<html>
<head>
<script type="text/javascript">
document.write("直接避開 closure！");
window.onload=function() {
  var obj = document.getElementById("element");
  obj.onclick = doesNotLeak;
}
function doesNotLeak() {
  // ... 一些程式碼 ...
  alert("這樣可以避免記憶體洩漏");
}
</script>
</head>
<body>
<button id="element">"Click Here"</button>
</body>
</html>

結論

這裡我們解釋了循環式參照造成記憶體洩漏的原因，並且討論 clusure 會造成記憶體洩漏的狀況，如果你想要更深入研究相關的主體，可以參考 IBM Developer Works 網頁上的 Resources。

JavaScript 記憶體洩漏（Memory Leak）問題

JavaScript 的記憶體洩漏（Memory Leak）

循環式參照（circular references）

JavaScript 的 Closures

Closures 與循環式參照

避免記憶體洩漏

結論

沒有留言:

張貼留言

熱門文章