简体   繁体   English

CSS动画比JS动画更快吗?

[英]Are CSS animations faster than JS animations?

I read something a while ago that said that CSS animations are faster than JS animations. 我刚才读到的东西说CSS动画比JS动画要快。 Having used jQuery to do some animations I can see why some would say this, as jQuery animations are sometimes buggy and slow. 使用jQuery做一些动画我可以看到为什么有人会说这个,因为jQuery动画有时会出错和慢。 What I would like to know however, is whether there is any hardcore truth in the argument? 然而,我想知道的是,论证中是否有任何硬核真理?

There is a common misconception that CSS animations are faster than JS animations because of all the highfalutin buzz-words used whenever the topic is brought up. 有一种常见的误解认为CSS动画比JS动画更快,因为每当主题出现时都会使用所有高调的动词。 CSS animations are however much faster and more stable than jQuery animations, which is where a lot of people get this idea from. CSS动画不过是更快 ,更比jQuery的动画稳定,这是很多人得到了这个想法。 If you take a look at the GreenSock library for JS (the name should ring bells to old Flash WebDevs :v), it is considerably faster than jQuery, and more than a match for CSS animations. 如果你看一下JSGreenSock库 (这个名字应该响应旧的Flash WebDevs:v),它比jQuery快得多,而且不仅仅是CSS动画的匹配。

If you take a look at this website and scroll down to the 'Performance comparison' section, you have a stress test that is indeed the basis of all of what I just said. 如果您看一下这个网站并向下滚动到“性能比较”部分,那么您的压力测试确实是我刚才所说的所有内容的基础。 I ran the test on a machine that has an Intel Core i7 3930K 3.2GHz processor and 8GB of RAM (Cannot tell what GPU). 我在一台配备Intel Core i7 3930K 3.2GHz处理器和8GB RAM(无法分辨GPU)的机器上运行测试。

When running the test, make sure to set the dots to 3000 and run tests on all three engines. 运行测试时,请确保将点设置为3000并在所有三个引擎上运行测试。

  • The jQuery engine could only render a single dot jQuery引擎只能渲染一个点
  • The GreenSock engine was by far the most fluid GreenSock发动机是目前最流畅的
  • The CSS engine was good, but didn't seem as fluid as the GSAP engine CSS引擎很好,但似乎没有GSAP引擎那么流畅

Obviously, should anyone disagree with the tests and information given, please state with references and data as to why you disagree 显然,如果有人不同意给出的测试和信息,请说明您不同意的参考和数据

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM