Talking about the understanding of website performance optimization

This article describes the causes of performance problems and how to resolve them.

First, the process of Web page generation

To understand why Web page performance is not good, it is necessary to understand how the Web page is generated.

The process of generating a Web page can be roughly divided into five steps.

HTML code into DOM

CSS code converted to Cssom (CSS Object Model)

Combine DOM and Cssom to create a rendering tree (with visual information for each node)

Build layout to plane synthesize all nodes of all render trees

Draw the layout (paint) on the screen

In these five steps, the first and third steps are very fast and time-consuming are steps fourth and fifth.

The two steps, build layout (flow) and draw (paint), collectively referred to as render.

Second, rearrange and redraw

When a page is generated, it is rendered at least once. The process of user access also continues to be re-rendered.

The following three scenarios cause the Web page to be re-rendered.

Modifying the DOM

modifying style Sheets

User events (such as mouse hover, page scrolling, input box type text, change window size, etc.)

Re-render, you will need to regenerate the layout and redraw. The former is called "rearrangement" (reflow), which is called "redrawing" (repaint).

It is important to note that "redraw" does not necessarily require "reflow", such as changing the color of a page element, only triggering "redraw" and not triggering "reflow" because the layout has not changed. However, "reflow" inevitably results in "redrawing", such as changing the position of a page element, triggering "reflow" and "redraw" as the layout changes.

Third, the impact on performance

Reflow and redraw are constantly triggered, which is unavoidable. However, they are very resource-intensive and are the root cause of poor Web page performance.

Improve Web page performance is to reduce the "reflow" and "redraw" the frequency and cost, as little as possible to trigger re-rendering.

As mentioned earlier, Dom changes and style changes will trigger a re-rendering. However, the browser is already very smart, will try to put all the changes together, into a queue, and then one-time execution, try to avoid multiple re-rendering.

Div.style.color = ' Blue ';

Div.style.marginTop = ' 30px ';

In the above code, the DIV element has two style changes, but the browser only triggers a single reflow and redraw.

If it is not well written, it will trigger two reflow and redraw.

Div.style.color = ' Blue ';

var margin = parseint (DIV.STYLE.MARGINTOP);

Div.style.marginTop = (margin + ten) + ' px ';

After the above code sets the background color for the DIV element, the second line requires the browser to give the element a position, so the browser has to rearrange it immediately.

In general, after a style is written, the browser is immediately re-rendered if there are read operations for the following properties.

Offsettop/offsetleft/offsetwidth/offsetheight

Scrolltop/scrollleft/scrollwidth/scrollheight

Clienttop/clientleft/clientwidth/clientheight

getComputedStyle ()

Therefore, from a performance perspective, try not to read and write operations, put in a statement inside.

Bad

Div.style.left = Div.offsetleft + + "px";

Div.style.top = div.offsettop + + "px";

Good

var left = Div.offsetleft;

var top = Div.offsettop;

Div.style.left = left + ten + "px";

Div.style.top = top + ten + "px";

The general rules are:

The simpler the style sheet, the quicker it will reflow and redraw.

The higher the level of DOM elements that reflow and redraw, the higher the cost.

Table element Reflow and redraw costs are higher than DIV elements

Iv. Nine tips for high performance

There are some tricks that can reduce the frequency and cost of browser re-rendering.

The first one is that the DOM has multiple read operations (or multiple write operations) that should be put together. Do not add a write operation between the two read operations.

Second, if a style is re-queued, it is best to cache the result. Avoid the next time you use it, your browser will have to rearrange it again.

Third, do not change the style, but by changing the class, or Csstext properties, one-time changes in style.

Bad

var left = 10;

var top = 10;

El.style.left = left + "px";

El.style.top = top + "px";

Good

El.classname + = "Theclassname";

Good

El.style.cssText + = "; Left: "+ left +" PX; Top: "+ top +" px; ";

Fourth, try to use the offline DOM instead of the real web dom to change the element style. For example, manipulate the document fragment object and then add the object to the DOM when you are done. For example, use the CloneNode () method to operate on the cloned node, and then replace the original node with the cloned node.

Fifth, the element is set to Display:none (1 reflow and redraw required), then 100 operations are performed on the node, and then the display is restored (1 reflow and redraw required). This allows you to re-render two times instead of possibly up to 100 times.

Sixth, the Position property is a absolute or fixed element, and the cost of rearrangement is small because it does not take into account the effect it has on other elements.

Seventh, only when necessary, the display property of the element is visible, because invisible elements do not affect reflow and redraw. In addition, Visibility:hidden elements only have an effect on redrawing, and do not affect reflow.

Eighth, the use of Virtual Dom script library, such as react.

Nineth, use Window.requestanimationframe (), Window.requestidlecallback () Two methods to adjust the re-rendering (see the following article)

Talking about the understanding of website performance optimization