容易造成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 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
php微信开发之关注事件
2018/06/14 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
vue--vuex详解
2019/04/15 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
python和php哪个容易学
2020/06/19 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
学生鉴定评语大全
2014/05/05 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
教师远程培训心得体会
2016/01/09 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
创业计划书之校园超市
2019/09/12 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL