排查内存泄露

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 组件的显示隐藏

排查内存泄露_第1张图片
点击录制按钮后,开始操作页面
连续点击很多次按钮,home 组件就会开启很多setInterval
点击 stop,结束录制

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

排查内存泄露_第2张图片

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

排查内存泄露_第3张图片

2 定位内存泄露位置

你可能感兴趣的:(前端)