How to improve the performance of Web pages

1. Browser Rendering principle Analysis

Want to improve the performance of the Web page, the first is to understand the browser rendering principle, the following about the browser principle analysis, we take the chrome kernel WebKit as an example, the other kernel browser principle is basically similar, can comprehend by analogy.

As shown, the browser parsing page steps can be divided into:

* Parsing HTML (HTML Parser)

* Build dom Tree (DOM trees)

* Build Cssom tree (Style)

* Build a rendering tree (render trees)

* page layouts (layout)

* Draw render Tree (Painting)

This process can be seen in the timeline of the Chrome developer tool:

Here we briefly describe the following four concepts:

* Layouts (layout)

Layout is also called reflow or reflux, the layout process output is a "box model", it will accurately capture the exact location and size of each element in the viewport, HTML is a flow-based layout model, page element changes can often lead to the occurrence of reflux, and The frequent occurrence of reflux is also an important factor affecting the performance of the page , in addition, in the post-flow position usually does not affect the geometric characteristics of the pre-position, so the modification of the post-position is often more than the modification of the previous position on the overall impact of the page is lower.

* Draw (Paint)

Drawing is the DOM is divided into layers (layer) for the corresponding drawing, the page reflow will usually accompany the emphasis on painting, but the appearance of redrawing behavior does not necessarily accompany reflux.

* Render Layer

The concept of layers (layer) should not be unfamiliar to the people who have the basis of design, the images we see visually are based on overlapping of spatial layers, in general, nodes with the same coordinate space belong to the same render layer. The rendering layer was originally used to implement cascading contexts, which ensured that the page elements were synthesized in the correct order (composite) to achieve translucent overlap and other effects.

Conditions for creating a render layer:

* root element (HTML)

* with explicit position attribute (Relative,fixed,sticky,absolute)

* Transparent (opacity less than 1)

* With CSS filter (filter)

* CSS Mask property is available

* Currently there are animations for opacity,transform,fliter,backdrop-filter application

* The overflow attribute is not visible

* And so on ...

* Synthetic Layer

The composition layer is a special rendering layer, each composition layer has a separate drawing layer, the drawing context in the drawing layer is responsible for outputting the bitmap of the layer, the bitmap is stored in shared memory, as a texture uploaded to the GPU, and finally by the GPU to synthesize multiple bitmaps, and finally drawn to the screen, and relative to the composition layer, The general rendering layer is a drawing layer that is shared with the parent layer of the first drawing layer, promoted to the composition layer when the repaint or reflow itself, does not affect the other layers, in addition, the composite layer of the bitmap will be directly to the GPU synthesis processing, efficiency than the CPU high.

The trigger reason for the render layer to be promoted to the composition layer:

* Direct Reason

* iframe Video Canvas flash element has a transform

* Backface-visibility for Hidden

* Animation or transition applied to opacity, transform, Fliter, Backdropfilter

* Will-change (set to opacity, transform, top, left, bottom, right (where top, left, etc. need to set explicit positioning properties, such as relative, etc.))

* Reasons for future generations

* There are synthetic layer descendants at the same time have transform, opactiy (less than 1), mask, Fliter, reflection properties

* There are synthetic layer descendants at the same time itself overflow not visible

* There are synthetic layer descendants at the same time fixed positioning

* Synthetic layer descendants with transform have preserves-3d properties at the same time

* Synthetic layer descendants with transform have perspective properties at the same time

* Overlap reason

* Elements of the Border box (content + padding + border) and the composition layer overlap, margin overlap invalid

* elements may overlap with other elements while the animation is running

2. Operation and optimization analysis affecting the performance of the page

* Frequent manipulation of DOM elements

Using a JS script to manipulate DOM elements frequently is a major factor affecting page performance, and frequent manipulation of the DOM can lead to frequent page redraw and reflow, resulting in page lag and performance consumption issues, which can be optimized in detail as follows:

1) Working with document fragments

var fragment = document.createdocumentfragment (); // a number of DOM operations based on fragment ... document.getElementById (' myelement '). appendchild (fragment);

2) Set the display style of the DOM element to none before manipulating the element

var myelement = document.getElementById (' myelement '= ' None '; // a number of DOM operations based on MyElement  = ' block ';

3) Copy DOM elements into memory and manipulate them

var old = document.getElementById (' myelement '); var clone = Old.clonenode (true); // a number of clones-based operations ... old.parentNode.replaceChild (clone, old);

4) Cache style information with local variables to avoid frequent DOM data acquisition

// Bad operation  for (var i = 0; i < paragraphs.length; i++) {    = box.offsetwidth + ' px ';} // Better Operation var width = box.offsetwidth;  for (var i = 0; i < paragraphs.length; i++) {    = width + ' px ';}

5) merging multiple DOM operations

// Bad operation var left = ten, top = ten== left ; // Better Operation += "; Left: "+ left +" PX; Top: "+ top +" px; " ; // better operation (set the style content to a class name, then the element class name binding)  + = "Theclassname";

*css animation causes page not fluent problem analysis optimization

The use of CSS3 animation causes the page to not smooth and lag problem, the potential reason is often the page reflow and redraw, reducing the impact of the page animation elements on other elements is to improve the fundamental direction of performance, and the implementation can be as follows:

1) Set the animation element position style to absolute or fixed, can avoid the animation of the other elements of the page to affect, resulting in its reflow and redraw occurs;

2) Avoid using Margin,top,left,width,height and other properties to perform animation, replace with transform;

// Bad operation Div {       height:100px;       Transition:height 1s linear;   }   div:hover {       height:200px;   } // Better Operation Div {       Transform:scale (0.5);       Transition:transform 1s linear;   }   Div:hover {       Transform:scale (1.0);   

All in all, try to use transform and opacity to complete the animation, as these two properties prevent reflow and redrawing from occurring.

Page rendering of the pipeline can actually be simply expressed as the following steps, from a performance aspect, should try to avoid layout and paint two steps, only trigger composite steps, but currently can do this effect only transform and opacity two properties, It is also important to note that the transform and opacity do not trigger the paint when the element is promoted to the composition layer, otherwise it will still trigger.

3) Increase the composition layer reasonably to reduce unnecessary drawing and rearrangement of the page

The benefit of the composite layer is that it does not affect the drawing of other elements and is not affected by other layers, so we need to reasonably promote the elements or fixed elements in the animation effect to the composition layer for the performance loss caused by the previous effects.

The best way to lift the composition layer is to use the Will-change property of the CSS. Set Will-change to opacity, transform, top, left, bottom, right to promote the element to the composition layer.

{  will-change: transform;}

Will-target compatibility is as follows:

For browsers that are not yet compatible with this property, we use 3D transform instead

{  transform: translatez (0);}

For fixed position elements like the top bar of a page, the sidebar, etc., we can also promote it to a composite layer to avoid redrawing it by other elements, but be aware that the enhancement of the composite layer also means that the consumption of the performance increases, we must debug to detect a reasonable threshold, can not blindly improve the composition layer, in addition, Blind ascension of the synthetic layer may also result in overlapping of the additional synthetic layer, prone to the emergence of layer explosion, that is, the page cascading a large number of synthetic layer default promotion, it is recommended to use Google's timeline to monitor and debug, to avoid unnecessary accidental consumption.

How to improve the performance of Web pages