我应该尽可能避免使用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。

参考： Myth Busting: CSS Animations vs. JavaScript

如果你想要JS动画的灵活性和CSS动画的速度，你应该尝试GSAP，它建立在JavaScript之上并且比CSS动画快得多。 Here是比较CSS动画（使用Zepto），jQuery动画和GSAP动画的效果测试。不要忘记，结果可能会因渲染引擎而异。

<强>结论： 这就是你如何去做的。

简单的动画，CSS可实现：使用CSS

简单的动画，用CSS无法实现：使用JS

重型动画：使用GSAP或使用requestAnimationFrame制作动画。

Here是CSS动画和JS requestAnimationFrame实现之间令人惊叹的性能比较。