JS常见内存泄漏及解决方案解析


Posted in Javascript onMay 30, 2020

内存泄漏?

官方解释:内存泄漏(Memory Leak)是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。

通俗点就是指由于疏忽或者错误造成程序未能释放已经不再使用的内存,不再用到的内存却没有及时释放,从而造成内存上的浪费。

避免内存泄漏?

在局部作用域中,等函数执行完毕,变量就没有存在的必要了,垃圾回收机制很亏地做出判断并且回收,但是对于全局变量,很难判断什么时候不用这些变量,无法正常回收;所以,尽量少使用全局变量。在使用闭包的时候,就会造成严重的内存泄漏,因为闭包中的局部变量,会一直保存在内存中。

内存溢出?

当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误。
例如下面的代码,谨慎试用,可能会卡窗口。。。。

var obj = {}
for (var i = 0; i < 100000; i++) {
obj[i] = new Array(10000000)
}
console.log('------')

常见的js内存泄漏

1. 意外的全局变量

在js中,一个未声明变量的使用,会在全局对象中创建一个新的变量;在浏览器环境下,全局对象就是window:

function foo() {
a = 'test'
}
// 上面的写法等价于
function foo() {
window.a = 'test'
}
function foo() {
this.a = 'test'
// 函数自身发生调用,this指向全局对象window
}
foo();

上面的a变量应该是foo()内部作用域变量的引用,由于没有使用var来声明这个变量,这时变量a就被创建成了全局变量,这个就是错误的,会导致内存泄漏。

解决方式: 在js文件开头添加 ‘use strict',开启严格模式。(或者一般将使用过后的全局变量设置为 null 或者将它重新赋值,这个会涉及的缓存的问题,需要注意)

<script> 
"use strict"; 
console.log("这是严格模式。"); 
</script> 
<script> 
 console.log("这是正常模式。"); 
</script>

2. 计时器和回调函数timers

定时器setInterval或者setTimeout在不需要使用的时候,没有被clear,导致定时器的回调函数及其内部依赖的变量都不能被回收,这就会造成内存泄漏。

解决方式:当不需要interval或者timeout的时候,调用clearInterval或者clearTimeout

3. DOM泄漏

1)给DOM对象添加的属性是一个对象的引用

var a = {};
document.getElementById('id').diyProp = a;

解决方法:在window.onload时间中加上 document.getElementById('id').diyProp = null;

2)元素引用没有清理

var a = document.getElementById('id');
document.body.removeChild(a);
// 不能回收,因为存在变量a对它的引用。虽然我们用removeChild移除了,但是还在对象里保存着#的引用,即DOM元素还在内存里面。

解决方法: a = null;

3)事件的绑定没有移除

解决方法: 移除时间的监听

4. js闭包

闭包在IE6下会造成内存泄漏,但是现在已经无须考虑了。值得注意的是闭包本身不会造成内存泄漏,但闭包过多很容易导致内存泄漏。闭包会造成对象引用的生命周期脱离当前函数的上下文,如果闭包如果使用不当,可以导致环形引用(circular reference),类似于死锁,只能避免,无法发生之后解决,即使有垃圾回收也还是会内存泄露。

这个,另外找个时间详细说明一下,这里就不赘述了

5. console

控制台日志记录对总体内存内置文件的影响,也是个重大的问题,同时也是容易被忽略的。记录错误的对象,可以将大量的数据保留在内存中。传递给console.log的对象是不能被垃圾回收,所以没有去掉console.log可能会存在内存泄漏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
js select实现省市区联动选择
Apr 17 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
vue页面跳转实现页面缓存操作
Jul 22 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
react结合bootstrap实现评论功能
May 30 #Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
JavaScript类的继承多种实现方法
May 30 #Javascript
Vue实现购物车实例代码两则
May 30 #Javascript
vue实现购物车案例
May 30 #Javascript
vue.js实现简单购物车功能
May 30 #Javascript
vue实现简单学生信息管理
May 30 #Javascript
You might like
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
JS查看对象功能代码
2008/04/25 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
详解webpack babel的配置
2018/01/09 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
express.js中间件说明详解
2019/03/19 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python中的getopt函数使用详解
2015/07/28 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
保护环境演讲稿
2014/05/10 职场文书
交通事故案件代理词
2015/05/23 职场文书
环境卫生整治简报
2015/07/20 职场文书
Python django中如何使用restful框架
2021/06/23 Python