Javascript内存使用管理

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

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

目前,我的网站没有那么多页面,但我相信它将在未来某个时候增长到将近100页。

那么计算机速度较慢的用户会发生什么情况? 我猜它会开始减速很多,因为不会刷新。 从我读过的内容来看,不可能以任何简单的方式从加载的脚本文件中卸载所有的事件和数据,而且如果我尝试这样做,可能会花费我很多时间和精力来做到这一点。

所以我的问题是,我应该按照它的方式离开它,还是试着去做一些事情? 我目前正在使用几乎没有插件的jquery ,如果我不得不猜测平均文件大约是50-200行代码,主要是click事件和ajax调用。

请注意,每个页面对象都有自己的每个类的前缀,例如: home_headerlogin_header

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

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


仅仅因为你使用的是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 :)来清除特定的命名空间。

  • 对于它未解决的事件
  • 对于它未设置的属性
  • 对于数组/对象,它扫描并取消设置每个键,并且也可以为子元素执行此操作
  • 对于元素,它尽可能地删除和清除内容
  • 显然,对于上面的工作,你需要谨慎对待留下的变量,以保持对希望删除的数据的引用。 所以这意味着意识到垃圾收集是什么,封闭是什么; 以及他们之间如何保持一个变量永远活着! ..或至少直到浏览器/标签被销毁。 它还意味着使用对象结构而不是变量,因为您可以删除任何有权访问该对象的作用域中的键,但对于变量不能这样做。

    所以这样做:

    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;
    

    现在很明显,上述内容不会保护您直接指向methodsdata的子元素的引用。 但是,如果只传递代码中的methodsdata对象,并将方法作为事件监听器保持整洁,那么即使你最终得到一个流氓引用,它也应该只指向一个空对象(在'已经删除了它的内容)。


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

    这可以使用探查器进行检查和监控 - 现成的Chrome浏览器非常体面,只需在URL中键入about:memory ,它会为您提供每个选项卡的详细信息,甚至可以让您比较内存使用情况在浏览器之间。 如果您设置了一些自动测试方案(或者愿意手动浏览100页),则此类分析将告诉您网站是否存在重大错误。


    有两件不同的事情需要照顾:

    -内存使用情况

    - 内存泄漏

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

    禁用所有的浏览器插件,然后使用你的应用程序,并执行重复的任务。 如果内存使用增加,则会导致泄漏。 IE7 - IE8确实比现代浏览器更容易泄漏,而且更难以调试,因此了解您最小化浏览器兼容性非常有用。

    对于内存使用情况,有几件事可以帮助减少应用程序的重量:

  • 而不是通过dom元素循环和附加事件处理函数,使用事件委托。 ED在这里真是一把金色的枪。

  • 对于IE 7/8 var varification有必要,我认为它仍然有助于现代浏览器(需要一些测试)。 为此,您还需要命名您的功能,以便您可以从内存中删除它们。 (有关这方面的更多详细信息,请参阅pebbl答案)

  • 保持对dom大小的控制。 当为某个功能添加节点时,如果此功能不再使用,也应该删除它们。

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

  • 好吧,对不起,我在这里有点太快,但很高兴知道:

  • 什么是您的最低浏览器

  • 如果你发现泄漏

  • 如果ED是一个充分的解决方案(通常是)

  • 链接地址: http://www.djcxy.com/p/27179.html

    上一篇: Javascript memory usage management

    下一篇: Destroying sprites in Phaser