14

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

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

目前我的网站没有那么多页面，但我很确定它会在未来某个时候增长到近 100 个独特的页面。

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

所以我的问题是，我应该保持原样还是尝试做点什么？我目前使用jquery的插件很少，如果我不得不猜测平均文件将是大约 50-200 行代码，其中大部分是click事件和ajax调用。

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

onClick所以事件监听器和类似的东西之间不应该有任何冲突。

编辑我在这个问题上设置赏金，我想听听更多的意见。

4

3 回答 3

7

仅仅因为您使用 AJAX 并不意味着就内存使用敲响了警钟……您应该更担心导致内存泄漏的事物，并确保正确地破坏和构造事物：

通常，在任何大型系统中，我倾向于创建一个辅助构造函数来跟踪我可能希望在以后销毁或在页面卸载时销毁的所有项目（事件侦听器、大型属性或对象结构），所有这些项目都由命名空间索引. 然后，当我完成了一个特定的部分或实体时，我会要求帮助系统——我称之为 GarbageMonkey :)——清除一个特定的命名空间。

  1. 对于事件它解除绑定
  2. 对于它未设置的属性
  3. 对于数组/对象，它会扫描并取消设置每个键，也可以对子元素这样做
  4. 对于元素，它会尽可能地删除和清理内容

显然，要使上述方法起作用，您需要小心不要留下变量，这些变量可以保留对您希望删除的数据的引用。所以这意味着要知道什么是垃圾收集，什么是闭包；以及它们之间如何使变量永远存在！..或者至少在浏览器/标签被破坏之前。这也意味着使用对象结构而不是 vars，因为您可以删除任何有权访问该对象的范围内的键，但您不能对 vars 这样做。

所以这样做：

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;

现在显然上述内容不会保护您免受直接指向methodsor的子元素的引用data。但是，如果您只在代码中传递methodsanddata对象，并且在将方法附加为事件侦听器方面保持整洁，那么即使您最终得到一个流氓引用，它也应该只指向一个空对象（在您删除之后它的内容是）。

于 2012-10-10T10:59:47.777 回答
6

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

这可以使用分析器进行检查和监控 -开箱即用的 Chrome 非常适合它，只需输入about:memoryURL，它就会为您提供每个选项卡的细分，甚至可以让您比较浏览器之间的内存使用情况。如果您设置了一些自动化测试场景（或愿意手动浏览 100 个页面），则此类分析将告诉您您的网站是否存在重大问题。

于 2012-10-07T23:57:48.813 回答
2

有 2 件不同的事情需要照顾：

-内存使用情况

-内存泄漏

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

禁用所有浏览器插件，然后使用您的应用程序并执行重复性任务。如果内存使用量增加，就会出现泄漏。IE7 - IE8 确实比现代浏览器更容易泄漏，并且更难调试，因此了解什么是最小化浏览器兼容性很有用。

对于内存使用，有几件事可以帮助减轻应用程序的重量：

  • 与其循环遍历 dom 元素并附加事件处理函数，不如使用事件委托。ED在这里真的是一把金枪。

  • 对于 IE 7 / 8 var 无效化是必要的，我认为它仍然有助于现代浏览器（需要一些测试）。为此，您还需要命名您的函数，以便您可以将它们从内存中删除。（有关更多详细信息，请参见 pebbl 答案）

  • 保持对dom大小的控制。当为一个特性添加节点时，当这个特性不再使用时，它们也应该被删除。

  • 向所有组件添加一些处理卸载的 teardown() 方法。

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

  1. 你的最低浏览器是什么

  2. 如果您检测到泄漏

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

于 2012-10-10T14:31:37.193 回答