在vue中如何提高canvas动画的性能？

Question

问题描述

把一些canvas制作的动画放到vue里之后明显出现卡顿

问题出现的环境背景及自己尝试过哪些方法

动画代码来自于https://github.com/Whitevinyl...，直接打开运行非常流畅。但将其放到vue内后卡顿非常明显。看到一个相似问题的推断是“涉及到频繁修改 vue data 里面定义的属性，再加上template 部分需要更新，会触发 vnode 计算，导致了动画不流畅”。不知道是不是这样，又应该如何优化呢？

相关代码

原版代码请戳上面链接
VUE内自己修改后的代码如下：

init() {
    let canvas = this.canvas;
    this.ctx = canvas.getContext("2d");
    // 设置画布大小和绘图位置
    this.canvas.width = metrics(this.ratio, this.width, this.height, this.ctx).width;
    this.canvas.height = metrics(this.ratio, this.width, this.height, this.ctx).height;
    // 设置该页容器大小
    this.hWidth = this.canvas.width + "px";
    this.hHeight = this.canvas.height + "px";
    this.textureCol = [new RGBA(0, 32, 185, 1), new RGBA(235, 98, 216, 1), new RGBA(10, 200, 200, 1), new RGBA(255, 245, 235, 1), new RGBA(5, 5, 5, 1), new RGBA(255, 160, 180, 1), new RGBA(255, 170, 170, 1), new RGBA(255, 140, 90, 1), new RGBA(245, 25, 35, 1), new RGBA(10, 10, 70, 1), new RGBA(255, 80, 100, 1), new RGBA(70, 0, 80, 1), new RGBA(120, 235, 200, 1), new RGBA(160, 150, 170, 1), new RGBA(220, 20, 80, 1), new RGBA(210, 150, 120, 1)];
    this.textureCol2 = [new RGBA(0, 0, 40, 1), new RGBA(0, 52, 65, 1), new RGBA(255, 230, 140, 1), new RGBA(255, 80, 100, 1), new RGBA(255, 180, 210, 1)];
    this.palettes = [[this.textureCol2[0], this.textureCol[10], this.textureCol2[1]], // dark > pink > grey/green
      [this.textureCol2[0], this.textureCol2[3], this.textureCol[15]], // flesh > gold
      [this.textureCol2[0], this.textureCol2[1], this.textureCol2[2]], // dark green > yellow
      [this.textureCol[4], this.textureCol2[1], this.textureCol[10]], // petrel > pink
      [this.textureCol[4], this.textureCol[9], this.textureCol[11]], // dark > purple
      [this.textureCol[4], this.textureCol2[0], this.textureCol[11]], // extra dark > purple
      [this.textureCol[4], this.textureCol[11], this.textureCol[12]], // purple > turquoise
      [this.textureCol2[1], this.textureCol[14], this.textureCol[10]], // dark > red
      [this.textureCol[9], this.textureCol[10], this.textureCol[12]], // dark purple > flesh  > turquoise
      [this.textureCol2[1], this.textureCol[10], this.textureCol[12]], // dark > flesh > turquoise
      [this.textureCol[4], this.textureCol[9], this.textureCol[14]], // dark purple > magenta
      [this.textureCol[4], this.textureCol[9], this.textureCol[12]], // dark > turquoise
      [this.textureCol[4], this.textureCol[9], this.textureCol[8]], // dark purple > red
      [this.textureCol2[0], this.textureCol2[3], this.textureCol[6]], // pinks
      [this.textureCol[4], this.textureCol2[0], this.textureCol2[3]], // very dark > pink
      [this.textureCol[4], this.textureCol2[0], this.textureCol[7]], // dark > gold
      [this.textureCol[4], this.textureCol[9], this.textureCol[7]], // dark blue > gold
      [this.textureCol2[0], this.textureCol2[1], this.textureCol[10]], // dark blue/green > pink
      [this.textureCol[4], this.textureCol2[1], this.textureCol[14]], // dark green > magenta
      [this.textureCol2[0], this.textureCol[13], this.textureCol[5]], // grey > pink marble
      [this.textureCol[10], this.textureCol[13], this.textureCol[5]], // pink > grey > pink flamingo
      [this.textureCol2[1], this.textureCol[13], this.textureCol[10]], // grey green > coral
      [this.textureCol[3], this.textureCol[13], this.textureCol[10]], // white grey > pink * not sure
      [this.textureCol[3], this.textureCol[13], this.textureCol[9]],  // white grey > dark purple
      [this.textureCol[4], this.textureCol[9], this.textureCol2[1]],  // dark green > blue
      [this.textureCol[3], this.textureCol2[0], this.textureCol[4]],  // white > dark
      [this.textureCol2[0], this.textureCol2[1], this.textureCol[7]], // dark green > gold
      [this.textureCol2[0], this.textureCol[9], this.textureCol[5]], // navy > bubblegum pink
      [this.textureCol[6], this.textureCol[13], this.textureCol[10]], // pale pink > grey coral
      [this.textureCol[4], this.textureCol2[0], this.textureCol[15]], // dark > cream
      [this.textureCol[4], this.textureCol[9], this.textureCol[13]], // dark blue > pale grey
      [this.textureCol[4], this.textureCol[9], this.textureCol[6]], // dark blue > pale pink
      [this.textureCol[4], this.textureCol[9], this.textureCol[10]], // dark blue > coral pink
      [this.textureCol2[0], this.textureCol[0], this.textureCol[5]], // electric blue > bubblegum
      [this.textureCol[0], this.textureCol2[0], this.textureCol[4]] // dark > electric blue
    ];
    setTimeout(() => {
      // 初始化颜料 //
      this.resetPaint();
      // 开始循环 //
      this.loop();
    }, 200);
  },
  
  // 重置涂料
  resetPaint() {
    // 选择调色板并存储以防止重复 //
    let ind = this.lastPalette;
    let tombola = new Tombola();
    while (ind === this.lastPalette) {
      ind = tombola.range(0, this.palettes.length - 1);
    }
    let p = this.palettes[ind];
    this.lastPalette = ind;
    this.paint = new Paint(this.ctx, this.canvas.width, this.canvas.height, this.ratio, tombola.rangeFloat(0.6, 2), p[0], p[1], p[2], 0.05, 0.3, this.addNoise, this.resetPaint, this.TAU);
  },
//动画循环
  loop: function () {
    this.paint.draw(3);
    requestAnimationFrame(this.loop);
  }

其余代码基本改写了导入导出方式

期待的结果

实际运行效果上看，draw()调用时有略微迟缓，在每一次resetPaint() 即重置颜料后会出现明显卡顿。希望有前辈指点优化的思路及关键点。

Answer 1

不要走vue的生命周期