我制作了一个播放音乐的网站，当你按音符或播放歌曲时，它会使用很多动画.我的性能有问题，尤其是在移动设备上，所以我想找出是什么原因造成的.我用google chrome进行了评测，它告诉我有很多Recalculate Style种情况发生，每次都有30种元素受到影响.我try 过尽可能地制作动画，我使用变换比例和背景色动画，再加上我在变化最多的元素中添加了will-changeprops ，希望能解决问题，但我没能获得太多.
我在想，可能最大的问题是背景 colored颜色 的动画制作，因为这会导致整个动画重新绘制，但我仍然不明白为什么会导致Recalculate Style？
PS:try 并对应用程序进行压力测试，Download and import this song here
以下是一些图表:
查看网站，并在 comments 中讨论.看起来您的大多数性能问题都是由于每次注释更改时SVG合成造成的.现在浏览器中的SVG渲染速度非常快，但仍然不如PNG渲染速度快.
我想到了两个 Select ，.
使用设置的样式创建所有注释，然后设置可见性.这里唯一的问题是，我不确定浏览器在SVG进入/退出可见性时是否仍会重新呈现SVG.也许一个非常低的不透明度也可以在这里有所帮助.基本上，所有notes状态的位置绝对值都位于彼此的顶部，活动状态将具有完全不透明度，其他状态的透明度非常低.
对于每个状态，动态地将SVG创建为PNG，然后只需翻转PNG，这应该比SVG每次重新绘制要快得多.
就我个人而言，我喜欢选项1.，但只需要做一些测试.进行不透明度转换当然很快&；在浏览器中进行平滑处理，因此您可能希望SVG不需要重新渲染.我说的是非常低的不透明度，以防浏览器看到不透明度为0，相当于隐藏的可见性，并决定松开渲染画布，在它再次可见时再进行另一次SVG绘制.同样，这里的一些测试将证实这一点.