【发布时间】：2012-09-10 20:54:31
【问题描述】：
首先，感谢您的帮助。 :)
正如您在上面的小提琴链接中看到的那样，我正在为 1400 个对象设置动画，以尝试创建“闪烁效果”。随着用户更快地移动鼠标，更多的六边形形状会完全不透明并具有不同的淡出率。小提琴中的版本用足够的颜色填充空间，但感觉生涩和结块。如果我减少 fade_time 变量的数量，它会更平滑，但没有足够的完全不透明的六边形。最终目标是用六边形拼写单词。
Chrome 中的性能最好，而在 FireFox 和 IE 中则较差。我在 iPad 上的移动 safari 中测试（使用 Raphael 的 element.touchmove），结果更糟。
我正在寻找关于哪些代码片段可以以不同方式完成以提高性能的任何建议。
我看到 this answer 其他人给出的应该有助于提高性能，但我试图将动画六边形的数量建立在光标移动的基础上，我不确定我是否可以使用计时器来做到这一点。
This answer 提到使用画布：
一个不错的选择是使用 Canvas 来绘制元素。从我的实验来看，它在绘制这么多动画方面会比 SVG 更快，尽管如果您使用一些动画，它们将比使用 RaphaelJS 库更难实现。
这对人们来说似乎是一条更好的途径，即使代码使用了动画？
这是我第一次使用 Raphael.js。总的来说，我对 JS 不是很有经验，所以任何帮助都是 wunderbar！
编辑： 编辑：另外，看到this answer .resize 被调用的次数比提问者想象的要多，这让我想知道 .mousemove 函数是否可以被调用更多次（比我会需要）超出我的预期。
【问题讨论】：
-
这可能更适合 stackexchange 的 CodeReview Q&A website。很酷的效果。
-
如果你插入颜色而不是不透明度，如果背景是纯色的，可能会更快——在某些浏览器中，透明的东西需要时间来渲染。此外，Canvas 几乎肯定会加快 IE 的速度，很可能也适用于其他浏览器。
-
这是一个与您的案例非常相似的解决方案stackoverflow.com/a/8731150/524555。您可以通过创建
requestAnimationFrame循环然后为集合中的每个元素设置fill-opacity值来避免添加 D3。 -
@Qnan - 感谢您的提示。尝试动画颜色而不是不透明度并且没有注意到任何差异（至少在视觉上）。昨晚我在尝试画布，但没有走那么远。当我这样做时会报告。
-
@Duopixel - 很好，谢谢，今天将研究使用 D3。 。关于
requestAnimationFrame，我对那段（帧率）的理解很模糊，你在说什么these code snippets？感谢您的所有帮助！
标签： javascript performance raphael