如何在SVG动画上获得最佳性能mouseOver上的FPS下降

问题描述

我使用SVG制作了动画帧，并在requestAnimationFrame()函数内部进行了转换：

moveSVG: () => {
            if (Melo.onAir) {
                const N = 4 * 60 / Melo.tempo;
                const beatLen = 1 / 16 * N;
                const c16 = 16 * Melo.measures;
                let diff = Melo.nextBeat + (Melo.audioContext.currentTime - Melo.nextWhen) / beatLen;
                while (diff < 0) {
                    diff = diff + c16;
                }
                if (diff > Melo.songLength - 1) {
                    diff = Melo.songLength - 1
                }
                const tapSize = Melo.tapSize
                const y = diff * tapSize;
                Melo.yPos = y;
                const yVal = `translate(0 ${-y - tapSize})`;
                Melo.linesGroup.setAttribute("transform",yVal);
                const telorans = tapSize;
                class animated {
                    constructor(element,beat) {
                        this.element = element
                        this.mover();
                        this.remover(beat);
                    }
                    mover() {
                        this.element.forEach(elem => {
                            this.ele = elem.ele;
                            this.len = elem.len;
                            this.beg = elem.beg - tapSize;
                            this.end = elem.end;
                            this.note = elem.pitch;
                            let newPos = (y - this.end) + this.len + tapSize;
                            if (newPos > this.len) newPos = this.len;
                            if (newPos > -tapSize && newPos < tapSize) {
                                this.score(newPos);
                            }
                            this.animation(newPos)
                        })
                    }
                    animation(newPos) {
                        const eleG = this.ele.children.group;
                        eleG.children[1].style.fill = 'red';
                        eleG.setAttribute('style',`transform: translateY(${newPos}px)`);
                    }
                    remover(beat) {
                        if (y > this.element[0].end || !Melo.onAir) {
                            Melo.anime = Melo.anime.filter(item => item !== beat);
                        }
                    }
                }
                Melo.anime.forEach(beat => {
                    let notes = Melo.noteProg[beat];
                    if (notes) {
                        new animated(notes,beat)
                    }
                });
            }
            requestAnimationFrame(Melo.moveSVG)
    }

在SVG元素上使用mouseOver之前，一切都可以以〜60fps正常运行！

我做了一个gif来显示：

FPS drop on mouseOver

然后我又进行了一次测试，没有动画并且使用了CPU：

CPU usage on mouseOver

我的svg元素上没有任何鼠标事件！

我认为浏览器检查事件是正常的！ idk，但是在动画不降低FPS的情况下，如何才能获得最佳性能，这是从svg元素中删除所有内容的方法吗？以获得更好的性能？

还是我应该使用另一种方式做到这一点？

编辑： 我在Windows 10和Google chrome 84上进行了测试，我需要在所有操作系统和浏览器上都能正常工作的最佳方法！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）