CSS vs JavaScript神话破灭

There is a misbelief among so many webmasters that CSS is the only way of playing around with animations. CSS has been strongly emerged as the most pampered system of the industry for years now, and has been talked about endlessly among the developers for its robustness and mobile-friendliness. CSS is good but it’s no better than JavaScript. There are certain myths regarding CSS which has ushered the way developers are proactively adopting this system abandoning JavaScript behind and its animations altogether.

在如此众多的网站管理员中，人们都误以为CSS是玩转动画的唯一方法。 多年来，CSS已成为业界最受宠爱的系统，并且因其健壮性和移动友好性而在开发人员中广受关注。 CSS很好，但是并不比JavaScript好。 关于CSS的某些神话已经引入了开发人员积极采用此系统的方式，从而完全放弃了JavaScript及其动画。

The active usage of CSS is what has made developers feel puzzled while managing UI interaction within style sheets, locking themselves out for making their project compatible with the Internet Explorer 8 and 9, and lastly, steer clear the out-of-the-box animations that is only possible with JavaScript.

CSS的积极使用使开发人员在管理样式表中的UI交互，锁定自己以使他们的项目与Internet Explorer 8和9兼容时感到困惑，最后，避免使用开箱即用的动画只有使用JavaScript才有可能。

This post is all about busting some myths about CSS and uncovering all the major problems that people hardly talk about owing to their fascination for CSS. The article is meant to raise your knowledge and awareness about the benefits of using JavaScript, so that you could easily escape the situation of riling up yourself.

这篇文章的目的是消除关于CSS的一些神话，并揭露人们由于对CSS的痴迷而难以谈论的所有主要问题。 本文旨在提高您对使用JavaScript的好处的认识和认识，以便您可以轻松摆脱烦恼自己的情况。

So, without further ado let’s discuss about all of them in detail.

因此，不用多说，让我们详细讨论所有这些。

1. jQuery (1. jQuery)

Let’s start with the basics, JavaScript and jQuery are wrongly combined. Animations designed using JavaScript is fast and dynamic, while jQuery is slow. The reason being – despite of its powerful skills – jQuery’s prominent goal has never been to perform animations. There are so many reasons supporting this:

让我们从基础开始，将JavaScript和jQuery错误地结合在一起。 使用JavaScript设计的动画既快速又动态，而jQuery则很慢。 尽管拥有强大的技能，但jQuery的主要目标从来都不是执行动画。 有很多理由支持这一点：

• jQuery can not simply stop using layout thrashing due to its code based structure that serves a variety of purpose beyond animations. This generally causes stuttering in the initial stages of animation.
  jQuery不能简单地停止使用布局颠簸，这是因为它的基于代码的结构具有除动画之外的多种用途。 通常，这会在动画的初始阶段造成口吃。
• The memory consumed by jQuery frequently stir up garbage collection resulting in freezing of animations. Due to the garbage collection, one can encounter stuttering during the animation.
  jQuery消耗的内存经常激起垃圾回收，从而导致动画冻结。 由于进行了垃圾回收，因此在动画过程中可能会遇到卡顿现象。
• JQuery is designed to used set intervals rather than Request Animation Frame (RAF). If RAF is absent that low frame animations could produce.
  JQuery设计为使用设置的间隔，而不是请求动画帧(RAF)。 如果缺少RAF，则可能会产生低帧动画。

2.缺少用于旋转和定位的控件 (2. Lacking Controls for Rotation and Positioning)

Using controls for animations, rotation, and defining positions are some basic features that are essential while performing animations. In CSS, all these functions are jam packed into a common “transform” property. This creates problems to animate something in a unique way via a common element. For instance, if you want to animate “rotation” and “scale” separately, with different timings. This is something that is only possible with JavaScript because it lets you use various tricks, which is not allowed by CSS. This is a drawback of CSS. It’s good only for simpler animation projects and not for the ones where a rich power motion design needs to integrate.

使用动画控制，旋转和定义位置控件是执行动画时必不可少的一些基本功能。 在CSS中，所有这些功能都被打包到一个通用的“ transform”属性中。 这会产生问题，无法通过公共元素以独特的方式为某物添加动画。 例如，如果要以不同的时间分别为“旋转”和“缩放”设置动画。 只有使用JavaScript才能做到这一点，因为它使您可以使用CSS不允许的各种技巧。 这是CSS的缺点。 它仅对较简单的动画项目有用，而对需要集成强大动力设计的项目无效。

3.速度和GSAP表现 (3. Performance with Velocity and GSAP)

Velocity and GSAP are two leading and most popular libraries in JavaScript. Both of them work with and even without jQuery. When both of these libraries are used along with jQuery there is absolutely no degradation in terms of performance because they work beyond the basic jQuery animations.

Velocity和GSAP是JavaScript中两个领先且最受欢迎的库。 它们都可以使用jQuery，甚至可以不使用jQuery。 当这两个库与jQuery一起使用时，绝对不会降低性能，因为它们的工作原理超出了基本jQuery动画。

These two libraries can also be used easily when jQuery is not presented on the page. This clearly shows that instead of linking all kinds of animation calls into a common jQuery element- as shown below- you could directly pass the target element to the animation call.

当页面上未显示jQuery时，也可以轻松使用这两个库。 这清楚地表明，可以将目标元素直接传递给动画调用，而不是将各种动画调用链接到一个通用的jQuery元素中(如下所示)。

* Working without jQuery */

*在没有jQuery的情况下工作* /

Velocity(element, { opacity: 0.4 }, 900); // Velocity

Velocity(element，{opacity：0.4}，900); //速度

TweenMax.to(element, 1, { opacity: 0.4 }); // GSAP

TweenMax.to(element，1，{不透明度：0.4}); // GSAP

In the above example, you can observe that the velocity uses the same syntax even when jQuery is not used. It just shifted all the elements to the right direction to create space for the for the targeted elements.

在上面的示例中，您可以观察到即使不使用jQuery，力度也使用相同的语法。 它只是将所有元素向正确的方向移动，从而为目标元素创建了空间。

On the contrary, in GSAP an object-oriented API design has been used along with a basic static method. This way the user has the complete control over the animation process.

相反，在GSAP中，已将面向对象的API设计与基本的静态方法一起使用。 这样，用户可以完全控制动画过程。

4. GPU因素 (4. GPU Factor)

A fully optimized GPU is great for performing a variety of tasks including playing around with transform matrices and opacity, that’s the reason why all the leading browsers first offload such tasks from CPU to the GPU. The main objective is to separate all the animated elements onto their own GPU layers because as soon as the system is done with the creation of layers GPU no longer shows concern for moving pixels and combined them together. Therefore, there is absolutely no need to calculate each pixel in every single minute. Instead you can save a lot of time by simply moving one pixel over the other.

完全优化的GPU非常适合执行各种任务，包括处理变换矩阵和不透明性，这就是所有领先的浏览器首先将此类任务从CPU卸载到GPU的原因。 主要目的是将所有动画元素分离到自己的GPU层上，因为一旦完成创建层的系统，GPU就不再显示移动像素并将它们组合在一起的问题。 因此，绝对没有必要每分钟计算每个像素。 相反，您只需将一个像素移到另一个像素上，便可以节省大量时间。

Please Note: There is no need to give every element its own layer due to the restricted video memory of the GPU. If you run out of memory, everything would get messed up.

请注意：由于GPU的视频内存有限，因此无需为每个元素提供自己的图层。 如果内存不足，一切都会搞砸。

On the other hand, if you declare animations in CSS then it would be the browser’s responsibility to determine the GPU layer of each element and thus division will take place accordingly.

另一方面，如果您在CSS中声明动画，则浏览器有责任确定每个元素的GPU层，因此将相应地进行划分。

However, this is something which you could do with JavaScript as well. All you need to do is set a transform with a 3D feature ( just like translate3d () or matrix3d()) to let the browser know about the process of creating GPU layer for the targeted element. So, this is way it is clear that GPU does not only provide a speed boost to CSS but to JavaScript as well.

但是，这也是您可以使用JavaScript进行的操作。 您需要做的就是设置一个具有3D功能的转换(就像translate3d()或matrix3d()一样)，以使浏览器了解为目标元素创建GPU层的过程。 因此，很显然，GPU不仅可以提高CSS的速度，而且还可以提高JavaScript的速度。

5.强大JavaScript动画 (5. Robust JavaScript Animations)

JavaScript has all the capabilities to win when compared with CSS in terms of performance. JavaScript is faster. But exactly how faster it could be? To begin with- it is versatile enough to create an impressive 3D animation demo, which you could see via WebGL. And, also fast enough to build a multimedia teaser, which could be developed using Flash or After Effects. It is absolutely hassle-free to build a virtual world with JavaScript with the help of canvas.

与CSS相比，JavaScript具有赢得性能的所有功能。 JavaScript更快。 但是到底有多快？ 首先-它具有足够的通用性，可以创建令人印象深刻的3D动画演示，您可以通过WebGL看到该演示。 而且，它还足够快地构建了多媒体预告片，可以使用Flash或After Effects开发该预告片。 在画布的帮助下使用JavaScript构建虚拟世界绝对没有麻烦。

As far as animation libraries are concerned then talking about Transit and Velocity’s documentation is absolutely justified. For more clarity on this point, we have also provided a list optimizations that only a JavaScript based animation could perform.

至于动画库，那么谈论Transit和Velocity的文档是绝对合理的。 为了更清楚地说明这一点，我们还提供了仅基于JavaScript的动画才能执行的列表优化。

• Synchronizing the DOM
  同步DOM
• Caching of properties across chain calls to mitigate the generation of DOM querying.
  跨链调用缓存属性，以减轻DOM查询的生成。
• Caching unit conversion ratios
  缓存单位转换率

结论 (Conclusion)

The above mentioned points clearly highlight the versatility of JavaScript based animations as compared to those which are CSS based. But is that we mean CSS animations are “bad”? No, absolutely not. They are good but only to perform basic animations. For higher flexibility and distinct capabilities, JavaScript should be the priority.

与基于CSS的动画相比，上述要点清楚地突出了基于JavaScript的动画的多功能性。 但是，这是否意味着CSS动画“不好”？ 不，绝对不是。 它们很好，但仅用于执行基本动画。 为了获得更高的灵活性和独特的功能，应优先考虑JavaScript。

翻译自: https://www.script-tutorials.com/css-vs-javascript-myths-fall-to-pieces/