High performance CSS3 animations

High performance CSS3 animations

The high-performance mobile web is more complex than the PC scenario, and we summarize the following points: flow, power, and smoothness. In the PC era, we are more about the experience of fluency, and in the mobile side of the rich scene, need to pay extra attention to the user base station network traffic usage, equipment consumption situation.

On the smoothness, mainly reflected in the front-end animation, in the existing front-end animation system, there are usually two modes: JS animation and CSS3 animation. JS Animation is a scheme to realize the animation ability by JS dynamic rewriting style, which is a recommended solution in the PC-side compatible low-end browser. On the mobile side, we selectively have a better browser-native implementation scenario: CSS3 animations.

However, CSS3 animation in the mobile multi-terminal equipment scene, compared to the PC will face more performance problems, mainly reflected in the animation of the lag and flicker.

There are several main ways to enhance the mobile CSS3 animation experience at present:

Leverage hardware capabilities as much as possible, such as using 3D variants to turn on GPU acceleration

-webkit-transform:translate3d (0, 0, 0);-moz-transform:translate3d (0, 0, 0);-ms-transform:translate3d (0, 0, 0); Transform:translate3d (0, 0, 0);

If the animation process flashes (usually at the beginning of the animation), you can try the following hack:

-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 : +;

As the following element moves through translate3d the right 500px motion, the fluidity of the animation is significantly better than the use of left properties:

#ball-1 {Transition-webkit-transform.5s ease; -webkit-transform: translate3d (0, 0, 0);}  #ball -1.slidein {-webkit-transform: translate3d (500px, 0, 0);}  #ball-2 {transition: left .5s ease; left: 0;}  #ball -2.slidein {left: 500PX;}               

Note: 3D distortion consumes more memory and power, and should actually have performance problems before you use it, and weigh

Use as little as possible box-shadowsAnd gradients

box-shadowsand gradients often are page performance killers, especially when one element is used at the same time, so embrace the flat design bar.

As much as possible, let the animation elements not flow in the document to reduce reflow

position: fixed;position: absolute;

Optimizing DOM Layout Performance

We begin by describing this topic from an example:

var newWidth = aDiv.offsetWidth + 10;aDiv.style.width = newWidth + ‘px‘;var newHeight = aDiv.offsetHeight + 10;aDiv.style.height = newHeight + ‘px‘;var newWidth = aDiv.offsetWidth + 10;var newHeight = aDiv.offsetHeight + 10;aDiv.style.width = newWidth + ‘px‘;aDiv.style.height = newHeight + ‘px‘;

This is the exact equivalent of two pieces of code, the difference between explicit differences and, as we can see, only the order of execution. But is it true? The following is a code version with explanatory notes, which is a good illustration of the further differences:

Two-time layout triggeredvar newwidth=Adiv.Offsetwidth+10;ReadAdiv.Style.Width= Newwidth+' px‘;Writevar newheight=Adiv.Offsetheight+10;ReadAdiv.Style.Height= Newheight+' px‘;WriteOnly one layout is triggeredvar newwidth=Adiv.Offsetwidth+10; //readvar newheight = adiv. offsetheight + 10; //readadiv. Style. width = newwidth +  "; //writeadiv. Style. height = newheight +  "; //Write            

Rules can be found from the annotations, continuous reading of the Offsetwidth/height property and continuous setting of the Width/height property, the layout can be triggered less than a single property read individually.

The conclusion seems to be related to the execution queue, yes, this is the browser's optimization strategy. All actions that trigger layout are temporarily put layout-queue in, and when it has to be updated, the results of all operations in the entire queue are calculated, so that only one layout can be performed to improve performance.

Key one, layout the actions that can be triggered, what actions will be updated with the layout (also known as reflow or relayout )?

We start from the source of the browser, open source Webkit/blink as an example, the layout of the update, Webkit mainly through Document::updatelayout and Document:: Two methods of Updatelayoutignorependingstylesheets:

voidDocument::updatelayout () {ASSERT (Ismainthread ()); frameview* Frameview =View ();if (Frameview && frameview->Isinlayout ()) {Assert_not_reached ();Return }if (element* oe =Ownerelement ()) oe->Document ()UpdateLayout ();Updatestyleifneeded (); Stackstats::layoutcheckpoint Layoutcheckpoint;if (Frameview &&Renderer () && (frameview->Layoutpending () | |Renderer ()Needslayout ())) frameview->Layout ();if (M_focusednode &&!m_didpostcheckfocusednodetask) {Posttask (Checkfocusednodetask::create ()); M_didpostcheckfocusednodetask =true;} void document::updatelayoutignorependingstylesheets () { bool oldignore = m_ignorependingstylesheets; if (! Havestylesheetsloaded ()) {m_ignorependingstylesheets = true; htmlelement* bodyelement = body (); if (bodyelement &&!bodyelement->renderer () && m_ Pendingsheetlayout = = nolayoutwithpendingsheets) {m_pendingsheetlayout = didlayoutwithpendingsheets; styleresolverchanged (recalcstyleimmediately); } else if (m_hasnodeswithplaceholderstyle) recalcStyle ( Force); } updatelayout (); m_ignorependingstylesheets = Oldignore;}       

From the updateLayoutIgnorePendingStylesheets internal implementation of the method, it is also an extension of the updateLayout method, and in the existing layout update mode, most of the scenes are called Updatelayoutignorependingstylesheets to update the layout.

Search for code in the Webkit implementation that calls the Updatelayoutignorependingstylesheets method, resulting in the following actions that can cause the layout to be triggered:

• Element: ClientHeight, ClientLeft, ClientTop, clientwidth, Focus (), Getboundingclientrect (), Getclientrects (), InnerText, Offsetheight, Offsetleft, OffsetParent, OffsetTop, offsetwidth, Outertext, Scrollbylines (), Scrollbypages (), ScrollHeight, scrollIntoView (), scrollintoviewifneeded (), ScrollLeft, ScrollTop, ScrollWidth

• Frame, HTMLImageElement: Height, Width

• Range: Getboundingclientrect (), Getclientrects ()

• SVGLocatable: COMPUTECTM (), Getbbox ()

• SVGTextContent: Getcharnumatposition (), Getcomputedtextlength (), Getendpositionofchar (), Getextentofchar (), GetNumberOfChars (), Getrotationofchar (), Getstartpositionofchar (), Getsubstringlength (), selectsubstring ()

• SVGUse: InstanceRoot

• window: getComputedStyle (), Scrollby (), ScrollTo (), Scrollx, scrolly, Webkitconvertpointfromnodetopage (), Webkitconvertpointfrompagetonode ()

High performance CSS3 animations