1 / 11
文档名称:

前端常见内存泄漏及解决方案 (2).docx

格式:docx   大小:118KB   页数:11页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

前端常见内存泄漏及解决方案 (2).docx

上传人:科技星球 2022/3/11 文件大小:118 KB

下载得到文件列表

前端常见内存泄漏及解决方案 (2).docx

文档介绍

文档介绍:【Web技术】849-前端常见内存泄漏及解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
作者:lzg9527 dom。
removeEventListener 移除事件监听
vue 中容易出现内存泄露的几种情况
在 Vue SPA 开发应用,那么就更要当心内存泄漏的问题。因为在 SPA 的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。因此开发过程中,你需要时刻警惕内存泄漏的问题。
全局变量造成的内存泄露
声明的全局变量在切换页面的时候没有清空
<template>
<div id="home">这里是首页</div>
</template>
<script>
export default {
mounted() {
= {
// 此处在全局window对象中引用了本页面的dom对象
name: 'home',
node: ('home'),
}
},
}
</script>
解决方案:在页面卸载的时候顺便处理掉该引用。
destroyed () {
= null // 页面卸载的时候解除引用
}
监听在 window/body 等事件没有解绑
特别注意 之类的时间监听
<template>
<div id="home">这里是首页</div>
</template>
<script>
export default {
mounted () {
('resize', ) // window对象引用了home页面的方法
}
}
</script>
解决方法:在页面销毁的时候,顺便解除引用,释放内存
mounted () {
('resize', )
},
beforeDestroy () {
('resize', )
}
绑在 EventBus 的事件没有解绑
举个例子
<template>
<div id="home">这里是首页</div>
</template>
<script>
export default {
mounted () {
this.$EventBus.$on('homeTask', res => (res))
}
}
</script>
解决方法:在页面卸载的时候也可以考虑解除引用
mounted () {
this.$EventBus.$on('homeTask', res => (res))
},
destroyed () {
this.$EventBus.$off()
}
Echarts
每一个图例在没有数据的时候它会创建一个定时器去渲染气泡,页面切换后,echarts 图例是销毁了,但是这个 echarts 的实例还在内存当中,同时它的气泡渲染定时器还在运行。这就导致 Echarts 占用 CPU 高,导致浏览器卡顿,当数据量比较大时甚至浏览器崩溃。
解决方法:加一个 beforeDestroy()方法释放该页面的 chart 资源,我也试过使用 dispose()方法,但是 dispose 销毁这个图例,图例是不存在了,但图例的 resize()方法会启动,则会报没有 resize 这个方法,而 clear()方法则是清空图例数据,不影响图例的 resize,而且能够释放内存,切换的时候就很顺畅了。
beforeDestroy () {
()
}
v-if 指令产生的内存泄露
v-if 绑定到 false 的值,但是实际上 dom 元素在隐藏的时候没有被真实的释放掉。
比如下面的示例中,我们加载了一个带有非常多选项的选择框,然后我们用到了一个显示/隐藏按钮,通过一个 v-if 指令从虚拟 DOM 中添加或移除它。这个示例的问题在于这个 v-if 指令会从 DOM 中移除父级元素,但是我们并没有清除由 C

最近更新

二零二五年度农村房屋买卖协议书(含土地租赁.. 9页

二零二五年度体育赛事广告策划与赞助合作合同.. 9页

二零二五年度临时工劳动权益保障合同 7页

乡村道路改造土石运输合同 9页

2025年模具制造企业模具回购及市场推广协议 9页

2025年度餐饮业数字化转型合伙经营合同 8页

2025年度金融单位安全保卫服务期协议 9页

2025年度跨区域银行资金监管合作框架协议 8页

2025年度苗木仓储物流与配送服务合同 10页

2025年度老旧工业厂房改造工程款结清与产业升.. 9页

2025年度绿植花卉租赁与室内空气净化服务合同.. 11页

2025年度砖厂劳务承包及环保风险评估合同 9页

金融案例分析-联想收购IBM 32页

2025年度海洋资源监控施工与技术支持合同 10页

2025年度森林药材种植基地土地承包经营协议 8页

2025年度文化产业产权转让与市场推广合同 9页

抗结核药物肝损伤的预防与治疗 54页

2025年度应急安全设施承揽合同样本 9页

2025年度家电产品安装与智能化家居解决方案承.. 9页

2025年度安全防护培训与安全宣传教育合同 9页

2025年度大型宴会厨师劳务保障合同 8页

2025年度地下车库车位使用权附带车位预约管理.. 9页

2025年度商业综合体物业运维保障协议 9页

2025年度北京市房屋租赁合同电子版(含租赁纠.. 8页

2025年度养老院与医院合作开展慢性病管理服务.. 9页

最新个体工商户雇佣合同样本 6页

2025年度企业员工晋升与发展人事合同与劳动合.. 9页

2025年度五星级酒店承包经营合作协议书 9页

易燃易爆物品运输合同样本 6页

施工项目安全管理合同模板 6页