Use CSS to enable hardware acceleration to improve website performance and css Hardware acceleration

Use CSS to enable hardware acceleration to improve website performance and css Hardware acceleration

Address: http://www.cnblogs.com/rubylouvre/p/3471490.html

Address: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Do you know that we can enable hardware acceleration with css in the browser so that the GPU (Graphics Processing Unit) can function to improve performance?

Currently, most computer graphics cards support hardware acceleration. With this in mind, we can leverage the power of GPU to make our websites or applications more smooth.

Enable hardware acceleration with CSS on the desktop and mobile

CSS animations, transforms, and transitions do not automatically enable GPU acceleration, but are executed by the browser's slow software rendering engine. So how can we switch to the GPU mode? Many browsers provide some triggering CSS rules.

Currently, Opera in Chrome, FireFox, Safari, IE9 +, and the latest versions Support Hardware acceleration. It is enabled when it detects that a DOM element on the page applies certain CSS rules, 3D transformation of the element of the most significant feature.

For example:

.cube {   -webkit-transform: translate3d(250px,250px,250px)   rotate3d(250px,250px,250px,-120deg)   scale3d(0.5, 0.5, 0.5);}

However, in some cases, we do not need to apply 3D transformations to elements. What should we do? In this case, we can use a trick to "cheat" the browser to enable hardware acceleration.

Although we may not want to apply 3D transformations to elements, we can enable the 3D engine. For example, you can use transform: translateZ (0); To enable hardware acceleration.

.cube {   -webkit-transform: translateZ(0);   -moz-transform: translateZ(0);   -ms-transform: translateZ(0);   -o-transform: translateZ(0);   transform: translateZ(0);   /* Other transform properties here */}

In Chrome and Safari, when we use CSS transforms or animations, the page may flash. The following code can fix this problem:

.cube {   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -ms-backface-visibility: hidden;   backface-visibility: hidden;    -webkit-perspective: 1000;   -moz-perspective: 1000;   -ms-perspective: 1000;   perspective: 1000;   /* Other transform properties here */}

In the webkit kernel browser, another effective method is

.cube {   -webkit-transform: translate3d(0, 0, 0);   -moz-transform: translate3d(0, 0, 0);   -ms-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0);  /* Other transform properties here */}

Native mobile applications can always use GPUs well, which is why they are better performing than Web apps. Hardware acceleration is especially useful on mobile terminals because it can effectively reduce the use of resources (MIC Note: mobile terminals have limited resources ).

Summary

It is unwise to apply the above methods only to the elements we need to achieve the animation effect.

Be careful when using these methods. If you pass your test, the results actually improve the performance, and you can use these methods. GPU may cause serious performance problems because it increases memory usage and reduces the battery life of mobile devices.

Have you used these methods in the project? If so, share your story.