容易造成JavaScript内存泄露几个方面


Posted in Javascript onSeptember 04, 2014

发表于谷歌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。

Javascript 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
require.js深入了解 require.js特性介绍
Sep 04 #Javascript
用console.table()调试javascript
Sep 04 #Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 #Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 #Javascript
jQuery之Deferred对象详解
Sep 04 #Javascript
Javascript Objects详解
Sep 04 #Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 #Javascript
You might like
javascript 小型动画组件与实现代码
2010/06/02 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
Python threading多线程编程实例
2014/09/18 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python实现字符串和数字拼接
2020/03/02 Python
python中取绝对值简单方法总结
2020/07/24 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
广告学专业推荐信范文
2013/11/23 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
期中考试后的反思
2014/02/08 职场文书
汇源肾宝广告词
2014/03/20 职场文书
《悯农》教学反思
2014/04/28 职场文书
特此通知格式
2015/04/27 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
师德培训心得体会2016
2016/01/09 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python