OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

内存管理技巧:如何避免JavaScript的内存泄露


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1409367842698
注意 转载须保留原文链接,译文链接,作者译者等信息。  
发表于谷歌WebPerf(伦敦WebPerf集团),​​2014年8月26日。 

高效的JavaScript Web应用必须流畅,快速。与用户交互的任何应用程序,都需要考虑如何确保内存有效使用,因为如果消耗过多,页面就会崩溃,迫使用户重新加载。而你只能躲在角落哭泣。

自动垃圾收集是不能代替有效的内存管理的,特别是在大型,长时间运行的Web应用程序中。在这次讲座中,我们将演示如何通过Chrome的DevTools对内存进行有效的管理。 

并了解如何解决性能问题,如内存泄漏,频繁的垃圾收集暂停,和整体内存膨胀,那些真正让你耗费精力的东西。


Addy Osmani在他的PPT中展示了很多会在Chrome V8中产生内存泄漏的示例:

1) Delete一个Object的属性会让此对象变慢(多耗费15倍的内存)


var o = { x: 'y' };
delete o.x; //此时o会成一个慢对象
o.x; //
var o = { x: 'y' };
o = null;  //应该这样

2) 闭包


在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收(GC)。

var a = function() {
  var largeStr = new Array(1000000).join('x');
  return function() {
    return largeStr;
  }
}();

3) DOM泄露


当原有的COM被移除时,子结点引用没有被移除则无法回收。

var select = document.querySelector;
var treeRef = select('#tree');
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf');  
var body = select('body');
body.removeChild(treeRef);
//#tree不能被回收入,因为treeRef还在
//解决方法:
treeRef = null;
//tree还不能被回收,因为叶子结果leafRef还在
leafRef = null;
//现在#tree可以被释放了。

4) Timers计(定)时器泄露


定时器也是常见产生内存泄露的地方:

for (var i = 0; i < 90000; i++) {
  var buggyObject = {
    callAgain: function() {
      var ref = this;
      var val = setTimeout(function() {
        ref.callAgain();
      }, 90000);
    }
  }
  buggyObject.callAgain();
  //虽然你想回收但是timer还在
  buggyObject = null;
}


5) 调试内存


Chrome自带的内存调试工具可以很方便地查看内存使用情况和内存泄露:
在 Timeline -> Memory 点击record即可:






更多内容请查看原PPT。
原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS
  2. 痛苦的Java程序员
  3. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
  4. JavaScript中的继承,构造函数以及new关键字的作用
  5. 微软Azure云推出基于JSON的NoSQL数据库DocumentDB
  6. TJ Holowaychuk将Express维护权移交给StrongLoop
  7. CSS的力量:用一个DIV画图
  8. 前置逗号是不好的JavaScript代码书写习惯吗?
  9. 有可能将CSS应用到一个字符的一半吗?
  10. fibjs 比 nodejs 快五倍
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. JavaScript中匿名函数和命名函数的性能差异
  2. JavaScript中怪异的地方
  3. 前置逗号是不好的JavaScript代码书写习惯吗?
  4. 在node.js响应流中设置多个Set-Cookie header属性
  5. JavaScript:世界上误解最深的语言
  6. 告别Node.js
  7. Node.js手册:require是如何工作的
  8. JavaScript最大堆栈的数量
  9. 7个步骤:让JavaScript变得更好
  10. 在JavaScript数组中找到最小元素的位置

 关键字 - JavaScript
  1. JavaScript中NaN的秘密
  2. decodeURIComponent有个BUG,当浏览器请求地址含%+数字时,会解析错误
  3. JavaScript也有getter/setter方法:ES5 Object对象的5个不为人知的特性
  4. JavaScript中splice与slice的区别、数组的复制以及在指定位置添加删除元素
  5. JavaScrip字符串模板表达式中的反引号怎么打?
  6. Node.JS更改Windows注册表regedit的几种方法
  7. AngularJS在大型单页面应用中的性能优化(二)
  8. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  9. Debian下设置Linux Shell脚本开机自动启动Node.JS进程
  10. Node.JS通过原型和类继承EventEmitter,实现收发事件的几种方法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号