Question

我正在使用大量的javascript使用构建大型网站，我的所有内容都通过ajax加载，它与facebook非常相似，并且因为有很多不同的页面我需要大量的javascript，所以我想到的是将我的脚本分成几个部分，每个页面都有它自己的脚本文件。

现在加载很简单，我只是为每个页面加载一个新文件，但我担心如果用户通过100个不同的页面加载100个不同的脚本文件会发生什么？

目前我的网站没有那么多页面，但我确信它将来会在某个时候发展到近100个独特页面。

那么计算机速度较慢的用户会怎么样？我猜它会开始放慢很多，因为没有刷新。根据我的阅读，不可能以任何简单的方式从加载的脚本文件中卸载所有事件和数据，如果我尝试这样做可能会花费我很多时间和精力去做。

所以我的问题是，我应该保留它的方式还是尝试做点什么呢？我目前正在使用jquery插件很少，如果我不得不猜测平均文件大约有50到200行代码，主要是click个事件和ajax个调用。

注意，每个页面对象都有自己的每个类的前缀，例如：home_header，login_header

因此，onClick事件监听器与类似事件之间不应存在任何冲突。

编辑我在这个问题上设置了赏金，我希望听到更多意见。

Answer 1

仅仅因为你使用AJAX并不会自动意味着关于内存使用的警钟...你应该更担心导致内存泄漏的事情，并确保你破坏以及正确构建事物：

作为一项规则，在任何大型系统中，我倾向于创建一个帮助器构造函数，用于跟踪我可能希望在以后销毁的所有项目或在页面上卸载（事件侦听器，大型属性或对象结构））全部由命名空间索引。然后，当我完成一个特定的部分或实体时，我问帮助器系统 - 我称之为GarbageMonkey :) - 清除特定的命名空间。

对于取消绑定的事件
对于取消设置的属性
对于数组/对象，它会扫描和取消设置每个键，也可以为子元素执行此操作
对于元素，它会尽可能地删除和清理内容

显然，对于上述工作，你需要警惕留下可以保留对你希望删除的数据的引用的变量。这意味着要了解garbage collection是什么，closures是什么;他们之间如何保持变量永远活着!! ..或至少在浏览器/选项卡被销毁之前。它还意味着使用对象结构而不是变量，因为您可以删除任何有权访问该对象的作用域中的键，但是对于变量不能这样做。

这样做：

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

如果您回收变量并且不污染全局范围，那么您就处于正确的轨道上;但至于你的问题，你应该首先找出它是否是一个实际问题。

可以使用分析器out-of-the box Chrome is pretty decent for it检查和监控，只需在网址中输入about:memory，它就会为您提供每个标签的细分，甚至可以让您比较浏览器之间的内存使用情况。如果您设置了一些自动化测试方案（或者愿意手动浏览100页），这样的分析将告诉您网站是否存在严重问题。

Answer 3

有两种不同的需要照顾：

-memory usage

-memory泄漏

对于长时间运行的webapps，应该绝对避免内存泄漏，否则用户将遇到浏览器崩溃。要监视内存使用情况，您可以下载进程资源管理器： http://technet.microsoft.com/en-us/sysinternals/bb896653.aspx

禁用所有浏览器插件，然后使用您的应用，并执行重复性任务。如果内存使用增加，则会出现泄漏。 IE7 - IE8确实比现代浏览器更容易泄漏，而且调试起来要困难得多，所以知道什么是最小的浏览器兼容性很有用。

对于内存使用，有一些方法可以帮助减轻应用的重量：

使用事件委托，而不是循环遍历dom元素并附加事件处理程序函数。 ED在这里真的是一把金枪。
对于IE 7/8 var null化是必要的，我认为它仍然有助于现代浏览器（需要一些测试）。为此，您还需要命名您的函数，以便可以从内存中删除它们。（有关详细信息，请参阅pebbl答案）
保持对dom大小的控制。为功能添加节点时，如果不再使用此功能，也应删除它们。
为所有组件添加一些处理卸载的teardown（）方法。

好的，对不起我在这里有点太快了，但是很高兴知道：

您的最低浏览量是什么
如果您检测到泄漏
如果ED是一个充分的解决方案（通常是）

Javascript内存使用管理

3 个答案: