DWQA QuestionsCategory: ProgramUsing CSS3 translate instead of traditional left and top to realize animation, triggering the GPU of WebKit to accelerate rendering to achieve smooth animation effect
King asked 1 month ago
What's the special meaning here? Is it possible to replace translate3d () with translatex()?

Using CSS3 translate instead of traditional left and top to realize animation, triggering the GPU of WebKit to accelerate rendering to achieve smooth animation effect

52lidan replied 1 month ago

Turn on 3dgpu acceleration.

52lidan replied 1 month ago

The effect is the same, but the latter triggers hardware acceleration of the browser. This article has a detailed explanation:http://cubefe.com/ipad_web_gpu_accelerate_animation/

1 Answers
Best Answer
King answered 1 month ago

increase
http://www.infoq.com/cn/artic…
It's a long article, and I didn't understand it. Take a paragraph

… but my first guess is that the reason for this is to use translate3d hack. In short, if you add the attribute – WebKit transform: translatez (0); or – WebKit transform: translate3d (0,0,0); to an element, you tell the browser to use GPU to render the layer, which improves the speed and performance compared with general CPU rendering. (I’m sure this will enable hardware acceleration in chrome, but it’s not guaranteed in other platforms.). As far as the information I get, it is also applicable in most browsers, such as Firefox and safari).
But that’s not true, at least not a hack in the current version of chrome. Because by default, all web pages are rendered through GPU. Is it necessary to do so? Yes. Before you understand the principle, you must understand the concept of a layer.
HTML will be converted into a DOM tree in the browser, and each node of the DOM tree will be converted into a renderobject, and multiple renderobjects may correspond to one or more renderlayers. The process of browser rendering is as follows:

  1. Get the DOM and split it into multiple layers (renderlayers)
  2. Grid each layer and draw the carry map independently
  3. Upload these bitmaps as textures to GPU
  4. Composite multiple layers to generate the final screen image (Ultimate layer).

This is similar to the 3D rendering in the game. Although we see a three-dimensional character, the skin of the character is “pasted” and “spelled” by different pictures. The web page has one more step than this. Although the final web page is composed of multiple bit layers, what we see is only a copy version, and finally only one layer. Of course, some layers cannot be spliced, such as flash.

                           2014-6-24 11:04:16

@bobscript @f2e

Turn on 3dgpu acceleration.
The effect is the same, but the latter triggers hardware acceleration of the browser. This article has a detailed explanation:http://cubefe.com/ipad_web_gp…
It is easy and convenient to develop JS animation on the browser supporting CSS3. Generally speaking, it is better to use CSS3 translate instead of traditional left and top to implement animation. The specific reason is that it can reduce the amount of browser repair. After practice, it is found that the performance of translate method is almost the same as that of left and top method, and the amount of full screen animation repair cannot be reduced in any way.

After investigation, it is found that this situation can use the GPU of WebKit to accelerate the rendering function to achieve smooth animation effect.
In short, some ways to enable GPU acceleration are as follows:
1. HTML5 video, one of the reasons why the dynamic background of Bing homepage uses video.
2. Transition and animation (GPU acceleration will be turned on when used on iPad).
3,-webkit-transform-style:preserve-3d; -webkit-transform: translate3d(0,0,0); 。
4. Add translatez (0px) to the element transform, which is the method adopted by iscroll.
After GPU acceleration is turned on according to the above method, the involved area will be directly rendered in the corresponding area of the screen by GPU. It is the theoretical principle of GPU acceleration to not share memory with browser process and reduce CPU burden.
Problems:
At the same time, turning on GPU acceleration will also bring some additional problems. The first thing should be that the power consumption of the device will increase. After all, GPU is also starting to work. Secondly, there will be some rendering problems, such as the Z-index value of the accelerated part and the non accelerated part cannot be compared normally. If the accelerated element has child elements positioned by position, these child elements may not be able to render to areas other than the accelerated element — if left is set to – 10000px, all elements will render to 0px. There will be rendering bugs on some graphics cards on the PC. fortunately, there is no such problem on the iPad.