容易造成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 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
如何在微信小程序中存setStorage
Dec 13 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python连接DB2数据库
2016/08/27 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
python TCP包注入方式
2020/05/05 Python
python线性插值解析
2020/07/05 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Python 忽略文件名编码的方法
2020/08/01 Python
python函数超时自动退出的实操方法
2020/12/28 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
thinkphp5 路由分发原理
2021/03/18 PHP
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
物业保安员岗位职责制度
2014/01/30 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
大学班长竞选稿
2015/11/20 职场文书