Performance optimization


##Performance optimization

Choose high-consuming styles carefully

High-consuming attributes require the browser to perform a lot of calculations before drawing:

  • box-shadows

  • border-radius

  • transparency

  • transforms

  • CSS filters (performance killer)

Avoid excessive reflow

When reflow occurs , the browser needs to recalculate the layout position and size, more details.

Common reordering elements:

  • width

    • ##height

    • padding

    • margin

    • display

    • border-width

    • position

    • top

    • left

    • right

    • bottom

    • font-size

    • float

    • text-align

    • overflow-y

    • font-weight

    • overflow

    • font-family

    • line-height

    • vertical-align

  • ## clear

  • white-space

  • min-height

  • Use Display properties correctly
Display attribute will affect the rendering of the page, please use it reasonably.

display: width, height, margin, padding and float should not be used after inline;

  • display: should not be used after inline-block Use float again;

  • display: block should not be used after vertical-align;

  • display: table-* should not be used after margin or float;

  • Don’t abuse Float
Float requires a large amount of calculation during rendering, so use it as little as possible.

Animation Performance Optimization

The implementation principle of animation is to take advantage of the "persistence of vision" phenomenon of the human eye to continuously play several still pictures in a short period of time, so that the naked eye due to visual impairment can The image creates an illusion and mistakenly thinks that the picture is "moving".

Basic concepts of animation:

Frame: During the animation process, each still picture is a "frame";

  • Frame rate: The number of still pictures played per second, the unit is fps (Frame per second);

  • Frame duration: That is the duration of each still picture Time, the unit is usually ms (milliseconds);

  • Frame skipping (dropped frame/dropped frame): In animation with a fixed frame rate, the duration of a certain frame is much longer than the average frame duration, resulting in subsequent frames being squeezed and lost.

  • The rendering refresh rate of general browsers is 60 fps, so in web pages, animations with a frame rate of 50-60 fps will be quite smooth and comfortable.

If you use animation based on javaScript, try to use requestAnimationFrame. Avoid using setTimeout, setInterval.

  • Avoid using jQuery animate()-style Changing the style of each frame and using CSS to declare animations will result in better browser optimization.

  • Using translate instead of absolute positioning will get better fps and the animation will be smoother.

Use more hardware capabilities, such as turning on GPU acceleration through 3D deformation

Generally in Chrome, 3D or perspective transform CSS properties and opacity CSS The animation will create a new layer. Under the optimization of the hardware-accelerated rendering channel, after the GPU completes operations such as 3D deformation, the layer will be composited (Compesite Layers) to avoid triggering large-scale redrawing and rearrangement of the browser.

Note: 3D deformation will consume more memory and power consumption.

The animation smoothness of using translate3d to move 500px to the right is significantly better than using left directly: 

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

Improve CSS selector performance

The impact of CSS selector on performance comes from The time spent by the browser when matching selectors and document elements, so the principle of optimizing selectors is to try to avoid using selectors that consume more matching time. Before that, we need to understand the CSS selector matching mechanism, such as sub-selector rules: 

#header > a {font-weight:blod;}

Most of us read from left to right and habitually set browsing settings. The server also matches rules from left to right. It is speculated that the overhead of this rule is not high.

We will assume that the browser works in this way: it looks for the element with the id of header, and then applies the style rules to the a element in the direct child element. We know that there is only one element in the document with the id header, and it only has a few children of the a element, so this CSS selector should be quite efficient.

In fact, on the contrary, CSS selectors match rules from right to left. After understanding this mechanism, the seemingly efficient selector in the example has a very high matching cost in practice. The browser must traverse all a elements in the page and determine whether the id of its parent element is header.

If you change the child selector of the example to a descendant selector, it will cost more. After traversing all a elements in the page, you need to traverse their superiors until the root node. 

#header  a {font-weight:blod;}

After understanding the mechanism of CSS selector matching from right to left, we understand that as long as there are other selectors to the left of the current selector, the style system will continue to move to the left until it finds a selection that matches the rule. character, or exit due to mismatch. We call the rightmost selector key selector. ——More details

1. Avoid using universal selectors

/* Not recommended */
.content * {color: red;}

After matching all the elements in the document, the browser will match elements with class content upwards one level at a time until the root node of the document. . Therefore, the matching overhead is very large, so the use of key selectors that are wildcard selectors should be avoided.

2. Avoid using tags or class selectors to limit id selectors

/* Not recommended */
button#backButton {…}
/* Recommended */
#newMenuIcon {…}

3. Avoid using tags to limit class selectors

/* Not recommended */
treecell.indented {…}
/* Recommended */
.treecell-indented {…}
/* Much to recommended */
.hierarchy-deep {…}

4. Avoid using multi-layer tag selection device. Use class selector replacement to reduce css search

/* Not recommended */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* Recommended */
.treecell-mailfolder {…}

5. Avoid using sub-selectors

/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}

6. Use inheritance

/* Not recommended */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* Recommended */
#bookmarkMenuItem { list-style-image: url(blah) }