JavaScript避免内存泄露及内存管理技巧


Posted in Javascript onSeptember 05, 2014

本文实例讲述了JavaScript避免内存泄露及内存管理技巧,非常实用。分享给大家供大家参考之用。具体方法如下:

本文内容源自谷歌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即可:

JavaScript避免内存泄露及内存管理技巧

希望本文所述对大家javascript程序设计的学习有所帮助。

Javascript 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
原生JavaScript生成GUID的实现示例
Sep 05 #Javascript
javascript动态控制服务器控件实例
Sep 05 #Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 #Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 #Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 #Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 #Javascript
You might like
php checkbox 取值详细说明
2010/08/19 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
谈谈JS中的!!
2017/12/07 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python列表切片操作实例总结
2019/02/19 Python
django框架forms组件用法实例详解
2019/12/10 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
表演方阵解说词
2014/02/08 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
民政局个人整改措施
2014/09/24 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
教师个人事迹材料
2014/12/17 职场文书
优秀党员个人总结
2015/02/14 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
python如何为list实现find方法
2022/05/30 Python