JS造成内存泄漏的几种情况实例分析


Posted in Javascript onMarch 02, 2020

本文实例讲述了JS造成内存泄漏的几种情况。分享给大家供大家参考,具体如下:

介绍:

js中的内存垃圾回收机制:垃圾回收器会定期扫描内存,当某个内存中的值被引用为零时就会将其回收。当前变量已经使用完毕但依然被引用,导致垃圾回收器无法回收这就造成了内存泄漏。传统页面每次跳转都会释放内存,所以并不是特别明显。

Vue单页面应用中:Web App 与 传统Web的区别,因为Web App是单页面应用页面通过路由跳转不会刷新页面,导致内存泄漏不断堆积,导致页面卡顿。

泄漏点:

1.DOM/BOM 对象泄漏
2.script 中存在对DOM/BOM 对象的引用导致
3.Javascript 对象泄漏
4.通常由闭包导致,比如事件处理回调,导致DOM对象和脚本中对象双向引用,这个时常见的泄漏原因

代码关注点:

1.DOM中的addEventLisner 函数及派生的事件监听, 比如Jquery 中的on 函数, vue 组件实例的 $on 函数,第三方库中的初始化函数
2.其它BOM对象的事件监听, 比如websocket 实例的on 函数
3.避免不必要的函数引用
4.如果使用render 函数,避免在html标签中绑定DOM/BOM 事件

Vue如何处理:

1.如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件,需要在beforeDestroy 中做对应解绑处理
2.如果在mounted/created 钩子中使用了第三方库初始化,需要在beforeDestroy 中做对应销毁处理
3.如果组件中使用了定时器,需要在beforeDestroy 中做对应销毁处理
4.模板中不要使用表达式来绑定到特定的处理函数,这个逻辑应该放在处理函数中?
5.如果在mounted/created 钩子中使用了$on,需要在beforeDestroy 中做对应解绑($off)处理
6.某些组件在模板中使用 事件绑定可能会出现泄漏,使用$on 替换模板中的绑定

Vue官网讲解避免内存泄露https://cn.vuejs.org/v2/cookbook/avoiding-memory-leaks.html

另外,vue  在IE edge浏览器下,父子组件的场景,子组件依赖父组件的状态,子组件控制父组件状态变化从而反馈给子组件的展示变化,子组件通过v-if模式存在于视图中,父组件通过状态控制子组件的v-if状态变换。子组件控制父组件状态完成子组件数据填充后,父组件切换子组件的v-if状态,子组件占用dom结构被清理。此时,子组件存在时的内存占用未被释放,当父组件再次回切v-if状态时,子组件重新展示,内存飙升,重复几次切换后,内存飙升明显,页面卡顿。

js通常内存泄漏的几种情况的介绍

1.闭包

function fn1(){
  var n=1;
}
//我想取到里面的局部变量n
function fn1(){
  var n=1;
  function fn2(){//在加一个fn2当他的子集
    alert(n);
  }
 
}

但是我在外面还是访问不到那就return出来 

function fn1(){
  var n=1;
  function fn2(){//在加一个fn2当他的子集
    alert(n);
  }
return fn2(); 
//return出来后 他就给 window了所以一直存在内存中。因为一直在内存中,在IE里容易造成内存泄漏
}
fn1();

尽量书写的时候,避免这种情况。 

2.意外的全局变量 

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

function foo(arg) {
  bar = "aaaaa";
}
 
实际上等价于
function foo(arg) {
  window.bar = "aaaaa";
}
function foo() {
  this.variable = "qqqqq";
}
//this 指向全局对象(window)
foo();

 为了防止这种错误的发生,可以在你的 JavaScript 文件开头添加 'use strict'; 语句

3.定时器setTimeout setInterval

当不需要setInterval或者setTimeout时,定时器没有被clear,定时器的回调函数以及内部依赖的变量都不能被回收,造成内存泄漏。比如:vue使用了定时器,需要在beforeDestroy 中做对应销毁处理。js也是一样的。

clearTimeout(***)
clearInterval(***)

4.如果在mounted/created 钩子中使用了$on,需要在beforeDestroy 中做对应解绑($off)处理

beforeDestroy() {
 this.bus.$off('****');
}

5、给DOM对象添加的属性是一个对象的引用

var testObject = {}; 
document.getElementById('idname').property = testObject; //如果DOM不被消除,则testObject会一直存在,造成内存泄漏

解决方法:

在window.onunload事件中写上:

window.onunload=function(){
  document.getElementById('idname').property = null;     //释放内存
};

6.DOM对象与JS对象相互引用

function testObject(element) { 
this.elementReference = element;   // 为testObject(js)对象的属性绑定element(DOM)对象
element.property = this;    // 为element(DOM)对象的属性绑定testObject(js)对象
} 
new testObject(document.getElementById('idname'));

解决方法:

在window.onunload事件中写上:

document.getElementById('idname').property = null;

7.从外到内执行appendChild。这时即使调用removeChild也无法释放

var parentDiv = document.createElement("div"); 
var childDiv = document.createElement("div"); 
document.body.appendChild(parentDiv); 
parentDiv.appendChild(childDiv);

解决方法: 
从内到外执行appendChild: 

var parentDiv = document.createElement("div"); 
var childDiv = document.createElement("div"); 
parentDiv.appendChild(childDiv); 
document.body.appendChild(parentDiv); 

8.反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)

for(i = 0; i < 5000; i++) { 
  hostElement.text = "asdfasdfasdf"; 
}

这种方式相当于定义了5000个属性! 

9.注意程序逻辑,避免“死循环”之类的

10.echarts配合循环计时器等出现的内存泄漏

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
js实现表格筛选功能
Jan 18 Javascript
vue构建单页面应用实战
Apr 10 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
javascript中的this作用域详解
Jul 15 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 #Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 #Javascript
Vue Router的手写实现方法实现
Mar 02 #Javascript
ES6中Set和Map用法实例详解
Mar 02 #Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 #Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 #Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
基于PHP常用函数的用法详解
2013/05/10 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[01:13]这,就是刀塔
2014/07/16 DOTA
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
python pandas修改列属性的方法详解
2018/06/09 Python
对python生成业务报表的实例详解
2019/02/03 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
python GUI计算器的实现
2020/10/09 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
新电JAVA笔试题目
2014/08/31 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
最新离婚协议书范本
2014/08/19 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL