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是一个充分的解决方案（通常是）