这里有什么特殊意义么，是不是完全可以用translateX()代替translate3d()啊？
阿神2017-04-17 11:06:27
增加
http://www.infoq.com/cn/artic...文章比较长，而且没看懂，摘一段
...but my first guess is to use the translate3d hack. Simply put, if you add the -webkit-transform: translateZ(0); or -webkit-transform: translate3d(0,0,0); attribute to an element, then you are telling the browser to use the GPU to render the element. layers, improving speed and performance compared to regular CPU rendering. (I'm pretty sure that doing this will enable hardware acceleration in Chrome, but there is no guarantee on other platforms. As far as the information I have obtained, it is also applicable in most browsers such as Firefox and Safari).
But this statement is actually not accurate, at least in the current version of Chrome, this is not a hack. Because by default all web pages will go through the GPU when rendering. So is this still necessary? have. Before understanding the principle, you must first 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. Multiple RenderObjects may correspond to one or more RenderLayer. The browser rendering process is as follows:
Get the DOM and split it into multiple layers (RenderLayer)
Rasterize each layer and draw it independently in the bitmap
Upload these bitmaps to the GPU as textures
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 this character is "pasted" and "pieced together" from different pictures. The web page has one more step than this, and although the final web page is composed of multiple bitmap layers, what we see is just a photocopy, and ultimately there is only one layer. Of course, some layers cannot be combined, such as flash.
2014-6-24 11:04:16
@bobscript @f2e
Enable 3dGPU acceleration.
The effect is the same, but the latter will trigger the browser's hardware acceleration. This article has a detailed explanation: http://cubefe.com/ipad_web_gp...
It is relatively easy and convenient to develop js animations on browsers that support css3. Generally speaking, CSS3 translate is used instead of the traditional modification of left and top to implement animation. In some cases, it can be better. The specific reason is to reduce the amount of browser repaits. After practice, it is found that the performance of the translate method and the left and top methods are almost the same, both are very poor, and the amount of full-screen animation repait cannot be reduced no matter what.
After research, it was found that in this case, webkit's GPU accelerated rendering function can be used to achieve smooth animation effects, theory.
Let’s briefly talk about some methods to enable gpu acceleration:
1, html5 video, one of the reasons why video is used in the dynamic background of Bing’s homepage.
2, transition and animation (gpu acceleration will be enabled when used on iPad).
3,-webkit-transform-style:preserve-3d; -webkit-transform: translate3d(0,0,0); .
4. Add translateZ(0px) to the element transform, the method used by iScroll.
After turning on gpu acceleration according to the above method, the involved area will be directly rendered by the gpu in the corresponding area of the screen. There is no need to share memory with the browser process and reducing the burden on the cpu is the theoretical principle of gpu acceleration. Problems caused by
:
Turning on GPU acceleration at the same time will also bring some additional problems. The first one should be that the power consumption of the device will increase. After all, the GPU has also started to work. Secondly, there will be some rendering problems, such as the z-index value of the accelerated part of the element and the unaccelerated part cannot be compared normally. If the accelerated element has position-positioned child elements, these child elements may not be rendered to areas outside the accelerated element - if left is set to -10000px, it will be rendered to 0px. Some graphics cards on PCs may also have rendering bugs, but fortunately there is no such problem on iPads.