vue单页应用的内存泄露定位和修复问题小结


Posted in Javascript onAugust 02, 2019

在前端项目(PC端)中,内存泄露的定位往往比修复更加困难,即使google浏览器有提供Memory工具,但是面对成千上万的元素和错综复杂的引用关系,开发则依然很难快速定位到问题代码块。

一、什么是内存泄漏?

系统进程不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。当内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。Chrome限制了浏览器所能使用的内存极限(64位为1.4GB,32位为1.0GB),这也就意味着浏览器将无法直接操作一些大内存对象。

V8引擎在执行垃圾回收时会阻塞 JavaScript应用逻辑,直到垃圾回收结束再重新执行JavaScript应用逻辑,这种行为被称为“全停顿”(stop-the-world)。 若V8的堆内存为1.5GB,V8做一次小的垃圾回收需要50ms以上,造成假死现象。

二、JS内存管理和垃圾回收机制GC

高级语言基本都有垃圾回收机制(garbage collection)自动管理内存,降低程序员的负担,以达到解决内存泄漏的目的,但是不允许人为手动触发,无法对内存管理进行任何干预。

老版本的浏览器使用引用计数法(Reference Counting)来管理内存,即每次引用加一,被释放时减一,当这个值的引用次数变成 0 时,就可以将其内存空间回收,缺点是循环引用时无法回收。

现代浏览器基本采用标记清除法(Mark-and-Sweep)来管理内存,即浏览器周期性地从某个根元素(譬如 window 对象)开始找引用变量,及这些变量引用的变量,这样一直找下去。能找到的变量为可获得变量,不能找到的将被内存回收。

vue单页应用的内存泄露定位和修复问题小结

缺点是清除后内存会产生很多细化的分块,所以又衍生了标记-整理法,不细讲。

vue单页应用的内存泄露定位和修复问题小结

三、VUE中容易出现内存泄露的几种情况

内存泄露是一个累积的过程,只有页面生命周期略长的时候才暴露出问题,频繁交互能够加快累积的过程,偏展示的页面很难把这样的问题暴露出来(所谓刷新一下又能满血复活)。所以很多时候我们都是被动式的等待问题暴露然后进行排查的,主动式的分析通常比较难。vue页面大多是单页应用,高交互且停留时间久,处理不好很容易出现内存泄漏。本文章 主要针对游离的dom对象进行排查 ,普通的JS变量排查有时间再补充。

1.全局变量造成的内存泄露

<template>
 <div id="home">
  这里是首页
 </div>
</template>

<script>
export default {
 mounted () {
  window.test = { // 此处在全局window对象中引用了本页面的dom对象
   name: 'home',
   node: document.getElementById('home')
  }
 }
}
</script>

按下Heap snapshots键,搜索Detached,发现没有脱离文档树的dom元素,属于正常现象

vue单页应用的内存泄露定位和修复问题小结

改变路由跳转到other页面,按下Heap snapshots键,搜索Detached,发现有两处dom元素游离于当前页面之外,很明显是window对象引用了home页面中的div,即使此时home页面已经销毁,home中的dom元素却还驻留在内存中无法释放。

vue单页应用的内存泄露定位和修复问题小结

解决方案就是在页面卸载的时候顺便处理掉该引用。

<template>
 <div id="home">
  这里是首页
 </div>
</template>

<script>
export default {
 mounted () {
  window.test = { // 此处在全局window对象中引用了本页面的dom对象
   name: 'home',
   node: document.getElementById('home')
  }
 },
 destroyed () {
  window.test = null // 页面卸载的时候解除引用
 }
}
</script>

2.除了直接引用,window的原生方法也会起到引用dom元素使其无法释放的效果。

<template>
 <div id="home">这里是首页</div>
</template>

<script>
export default {
 mounted () {
  window.addEventListener('resize', this.func) // window对象引用了home页面的方法
 },
 methods: {
  func () {
   console.log('这是home页面的函数')
  }
 }
}
</script>

vue单页应用的内存泄露定位和修复问题小结

 解决方法一样,也是在页面销毁的时候,顺便解除引用,释放内存

mounted () {
  window.addEventListener('resize', this.func)
},
beforeDestroy () {
  window.removeEventListener('resize', this.func)
}

3.一些全局的方法使用不当也会造成内存无法释放,在页面卸载的时候也可以考虑解除引用

<template>
 <div id="home">这里是首页</div>
</template>

<script>
export default {
 mounted () {
  this.$EventBus.$on('homeTask', res => this.func(res))
 },
 methods: {
  func (res) {
   console.log(res)
  }
 }
}
</script>

vue单页应用的内存泄露定位和修复问题小结

mounted () {
 this.$EventBus.$on('homeTask', res => this.func(res))
},
destroyed () {
 this.$EventBus.$off()
}

造成游离dom节点的原因还有很多,不止这三种,总结起来:

1.window对象、事件总线、全局vuex上绑定了已销毁页面上的节点,到时节点不随页面一起销毁

2.使用第三方库创建实例,第三方库一般会提供销毁函数,页面跳转时没有调用正确的销毁函数

3.有同学会说在页面中使用闭包也会造成内存泄露,在vue框架里有管理内存的机制,只要按照它的正确编写方法,理论上是不会造成内存泄露的

总结

以上所述是小编给大家介绍的vue单页应用的内存泄露定位和修复问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
vue回到顶部监听滚动事件详解
Aug 02 #Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 #Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 #Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 #Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 #Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 #Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 #Javascript
You might like
深入PHP数据加密详解
2013/06/18 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
2014年元旦活动方案
2014/02/15 职场文书
演讲稿格式
2014/04/30 职场文书
医院标语大全
2014/06/23 职场文书
物流管理专业推荐信
2014/09/06 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
开平碉楼导游词
2015/02/06 职场文书
工作失职自我检讨书
2015/05/05 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏