前端项目查看是否有内存泄漏的情况
在项目运行中,有时会遇到这样的问题,项目运行时间长了,速度就越来越慢,最后导致页面崩溃。这个时候就需要查看是否有内存泄漏的情况了。
怎么查看呢?这里我推荐一种办法,使用chrome devTools 的Performance来检测内存。
使用过程是这样的:
-
打开谷歌浏览器,并且打开F12, 选人对应内容
-
在操作页面前,点击最右侧垃圾箱按钮,然后点击最左边开始按钮
-
操作页面
-
操作页面结束后, 点击 stop会有如下内容
蓝色的Heap 就是内存。可以看到下面对应颜色的线是波浪型的, 说明,内存在增值然后减小再增长,再减小的过程。
如果是有内存泄漏的情况,增长的线将会是一致增长的曲线
在使用vue 的时候 要注意几种常见的容易导致内存泄漏的场景
- 被全局变量,函数引用,组件销毁时未清除
- 被全局时间,定时器引用,组件销毁时未清除
export default {
data() {
return {
arr: [10,20,30]
}
},
methods: {
printArr() {
console.log(this.arr)
}
},
mounted() {
this.timerId = setTimeout(() => {
this.printArr()
},200)
},
// vue2 -- beforeDestroy
beforeUnmount() {
if (this.timerId) {
clearTimeout(this.timerId)
}
}
}
- 被自定义事件引用,组件销毁时未清除
export default {
data() {
return {
arr: [10,20,30]
}
},
methods: {
printArr() {
console.log(this.arr)
}
},
mounted() {
window.addEventListener('resize', this.printArr)
},
// vue2 -- beforeDestroy
beforeUnmount() {
window.removeEventListener('resize', this.printArr)
}
}
这里要注意在监听事件中的函数不能直接写函数, 要不然不能取消监听。 应该写在methods 中。用函数名。这样监听和取消监听就是一个函数了. 自定义事件也是如此
这内容不操作听着也头疼
更多面试常考题目以及视频讲解内容在公众hao: 奋斗的刚子
欢迎体验我的小程序