Use CSS to turn on hardware acceleration to improve website performance

Http://www.tuicool.com/articles/RRrENj

Do you know that we can use CSS in the browser to turn on hardware acceleration, so that the GPU (Graphics processing Unit) function, so as to improve performance?

Hardware acceleration is now supported on most computer graphics cards. In view of this, we can play the power of the GPU, so that our website or application performance more smoothly.

Turn on hardware acceleration with CSS on desktop and mobile

CSS animations, transforms, and transitions do not automatically turn on GPU acceleration, but are performed by the browser's slow software rendering engine. So how can we switch to GPU mode, and many browsers provide some of the triggering CSS rules.

Now, like Chrome, FireFox, Safari, ie9+ and the latest version of opera all support hardware acceleration, when they detect a DOM element in the page that has some CSS rules applied, the most salient feature of the element's 3D transformation.

For example:

{   -webkit-transform:translate3d (250px,250px,rotate3d (250px,250px,  250px,-Scale3d (0.5);}          

However, in some cases, we do not need to apply the effect of 3D transformations to elements. At this point we can turn on hardware acceleration using a little trick of "spoofing" the browser.

While we may not want to apply 3D transformations to elements, we can turn on the 3D engine as well. For example we can use Transform:translatez (0); To turn on hardware acceleration.

. Cube{-webkit-transform: translatez (0); -moz-transform:  Translatez (0); -ms-transform: translatez (0); -o-transform: translatez ( 0); transform: translatez ( Span class= "number" >0); /* other transform properties here */        

In Chrome and Safari, when we use CSS transforms or animations, there may be a page flicker effect, the following code can fix this situation:

. Cube{-webkit-backface-visibility:Hidden-moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; span class= "rule" >-moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; /* other transform properties here */        

In the browser of the WebKit kernel, another proven method is to

. Cube{-webkit-transform: translate3d (0, 0, 0); -moz-transform:  Translate3d (0, 0, 0); -ms-transform:  Translate3d (0, 0, 0); transform: translate3d ( Span class= "number" >0, 0, 0); /* other transform properties here */        

The native mobile app (Native mobile applications) is always good at using the GPU, which is why it behaves better than web apps (Web Apps). Hardware acceleration is particularly useful on the mobile side, as it can effectively reduce the use of resources (Mac: The mobile itself has limited resources).

Summarize

It would be unwise to use the above method only for elements that we need to animate, if you just want to turn on hardware acceleration and do it randomly.

Be careful with these methods, and if you pass your tests, the result is improved performance that you can use. Using the GPU can cause serious performance problems because it increases the use of memory, and it reduces the battery life of mobile devices.