我应该尽可能避免使用JS而是使用CSS吗？

Question

我正在寻找最佳实践答案.目前我正在尝试将下拉菜单添加到我网站的导航栏中.我发现我可以使用CSS来完成它,我也可以使用JS - Angular来完成它.我已经读过,因为有了JS恶意的东西可以编程,有些人会禁用JS.因此,为了使您的网站功能在更多的计算机上,它应该用CSS编程.这有什么好处吗？我应该尽可能避免使用JS编码吗？

Answer 1

以下是为什么您更喜欢使用CSS而不是JS的几个重要原因.

• 与JS动画相比,CSS动画的性能要好得多.CSS没有像JS那样用于渲染动画的内存.
• 如果您的动画取决于屏幕宽度,CSS媒体查询就像魅力一样没有任何延迟.但是如果必须使用JS实现这一点,则必须将事件绑定到窗口大小并对每个调整大小执行操作.
• Javascript动画的开销总是略高于CSS动画,因为最终JS动画会操纵动画的CSS样式.

但是,就像他们说的那样,每个优势都有其劣势.CSS动画不能自由地执行任何动画.

动画元素的比例,旋转和位置非常常见.在CSS中,它们都被塞入一个"变换"属性中,使得它们无法在单个元素上以真正独特的方式进行动画制作.例如,如果您想要独立制作"旋转"和"缩放",具有不同的时间和缓动,该怎么办？也许一个元素不断地发出脉冲(振动音阶)并且你想在翻滚时旋转它.这只能用JavaScript实现.

参考: 神话喧嚣:CSS动画与JavaScript

如果你想要JS动画的灵活性和CSS动画的速度,你应该尝试GSAP,它建立在JavaScript之上并且比CSS动画快得多.这是比较CSS动画(使用Zepto),jQuery动画和GSAP动画的性能测试.不要忘记,结果可能会根据渲染引擎而有所不同.

结论: 这是你如何去做的.

简单的动画,CSS可实现:使用CSS

简单的动画,用CSS无法实现:使用JS

重型动画:使用GSAP或制作动画requestAnimationFrame.

这是CSS动画和JS requestAnimationFrame实现之间惊人的性能比较.