For special effect performance, which of canvas, css3, and jquery is more suitable for mobile phones? -

For special effect performance, which of canvas, css3, and jquery is more suitable for mobile phones? Recently, I used dom + jquery to create a mobile application with 6 pages, some of which have effects such as gear rotation and the running of stars. After doing well, I found that the performance was really poor, then I changed it to the structure of css3 + canvas, but it was still not very good. In the end, I couldn't help but overwrite and redo it all. I used the lufylegend engine to write the entire application through canvas. Although I barely needed it, but it is still unsatisfactory in some aspects. For example, it is difficult to bind a mouse to the special effect performance. Which of canvas, css3, and jquery is more suitable for mobile phones?
Recently, I used dom + jquery to create a mobile application with 6 pages, some of which have effects such as gear rotation and the running of stars. After doing well, I found that the performance was really poor, then I changed it to the structure of css3 + canvas, but it was still not very good. In the end, I couldn't help but overwrite and redo it all. I used the lufylegend engine to write the entire application through canvas. Although I barely needed it, however, it is still unsatisfactory in some aspects, such as poor binding of mouse events, and poor performance. So what method should we use to create this series of pages? Reply: Make a different opinion.

With css3 animation, it means that dom is required to be relied on, and all animations work on dom. The dom performance on mobile browsers is really low, because it involves the typographical engine, you can only avoid the problem by reducing nodes and operations, but it is difficult to solve.

Canvas animation gives you control over the entire canvas, and the maximum animation performance is also controlled by programmers.

Some people say that canvas animation is not as good as css3 animation. It is true when the typographical engine does not become a bottleneck. After all, css3 animation is more convenient and separate from content. Do not forget that, although CSS 3 animation does not occupy the main js thread, it is restricted by the typographical engine and is closely related to the dom structure of the entire page. If dom is omnipotent, What Is canvas used? In fact, pixel operations provide much higher performance than dom operations. Even a simple game such as 2048 is written in dom, and on mobile phones it seems that the frame rate of css3 animation is not good, basically, I only dare to use dom to find such a non-animated game.

In summary, dom and css3 animations are a general solution to add special effects to the content layout. Mobile browsers with poor performance may be limited by the typographical performance and cannot achieve the desired results. For specific scenarios with performance requirements, such as games, canvas can be greatly improved. If you find event and coordinate management troublesome, you can use a better game engine. You may also need to use the object pool to create and destroy a large number of objects, such as airplane games. After all, the js gc overhead is also awkward. If code quality is not considered, css3> canvas> pure js is generally used.
1. css3 animations are independent of js threads. js operations do not block css3 animations. Therefore, when the cpu usage of the system is high, the animation performance of css3 is significantly higher than that of pure js animations.
2. Pure js, please note that" PureIt means js operations on dom, not canvas. Javascript-based dom-based animations can cause browser recalculate and layout, and also result in rasterize (Rasterization) on mobile devices. The three animations listed by the subject are compared, why is the animation performance of pure js the lowest? The reason is that the animation implemented by pure js not only tests the quality of developers' JavaScript code, but also increases the animation complexity, compared with css3 and canvas, the higher the number of dom operations, the lower the animation performance achieved by pure JavaScript.
3. compared with pure js, canvas has a much simpler dom structure, resulting in fewer recalculate and layout. However, canvas animations still require js Code drivers and occupy js threads. Therefore, compared with css3, the performance is still slightly inferior.

PS: although this is the case in theory, many other factors, such as compatibility (mobile terminals are also inevitable, WTF!), need to be considered in actual development !), Therefore, compromise or comprehensive methods are often used. Css is always better than js
Pure js is always better than jq
Canvas has no research, but it is essentially JavaScript. Canvas is estimated to be more cost-effective than Javascript dom.