CSS3 Will-change Improve page scrolling, animation and other rendering performance

First, take a look at an example

The following example comes from a foreign language, and I am simply reporting it here.

Parallax scrolling is not very popular now, then Chris Ruppel when its use background-attachment: fixed to achieve the background picture does not scroll with the scroll bar scrolling effect, found that the page's rendering performance fell to 30 frames per second, this frame-frequency human eyes can feel a certain sense of duncuo.

Later, the reference to some other colleagues or peer suggestions, did some optimization, and then, the page's rendering performance-

This optimization is completely constipation, feces can not pull out of the feeling, and optimization, is completely yixieqianli, pants are too late to take off the feeling.

A brother has constipation, in the toilet for a long time can not be like.
Is his hard work, see a friend of the wind like rushed into the toilet, into the position next to him, just go in there came a real storm, that brother envy to that friend said: "Man good envy you!"
The man said: envy What, trousers haven't off yet ...

You're going to wonder what this magic is doing to make the rendering so much more noticeable. 3 tips:

1. background-attachment: fixedChanged position: fixed to, because the front of this thing rolling real time calculation redraw;
2. The element with the background image is replaced with a ::before pseudo element;
3. Use of CSS3 will-change acceleration;

The relevant code is as follows (assuming the class name is front ):

. front::before {
    content: "";
    position:fixed; Instead of Background-attachment
    width:100%;
    height:100%;
    top:0;
    left:0;
    Background-color:white;
    Background:url (/img/front/mm.jpg) no-repeat Center Center;
    Background-size:cover;
    Will-change:transform; Create a new render layer
    Z-index:-1;
  }
 
OK, the protagonist is on the way, that is will-change , what is this ghost?
 
Second, CSS3 Will-change
 
CSS3 will-change belong to the Web standard properties, although it is still a draft phase, but it has been some time, the compatibility of this piece of Chrome/firefox/opera are supported.
 
 
This property is very simple, is "enhanced page rendering performance." So how is it enhanced?
 
We may have heard that 3D transform will enable GPU acceleration ①, for example, and so on, translate3D scaleZ but these properties are often referred to as hack acceleration methods. We don't actually need z the axis change, but it's also a fake bogus statement that deceives the browser, which is actually an inhumane way of doing things.
 

 

 
  
 
   
①gpu, a graphics processor, is the hardware associated with processing and drawing graphics. The GPU is designed to perform complex math and geometric calculations, freeing the CPU from the task of graphics processing, and performing additional system tasks, such as calculating and redrawing pages.
 
  

 
 
And will-change is born to this design, as implies meaning "I want to deformation", polite and friendly.
 

 

 
  
 
   
Geometry Teacher: "The students attention, I will start to deformation." ”
 
  

 
 
Haha, don't laugh. That's the way it is.
 
When we use some behavior (click, move or scroll) to trigger a large area of the page to draw, the browser is often not prepared, only passively using the CPU to calculate and redraw, due to the lack of preparation, to deal with rendering is too much, so the frame, so cotton. And will-change then the real behavior triggers before telling the browser: "Browser classmate, I will be deformed in a moment, you are psychologically and physically ready." As a then, the browser students to pull the GPU, calmly deal with the impending deformation.
 
This is actually very good understanding, yes, advance booking leisurely;
 
The syntax for displaying this property on MDN is as follows:
 
/* Keyword value *
/Will-change:auto;
will-change:scroll-position;
will-change:contents;
Will-change:transform;        /*  Sample * *
will-change:opacity;          /*  Example * *
will-change:left, top;        /* Two  examples

/* Global value *
/will-change:inherit;
will-change:initial;
Will-change:unset;
 
which
Auto
Just like width:auto , in fact, there is no egg to use, yesterday, it is estimated to be used to reset the other relative cock value.
 
Scroll-position
Tell the browser I'm going to start rolling.
 
Contents
Tell the browser that the content will be animated or changed.
 

As implies, custom recognition. Non-canonical salutation, should be mdn their own salutation, may be explicitly written to the specification later. Let animation 's say the name, the counter counter-reset , the counter-increment name of the definition, and so on.
 
The above shows 2 examples, one is transform opacity , is the CSS3 animation common properties. If the given property is abbreviated, all abbreviations related property changes will be triggered. It cannot be the following keyword values:,,,,,, unset initial inherit will-change auto scroll-position or contents .
 

Some characteristic values that can be animated. Let's say, left top margin sort of. Moving end, non transform , opacity properties of the animation performance are low, so it is recommended to avoid the use//flow of the left top margin unique and so on. However, if you think you are a margin property of the milk, you have to use it, try adding a will-change:margin may also be very smooth (mobile end of the current support is not very good).
 
For the moment, the use is basically:
 
. example {
  Will-change:transform
}
 
Three, CSS3 Will-change use the attention matters
 
will-changeAlthough it can speed up, however, must be used moderately. That kind of global all open will-change wait mode of practice, undoubtedly is dead. Ni ma, with toes to think also know, you let the browser elements are at any time GPU rendering acceleration standby, or to die!
 
Speaking of this, I thought of the GPU acceleration at the moving end. Many of the students who think they are writing CSS3 animation, or static properties, and so on the translateZ GPU hack attributes. Hey, guys, the GPU. Improve page rendering performance It has a price, what the price, is the cell phone power. Do you really think there is a "Marca, cake" good thing ah!
 
At ordinary times, we generally CSS animation, the usual rendering processing, mobile phones can be relatively smooth. There is absolutely no need to sacrifice anything else to achieve it. The battery on the phone is invaluable. If you find (especially Android) machine H5 page is not fluent, look for the animation properties to use the problem, or non-visual animation layer is not hidden and so on.
 
Back will-change . Again, will-change use caution and follow the principle of minimizing impact, so the first example is to use pseudo elements to make, independent rendering (although I do not see where this terrier is).
 
This article on the SitePoint website shows several examples of processing:
 
Do not write this directly in the default state because it will-change is always hanging:
 
. will-change {
  will-change:transform;
  Transition:transform 0.3s;
Will-change:hover {
  Transform:scale (1.5);
}
 
You can let the parent element hover, declare will-change , so that when you move out, it's automatically remove , and the scope of the trigger is basically a 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 will-change to add, the event or animation finished, must be timely remove . For example, click on a button, another element to animate. Click the button (click), First Press (MouseDown) and then lift before starting. So, you can say mousedown Hello, the animation ends with a callback, so (gesture, do not care about the details):
 
Dom.onmousedown = function () {
    target.style.willChange = ' transform ';
};
Dom.onclick = function () {
    //target animation beep-mile ...
};
Target.onanimationend = function () {
    //animation end callback, remove will-change
    this.style.willChange = ' auto ';
};
 
Wait