Use CSS3 will-change to improve rendering performance such as Page scrolling and animation,

[Switch] Use CSS3 will-change to improve the rendering performance of pages such as scrolling and animation,
I. Let's look at an example.

The following example is from a foreign language.

Parallax scrolling is not quite popular now, and Chris Ruppel uses itbackground-attachment: fixedWhen the background image does not scroll with the scroll bar, it is found that the page rendering performance drops to 30 frames per second. This frame rate can be felt by the human eyes.

Later, I made some optimizations based on the suggestions of some other colleagues and then the page rendering performance --

This optimization is completely the feeling of constipation before it is optimized, and the feeling of being unable to pull out of the SLB is the feeling that the pants are too late to take off.

A brother has constipation, so he can't be in the toilet for a long time.
As he tried his best, he watched a buddy rush into the toilet like a wind and enter the position next to him. As soon as he entered, there was a storm, and the brother said with envy: I envy you!
The buddy said: envy, pants have not been taken off yet...

Everyone will be curious about what magic has been applied to improve rendering. Three small tips:

The related code is as follows (assuming the class name isfront):

. Front: before {content: ''; position: fixed; // replace background-attachment width: 100%; height: 100%; top: 0; left: 0; background-color: white; background: url (/img/front/mm.jpg) no-repeat center; background-size: cover; will-change: transform; // create a new rendering layer z-index:-1 ;}

OK, the main character is on the stage.will-changeWhat is this?

Ii. CSS3 will-change pink ink debut

CSS3will-changeIt is a standard web attribute. Although it is still in the draft phase, it has been around for some time and Chrome, FireFox, and Opera support compatibility.

This attribute is used to enhance the page rendering performance ". How is it enhanced?

We may have heard that 3D transform will enable GPU acceleration ①, for exampletranslate3D,scaleZBut these attributes are often calledhackAcceleration Method. We don't actually needzAxis changes, but it is still a false sample to declare, cheat the browser, this is actually a kind of inhuman approach.

① GPU is a graphics processor. It is a hardware related to processing and Drawing Graphics. GPU is designed for complex mathematical and geometric computing. It frees the CPU from the graphics processing tasks to execute other system tasks, for example, page calculation and re-painting.

Whilewill-changeIt was designed by nature, and he thought "I want to be distorted", courtesy and friendliness.

Instructor: "Please note that I am about to begin deformation ."

Haha, don't laugh. This is the case.

When we trigger a page to draw a large area through certain behaviors (click, move, or scroll), the browser is often not prepared and can only passively use the CPU to calculate and redraw, since there was no preparation in advance, it was difficult to cope with rendering. As a result, the frame was dropped and the frame was choppy. Whilewill-changeBefore the real behavior is triggered, I told the browser: "My browser will be deformed later. You are both mentally and physically prepared ". As a result, the browser pulled the GPU to cope with the upcoming deformation.

This is actually quite understandable, right? Make an appointment in advance, and suddenly make a visit.

The syntax for this attribute is as follows:

/* Keyword value */will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* <custom-ident> example */will-change: opacity;/* <custom-ident> example */will-change: left, top; /* Two <animateable-feature> examples * // * Global Value */will-change: inherit; will-change: initial; will-change: unset;

Where:
Auto
Just followwidth:autoIn fact, there is nothing to use. Yesterday, it was estimated that it was used to reset other awkward values.

Scroll-position
Tell the browser that I am about to roll.

Contents
Tell the browser that the content needs to be animated or changed.

<Custom-ident>
User-Defined recognition. The non-standard title should be the name of MDN, and the specification may be clearly written in the future. For exampleanimationThe name of the counter.counter-reset,counter-incrementDefinition name.

Two examples are shown above. One istransformOne isopacityAre common attributes of CSS3 animation. If a given attribute is an abbreviation, all attributes related to the abbreviation are changed. It cannot contain the following keywords:unset,initial,inherit,will-change,auto,scroll-position, Orcontents.

<Animateable-feature>
Animated Feature values. For exampleleft,top,marginAnd so on. Mobile Terminal, non-transform,opacityAttribute animation performance is low, so it is recommended to avoid usingleft/top/margin. However, if you think you aremarginAttribute milk big, need to use it, try to addwill-change:marginIt may also be smooth (mobile terminals are not yet well supported ).

Currently, the following are basically used:

.example {  will-change: transform;}

Iii. Notes for using CSS3 will-change

will-changeAlthough it can be accelerated, it must be used appropriately. Enabled globallywill-changeThe waiting mode is undoubtedly a dead end. Nima, think about it with your toes and you know that you can keep all the elements of your browser on standby for GPU rendering and acceleration at any time!

Speaking of this, I think of mobile GPU acceleration. Many self-held students write CSS 3 animations, or perform static attributes without moving them.translateZAnd other GPU hack attributes. Dear students, there is a price for GPU to improve the page rendering performance. What is the price for cell phone power. You really think there are good things like "you want to run a horse and never eat grass!

In normal times, CSS animation, normal rendering, and mobile phones can be relatively smooth. There is no need to sacrifice other things. The power on mobile phones is precious. If the h5 page is not smooth (especially for Android), check whether the animation attribute is used or the non-visual animation layer is not hidden.

Backwill-change. Similarly,will-changeWe should also be cautious when using it and follow the principle of minimizing influence. Therefore, in the first example, we used pseudo elements for independent rendering (although I didn't see where this stem is located ).

This article on the sitePoint website shows several processing examples:

Do not write it directly in the default status becausewill-changeWill always be hung:

.will-change {  will-change: transform;  transition: transform 0.3s;}.will-change:hover {  transform: scale(1.5);}

When the parent element hover is enabledwill-changeIn this way, it will automaticallyremoveThe trigger range is basically the valid Element range.

.will-change-parent:hover .will-change {  will-change: transform;}.will-change {  transition: transform 0.3s;}.will-change:hover {  transform: scale(1.5);}

If you use JS to addwill-changeEvents or animations must be completed in a timely mannerremoveFor example, when you click a button, another element is animated. Click the button. You must first press the button (mousedown) and then lift it up to start. Therefore, you canmousedownWhen you say hello, the animation ends with a callback, so (do not care about the details ):

Dom. onmousedown = function () {target. style. willChange = 'transform';}; dom. onclick = function () {// target animation beeps ...}; target. onanimationend = function () {// callback of animation end, remove will-change this. style. willChange = 'auto ';};

.

Iv. References

• Fix scrolling performance with CSS will-change property
• MDN: will-change
• An Introduction to the CSS will-change Property

The content of this article is collected in a foreign language and written in conjunction with your own understanding. The content has not been verified in person. Therefore, 100% is not guaranteed to be correct and is only for your reference.

If you have any inaccuracy in the text, please give me some corrections. Thank you for reading this article!

This article is an original article that contains script behaviors. It often updates knowledge points and fixes some errors. Therefore, repeat the original source to facilitate tracing and avoid misleading old mistakes, at the same time, it has a better reading experience.
Address: http://www.zhangxinxu.com/wordpress? P = 5025

(This article is complete)