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 相关文章推荐
浮动的div自适应居中显示的js代码
Dec 23 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
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实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python调用cmd命令行制作刷博器
2014/01/13 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python类继承和多态原理解析
2020/02/05 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
决定成败的关键——创业计划书
2014/01/24 职场文书
岗位说明书怎么写
2014/07/30 职场文书
放飞理想演讲稿
2014/09/09 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
合作协议书模板
2014/10/10 职场文书
十佳少年事迹材料
2014/12/25 职场文书
厉行节约工作总结
2015/08/12 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js