Use CSS to turn on hardware acceleration to improve website performance

Source: Internet
Author: User
Tags 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.