记一次 Vue 组件内存泄漏的坑

记一次 Vue 组件内存泄漏的坑
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说记一次 Vue 组件内存泄漏的坑,希望能够帮助大家进步!!!

概述

最近在开发 Vue 项目的时候遇到了内存泄漏问题,记录下来,供以后开发时参考,相信对其他人也有用。

背景

背景是需要用 three.min.js 和 vanta.net.min.js 给首页加上动画效果。

内存泄漏

我们的代码是这样的:

mounted() {
  this.loadScript('/js/three.min.js', () => {
    this.loadScript('/js/vanta.net.min.js', () => {
      this.bannerBg = window.VANTA.NET({
        el: '#bannerBg',
        color: 0x2197F3,
        backgroundColor: 0x071E31,
      });
    });
  });
},
methods: {
  loadScript(path, callback) {
    const script = document.createElement('script');
    script.src = path;
    script.language = 'JavaScript';
    script.onload = () => callback();
    document.body.appendChild(script);
  },
},

这样就导致,在每次首页加载的时候,都会去请求 three.min.js 和 vanta.net.min.js 静态资源,并且初始化。然后由于组件销毁的时候并没有清除 window.VANTA.NET 方法施加的内存,所以导致了内存泄漏。具体表现是,切换首页和其它页,切换的次数多了的话,就会卡住。

那一般的方法是直接在 beforeDestroy 生命周期里面 执行 this.bannerBg.destroy() 就行了。但是一开始我并不知道 this.bannerBg 带有destroy 方法,所以走了下面的不少弯路。

检查内存泄漏

按照官网的方法,Mac 下打开 Chrome 任务管理器的方式是选择 Chrome 顶部导航 > 窗口 > 任务管理;在 Windows 上则是 Shift+Esc 快捷键。则可以打开 Chrome 的任务管理器,主要查看 Browser 和 GPU Process 的 内存占用空间。前者是查看程序执行所消耗的内存,后者是查看动画效果所消耗的内存。

keep-alive

如果插件本身没有提供 destroy 方法的话,可以使用官方的替代方案:使用 keep-alive 组件,在内存中保留组件的状态。示例代码如下:

<keep-alive>
  <my-component v-if="show"></my-component>
</keep-alive>

但是我实际使用下来,并没有用,估计是因为 three.js 生成的 WebGL 动画导致的不是 Browser 的内存泄漏而是 GPU 的内存泄漏吧。

如果这种方法不行的话,估计就真没办法避免内存泄漏了,幸好 vanta.net 其实暴露了 destroy 方法!

我看了下和这个场景比较相似的vue-particles源码,它竟然没有使用 destroy 释放内存!!!

一个坑

在解决的过程中,我碰到了一个坑,就是我原本以为在 mounted 生命周期内的程序不会影响渲染,因为当执行到 mounted 生命周期的时候,Dom已经挂载好了。但是其实我错了,如果在 mounted 生命周期里面执行一段非常耗时的代码,浏览器是会一直白屏的,代码示例如下:

mounted() {
  let a = 1;
  while (a < 123456) {
    console.log('aaaaa', a);
  }
}

原因我暂时不知道。。。。。。。。

转载于:https://www.cnblogs.com/yangzhou33/p/11462528.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29333

发表评论