• notice
  • Congratulations on the launch of the Sought Tech site

What is the reason why GSAP js animation performance is better than jQuery?

This is the official website .It seems that GSAP is calling HTML5 native animation transformation in browsers such as chrome or firefox or opera, but in the official sample page (http://www.greensock.com/js/speed.html ), the number of frames that GSAP runs under IE is also significantly higher than that of jquery, GSAP official also arrogantly called "20x faster than jQuery", how does GSAP do under IE To be faster than jquery?
Although in the actual test, such as a div in the process of animate, no matter in chrome or IE, it is impossible to distinguish which is faster with the naked eye.At present, I want to add this GSAP to the project (although it is 91.6kb, it is quite large, Coexist with jquery in footer), what are the pros and cons? Is it necessary to add GSAP?

To be honest, the first time I saw such a shocking number—"Up to 20 times faster than jQuery!"—the first reaction was that the use case was falsified. The front-end optimization seldom has such a large and obvious optimization.

Whenever there is such a problem, we can use the following steps to determine how the performance optimization of an unknown framework is done/forged:

  • Black box: From the official use case, how fast and where is it?

  • White box: look at how the framework is optimized within the official use cases

  • do {Propose hypothesis, build your own use case test} while (hypothesis has not been verified);

  • get conclusion

I recorded the path of preliminary exploration in the article "Is GSAP animation faster than jQuery?" , and did some experiments in the continuation article , and concluded:

  1. Does the use case of GSAP show that GSAP is faster than jQuery?
    Yes, this can show that GSAP is faster. But it is not faster at all times. It is fast when we need the particle system, and when we only need to draw one or two small interactions, it does not provide a very obvious possibility of performance optimization. The latter can be done directly with CSS3 Animation/Translation, or with jQuery to achieve full browser compatibility. If there is a need to redraw a large number of elements such as a particle system, GSAP is a good choice.

  2. Is setInterval slower than requestAnimationFrame?
    no. In the short callback, the related code that causes the redraw, requestAnimationFrame is slightly faster than setInterval; but in the long callback function (requestAnimationFrame is constructed multiple times, they will be combined into one), requestAnimationFrame is not faster than setInterval.

  3. Is the redrawing caused by the concentrated timer faster than the redrawing caused by the scattered timer?
    Yes. This is why GSAP is faster.

There is not much to say about the principles of teaching people to fish and teaching people to fish.The whole process of drawing conclusions is written above.It is recommended that LZ go through it by yourself and experience the tools and methods instead of just looking at it and waiting until the conclusion comes out.Remember the conclusion by rote, this will really help the improvement of LZ.


Technical otaku

Sought technology together

Related Topic


Leave a Reply