容易造成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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
用javascript实现倒计时效果
Feb 09 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
PHP 防注入函数(格式化数据)
2011/08/08 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JavaScript闭包详解
2015/02/02 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
Python构建XML树结构的方法示例
2017/06/30 Python
Python标准库sched模块使用指南
2017/07/06 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
10个示例带你掌握python中的元组
2020/11/23 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
适用于所有创业者的创业计划书
2014/02/05 职场文书
开业庆典主持词
2014/03/21 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
Linux中各个目录的作用与内容
2022/06/28 Servers