非IE浏览器中的基本动画异常缓慢

时间:2011-09-24 07:20:08

标签: javascript performance google-chrome

测试页: http://adamhaskell.net/misc/dialogtest.html
经过测试: Internet Explorer 9,Firefox 6,Chrome 14

该页面包含我正在处理的网站的精简版本。它使用自定义Alert函数(大写A来保持标准alert可用)。基本上它会创建一个mask元素和alert内容元素,然后使用opacity样式淡化它们。

动画在setInterval上运行,时间延迟为25毫秒,总共16帧。因此,理论动画时间为400毫秒。

结果:

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

这只是页面的精简版本。

我做错了什么,或者Chrome是“互联网上最快的浏览器”,“网络,现在”的使用者,实际上就是垃圾?

1 个答案:

答案 0 :(得分:0)

所以,我会在这里移动它,因为结果证明是这个问题:

这不是动画 - 当我禁用外部CSS时,动画运行得很好,但是浏览器正在努力渲染CSS3属性(即border-radiusbackground-size和{{1}在这种情况下)在这么短的时间内。删除这些应该会导致更多的正常时间与您的预期时间相匹配。

在Firefox 6上测试:

  • CSS之前:平均400毫秒,一致
  • CSS之后:600ms +平均值,变化

在Chrome上测试(无控制测试):

  • CSS之后:500-700ms,变化