Browser for mobile high-performance CSS3 animations

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 choose to better the native implementation of the browser: CSS3 animation

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

The code is as follows:

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

The code is as follows:

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

As the following element moves right through Translate3d, the animation fluency of 500px is significantly better than using the Left property:

The code is as follows:

#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 Box-shadows and gradients as little as possible

Box-shadows and gradients are often page performance killers, especially when one element is used at the same time, so embrace a flat design.
As much as possible, let the animation elements not flow in the document to reduce reflow

The code is as follows:

Position:fixed;position:absolute;

Optimizing DOM Layout Performance

We begin by describing this topic from an example:

The code is as follows:

var newwidth = Ap.offset Width + 10;ap.style.width = newwidth + ' px '; var newheight = ap.offsetheight + 10;ap.style.height = newheight + ' px '; var newwidth = ap.offsetwidth + 10;var newheight = ap.offsetheight + 10;ap.style.width = newWidth + ' px '; ap.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:

The code is as follows:

Trigger two times Layoutvar newwidth = Ap.offsetwidth +;   Readap.style.width = newwidth + ' px ';     Writevar newheight = ap.offsetheight + 10; Readap.style.height = newheight + ' px ';   write//only triggers once layoutvar newwidth = Ap.offsetwidth +;   Readvar newheight = ap.offsetheight + 10; Readap.style.width = newwidth + ' px ';     Writeap.style.height = newheight + ' px ';   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 placed into the layout-queue, 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, can trigger layout of the operation, which operations will be layout of the update (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:

The code is as follows:

void Document::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 internal implementation of the Updatelayoutignorependingstylesheets 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 ()

"Recommended"

1. CSS3 Free Video Tutorial

2. H5+CSS3 code instances that implement picture fly-in and fade-out effects

3. Teach you to use CSS3 to make 8 kinds of loading animations

4. Teach you to use CSS to draw standard circular patterns

5. CSS3 a code tutorial to complete a box fillet effect