如何通過JavaScript Web應用程序優化RAM內存消耗

Question

我有JavaScript Web應用程序異常地消耗RAM超過4GB的內存，當我啓動應用程序最初內存消耗將700至800MB，同時做任何應用程序的任何操作時間更長立即內存消耗就會猛增。 什麼可能是它的根本原因，我怎麼能讓我的應用程序消耗400到500MB的內存。

Answer 1

回答你的問題是不可能的，它是廣泛的，我們不知道你的代碼（我們不會因爲顯而易見的原因而全部閱讀）。但我想你應該閱讀這篇關於Google Chrome瀏覽器開發者網站上javascript優化的文章。

您應該分析哪些函數使用最多內存，並指出問題以找出可能的內存泄漏和/或優化代碼。

https://developers.google.com/speed/articles/optimizing-javascript

優化JavaScript代碼

作者：高利·貝克，在Gmail &埃裏克·阿維德森軟件工程師，谷歌瀏覽器 軟件工程師

推薦體驗：JavaScript的

的工作知識

客戶端腳本可以使您的應用程序動態並且活動，但是瀏覽器對此代碼的解釋本身可能會導致效率低下，並且不同構造的性能在客戶端與客戶端之間變化爲 。在這裏我們討論一些技巧和最佳實踐 來優化您的JavaScript代碼。

定義類方法

以下是低效率的，因爲每一個時間baz.Bar的實例是被構造 ，一個新的功能和封閉件foo的創建：

baz.Bar =（）的函數{//構造函數體this.foo = function（）{ // method body}; }首選的方法是：

baz.Bar = function（）{// constructor body};

baz.Bar.prototype.foo = function（）{// method body};通過這種方法，無論構建了多少個baz.Bar實例， 只爲foo創建了一個函數，並且沒有創建關閉 。

初始化實例變量

地點實例變量聲明/對樣機 用於與值型實例變量（而不是引用類型） 初始化值初始化（即，類型號，布爾值，空， 值未定義，或字符串）。這樣可以避免每次調用構造函數時不必要地運行初始化代碼 。 （對於初始值取決於構造函數的參數 或實例 構造時的某些其他狀態的實例變量，不能執行 。）

代替例如，：

foo.Bar =函數（）{this.prop1_ = 4; this.prop2_ = true;
this.prop3_ = []; this.prop4_ ='blah'; };使用：

foo.Bar = function（）{this.prop3_ = []; };

foo.Bar.prototype.prop1_ = 4;

foo.Bar.prototype.prop2_ = true;

foo.Bar.prototype.prop4_ ='blah';通過關閉避免陷阱

閉包是JavaScript的一個強大且有用的功能;然而，它們有幾個缺點，其中包括：

它們是最常見的內存泄漏源。創建閉包的速度比創建沒有閉合的內部函數慢得多，比重用靜態函數慢得多。例如：

function setupAlertTimeout（）{var msg ='消息到警報'; window.setTimeout（function（）{alert（msg）;}，100）;函數setupAlertTimeout（）{window.setTimeout（function（）{ ）var msg ='消息到警報'; alert（msg）;}，100）;} }這比下面的要慢：

function alertMsg（）{var msg ='Message to alert';警報（MSG）; }

function setupAlertTimeout（）{window.setTimeout（alertMsg，100）; } 他們添加一個級別的範圍鏈。當瀏覽器解析 屬性時，必須檢查作用域鏈的每個級別。在 下面的示例中：

var a ='a';

function createFunctionWithClosure（）{var b ='b';返回 function（）{ var c ='c'; a; b; c; }; }

var f = createFunctionWithClosure（）; F（）;當調用f時，引用a的 比引用b慢，這比引用c的 慢。請參閱IE + JScript性能建議第3部分： 關於何時使用IE關閉 的信息，JavaScript代碼效率低下。

避免與

避免在您的代碼中使用。它對 的性能有負面影響，因爲它修改了範圍鏈，使得在其他範圍內查找變量更加昂貴。

避免瀏覽器的內存泄漏

內存泄漏是與Web應用的一個很常見的問題，並且可以 導致巨大的性能命中。隨着 瀏覽器的內存使用量不斷增長，您的Web應用程序以及用戶的其餘用戶的系統速度會變慢。 Web應用程序 最常見的內存泄漏涉及JavaScript腳本引擎和實現DOM的瀏覽器「C++對象」（例如，在腳本引擎的 之間，JavaScript腳本引擎和Internet Explorer的COM基礎結構， 之間或JavaScript引擎和Firefox之間的循環引用XPCOM基礎設施）。

下面是一些經驗法則以避免內存泄漏：

使用事件系統用於連接的事件處理程序

最常見的圓形基準圖案[DOM元素 - >事件處理程序 - >閉合範圍 - > DOM]元素在此MSDN 博客文章中討論。爲避免此問題，請使用經過良好測試的事件 系統之一來附加事件處理程序，例如Google doctype， Dojo或JQuery中的事件處理程序。

此外，使用內聯事件處理程序可能會導致另一種 在IE中泄漏。這不是常見的循環引用類型泄漏，但 相當於內部臨時匿名腳本對象的泄漏。有關 的詳細信息，請參閱此JavaScript套件教程中的 瞭解和解決Internet Explorer泄漏模式以及 示例中的「DOM插入順序泄漏模型」部分。

避免expando屬性

expando屬性是對DOM元素 任意JavaScript性質，並且是圓形的引用的公共源極。你可以使用expando 屬性而不引入內存泄漏，但是很容易導致一個意外。這裏的泄漏模式是[DOM element - > via expando - > intermediary object - > DOM element]。 要做的最好的事情就是避免使用它們。如果確實使用它們，則只能使用具有原始類型的值 。如果確實使用非原始值，則在不再需要expando屬性時將其取消。有關理解和解決Internet Explorer 泄漏模式，請參見 「循環引用」部分。