Javascript 在非IE浏览器中，基本动画速度异常缓慢

测试页面：
测试使用：Internet Explorer 9、Firefox 6、Chrome 14

该页面包含我正在处理的站点的精简版本。它使用自定义的

警报

功能（大写的

a

保持标准的

警报

可用）。本质上，它创建一个mask元素和alert content元素，然后使用

opacity

样式淡入淡出

动画以

setInterval

的方式运行，延时为25ms，总共16帧。因此，理论动画时间为400ms

结果：

• Internet Explorer 9:397-403ms
• Firefox 6:440-460ms
• 铬12:800-900ms

这只是页面的精简版

---

是我做错了什么，还是Chrome，这个“互联网最快的浏览器”，这个“现在网络”的创造者，真的是那个垃圾？

所以，我把这个移到这里，因为这就是问题所在：

这不是动画——当我禁用外部CSS时，动画运行得很好，但它是浏览器在如此短的时间内努力渲染CSS3属性（即

边界半径

，

背景大小

，以及

框影

）。删除这些将导致更多的正常时间与您的预期时间相匹配

在Firefox 6上测试：

• CSS前：平均400ms，一致
• CSS后：600ms+平均值，变化

在铬上测试（无对照测试）：

• CSS后：500-700ms，变化

---

您的测试页面给了我一个

404找不到

的响应。我的Firefox和Chrome在测试中的测试量相当正常，达到了600ish。我的猜测是，这是由于动态元素的不透明度变化造成的，而不是单个渲染元素。这不是浏览器擅长的东西。我不确定我是否理解你所说的“动态元素”与“渲染元素”相比的含义。这只是几个

而已……您使用的

附带了许多属性，特别是CSS3属性。在加载任何非现场资源之前运行动画时，我注意到了这种差异。无CSS动画在400ms时持续运行，但一旦它使用CSS绘制动画，它就会达到现在的600毫秒以上。更正：实际上是背景图像，更具体地说是

背景大小

属性导致了速度减慢。有趣。不管怎样，谢谢你帮我找到问题。答案实际上是背景图像被背景大小放大了：100%100%。但是我会接受这个答案，因为你确实帮助我找到了问题。为了其他阅读本文的人的利益，我通过使用增量计时进一步解决了这个问题，因此动画时间将始终为400ms（最后一帧的取舍）。但是，平滑度会有所不同。