vue_electron项目对SVGA加载出现卡顿、卡死现象的处理，直播类项目

近期Peter 尘在做vue_electron项目的过程中需要使用SVGA动效图，于是乎用了svga.lite插件，意外的是加载图片项目直接崩盘（白屏），CUP占用率直接飙升到100%，特此，在这里记录一下SVGA格式图片踩下的坑：

项目场景：

项目场景：直播平台刷礼物，需要使用较大的SVGA动效图

---

问题描述：

使用svga.lite插件加载SVGA图片后，连续刷比较大的礼物会出现白屏，内存占用过高，应用直接崩盘的情况

附代码：

import { Downloader, Parser, Player } from "svga.lite";

async playSvga(gift) {
	const downloader = new Downloader();
    const player = new Player("#canvas");
    const parser = new Parser();
    const img = gift.effectImg  
    let data = void 0;
    const fileData = await downloader.get(img);
    data = await parser.do(fileData);
    player.set({
    	loop: 1,
        fillMode: "forwards",
        intersectionObserverRender: true,
    });
    await player.mount(data);
    const popListH = 680;
    const popListW = 287;
    const canvasW = document.getElementById("canvas").width;
    const canvasH = document.getElementById("canvas").height;
    this.sliderStyle.height = parseFloat((canvasH / canvasW) * popListW) + "px";
    player.$on("end", () => {
        this.$store.commit("updateCurrentGiftList", {
        	type: "pop",
        });
        this.showSvga();
    });
     player.start();
},
async showSvga() {
	const gift = state.currentGiftList.length > 0 ? state.currentGiftList[0] : null;
    if (gift) {
    	await this.playSvga(gift);
    }
}

---

原因分析：

刚开始加载SVGA图时，CUP直接飙到80%+ 之后播放就会稳定到20%-30% 或许svga.lite是轻量级的，由于图片过大加载时存在问题。于是乎就重新下载了插件 ‘svgaplayerweb’，相比于svga.lite，动效图片过多、图片过大的项目还是更适合使用svgaplayerweb，svga.lite适合做移动端WEB项目。

---

解决方案：引入svgaplayerweb 插件

// NPM安装
npm install svgaplayerweb --save

import SVGA from 'svgaplayerweb';

async playSvga(gift) {
	var player = new SVGA.Player('#popList');
	var parser = new SVGA.Parser('#popList');
	parser.load(gift.effectImg, (videoItem) => {
	player.loops = 1, // 播放次数
	player.clearsAfterStop = true, // 动画结束时，是否清空画布
	player.setVideoItem(videoItem);
        player.startAnimation();
        player.onFinished(()=>{
        	this.$store.commit("updateCurrentGiftList", {
            	type: "pop",
          	});
          	this.showSvga();
        }) 
	})
},
async showSvga() {
      const gift = state.currentGiftList.length > 0 ? state.currentGiftList[0] : null;
      if (gift) {
      	await this.playSvga(gift);
      }
    },