Javascript內存使用管理

Question

我正在構建具有大量javascript使用的大型網站，我的所有內容都通過ajax加載，它與facebook非常相似，並且因為有很多不同的頁面我需要大量的javascript，所以我想到的是將我的腳本分成幾個部分，每個頁面都有自己的腳本文件。

現在加載很簡單，我只是為每個頁面加載一個新文件，但我擔心如果用戶通過100個不同的頁面加載100個不同的腳本文件會發生什么？

目前我的網站沒有那么多頁面，但我很確定它將來會在某個時候發展到近100個獨特的頁面。

那么用較慢的計算機的用戶會發生什么？ 我猜它會開始放慢很多，因為沒有刷新。 根據我的閱讀，不可能以任何簡單的方式從加載的腳本文件中卸載所有事件和數據，如果我嘗試這樣做可能會花費我很多時間和精力來做到這一點。

所以我的問題是，我應該保留它的方式還是嘗試做點什么呢？ 我目前正在使用帶有少量插件的jquery ，如果我不得不猜測平均文件將是大約50-200行代碼，主要是click事件和ajax調用。

注意，每個頁面對象都有自己的每個類的前綴，例如： home_header ， login_header

因此onClick事件偵聽器和類似的東西之間不應該有任何沖突。

編輯我在這個問題上設置了賞金，我希望聽到更多的意見。

Answer 1

僅僅因為你使用AJAX並不會自動意味着關於內存使用的警鍾...你應該更擔心導致內存泄漏的事情，並確保你破壞以及正確構建事物：

• http://javascript.crockford.com/memory/leak.html
• http://nesj.net/blog/2012/04/javascript-memory-leaks/

• http://www.ibm.com/developerworks/web/library/wa-memleak/

• 什么是JavaScript垃圾收集？

作為一項規則，在任何大型系統中，我傾向於創建一個幫助器構造函數，用於跟蹤我可能希望在以后銷毀的所有項目或者在頁面卸載（事件偵聽器，大型屬性或對象結構）上的所有項目，這些項目都由命名空間編制索引。 然后當我完成一個特定的部分或實體時，我問幫助器系統 - 我稱之為GarbageMonkey :) - 清除特定的命名空間。

1. 對於它解開的事件
2. 對於屬性，它取消設置
3. 對於數組/對象，它會掃描和取消設置每個鍵，也可以為子元素執行此操作
4. 對於元素，它會盡可能地刪除和清除內容

顯然，對於上述工作，你需要警惕留下變量，可以保留對你希望刪除的數據的引用。 所以這意味着要知道什么是垃圾收集 ，什么是關閉 ; 他們之間如何保持變量永遠活着!! ..或至少在瀏覽器/選項卡被銷毀之前。 它還意味着使用對象結構而不是變量，因為您可以刪除任何可以訪問該對象的范圍中的鍵，但是您不能對變量進行刪除。

這樣做：

var data = {}, methods = {}, events = {};

methods.aTestMethod = function(){
  /// by assigning properties to an object, you can easily remove them later
  data.value1 = 123;
  data.value2 = 456;
  data.value3 = 789;
}

而不是這個：

var value1, value2, value3;

var aTestMethod = function(){
  value1 = 123;
  value2 = 456;
  value3 = 789;
}

原因是因為在上面你可以稍后這樣做：

var i;
for( i in methods ){ delete methods[i]; }
for( i in data ){ delete data[i]; }

但你不能這樣做：

delete value1;
delete value2;
delete value3;

現在顯然上面的內容不會保護您免受直接指向methods或data的子元素的引用。 但是如果你只在代碼中傳遞methods和data對象，並且在將方法作為事件監聽器附加方面保持整潔，那么即使你最終得到一個流氓引用它也應該只指向一個空對象（在你之后）我刪除了它的內容 。

Answer 2

如果您回收變量並且不污染全局范圍，那么您就處於正確的軌道上; 但至於你的問題，你應該首先找出它是否是一個實際問題。

這可以通過分析器進行檢查和監控 - 開箱即用Chrome非常不錯 ，只需在URL中鍵入about:memory ，它就會為您提供每個標簽的細分，甚至可以讓您比較內存使用情況瀏覽器之間。 如果您設置了一些自動化測試方案（或者願意手動瀏覽100頁），則此類概要分析將告訴您網站是否存在嚴重錯誤。

Answer 3

有兩種不同的需要照顧：

-內存使用情況

- 記憶泄漏

對於長時間運行的webapps，應該絕對避免內存泄漏，否則用戶將遇到瀏覽器崩潰。 要監視內存使用情況，可以下載進程資源管理器： http ： //technet.microsoft.com/en-us/sysinternals/bb896653.aspx

禁用所有瀏覽器插件，然后使用您的應用程序，並執行重復性任務。 如果內存使用增加，則會出現泄漏。 IE7 - IE8確實比現代瀏覽器更容易泄漏，而且調試起來要困難得多，所以知道什么是最小的瀏覽器兼容性很有用。

對於內存使用，一些東西可以幫助減輕您的應用程序的重量：

• 而不是循環遍歷dom元素並附加事件處理程序函數，使用事件委托。 ED在這里真的是一把金槍。

• 對於IE 7/8 var無效是必要的，我認為它仍然有助於現代瀏覽器（需要一些測試）。 為此，您還需要命名您的函數，以便可以從內存中刪除它們。 （有關詳細信息，請參閱pebbl答案）

• 控制dom大小。 為功能添加節點時，如果不再使用此功能，也應刪除它們。

• 向所有組件添加一些處理卸載的teardown（）方法。

好的，對不起，我在這里有點太快了，但是很高興知道：

1. 什么是你的最低瀏覽器

2. 如果你檢測到泄漏

3. 如果ED是一個充分的解決方案（通常是）