HTML5网站上的性能问题

Question

我正在构建一个使用SVG，Canvas和当然HTML的网页。这个页面的想法是动画重绘画布上的一些svg路径。我喜欢重绘的路径使用名称空间Attribute进行注释，所有其他路径只是按原样显示。这一切都工作正常！性能泄漏出现在最近两个小时，而我正在向页面添加一些内容。 但在页面设置的第一一点插图：

的SVG和画布均为4000 * 4000像素宽，并且在一个容器的div直接位于彼此之上。从一个“页面”移动到另一个页面意味着在该容器的左上边缘补间。自从讨论插入文本转向使用html div容器的方向而不是svg本身以来，这也工作得很好。 因此我插入了第三个容器div，其中存储了所有文本，并且在加载svg之后，它们被绝对定位。 随着每隔div添加“pan-tween”，甚至绘图性能下降到一个太低的点。 我正在寻找让性能回到用户可以接受的水平的方式。我的想法之一是设置文本div显示：无，或可见性：隐藏，只要它们没有实际显示。另一个选择是仅补间svg和canvas，在完成将text-div容器放入一步之后。但我目前不确定哪种解决方案更好，或者没有更好的解决方案。所以如果有人有一个想法，请让我知道。

感谢您的阅读！ 问候菲利普

Answer 1

尝试平移外部“文本div”间隔（比如10ms或50ms）。我在渲染方面做了很多工作，在HTML中我通常使用更大的值，例如100ms或150ms（我使用canvas来做到这一点）。 不明白，如果你平移外部股利或所有的“文本股利”。