排查内存泄露

1 通过Performance确认是否存在内存泄露

一个存在内存泄露的 DEMO 代码：

App.vue

<template><div><button @click="myFn" style="width: 200px; height: 200px;"></button><home v-if="ishow"></home></div>
</template>export default {components: {Home},data() {return {ishow: true}},methods: {myFn(){this.ishow = !this.ishow;}}
}

home .vue

<template><div><div>about</div><div>about</div><div>about</div><div>about</div><div>about</div></div>
</template>
<script>
export default {created() {setInterval(() => {this.$data.test += 1}, 100)setInterval(() => {this.$data.test += 1}, 100)setInterval(() => {this.$data.test += 1}, 100)setInterval(() => {this.$data.test += 1}, 100)},destroyed() {console.log('About destroyed')},
}
</script>

home 组件中，每次打开就会开启 setInterval ，并且没有销毁，会造成内存泄露
App 页面通过点击按钮，实现 home 组件的显示隐藏

点击录制按钮后，开始操作页面
连续点击很多次按钮，home 组件就会开启很多setInterval
点击 stop，结束录制

勾选Memory，会出现表示内存占用的折线图，如果折线图整体走势一直在上升，而没有下降的话，基本可以确定检测的网页操作存在内存溢出。

反观没有内存泄露的代码，曲线整体比较平稳

2 定位内存泄露位置