Repaint and Reflow usage in JavaScript _ basics

Do you often listen to senior or some front-end predecessors said that can not use CSS wildcard *,CSS selector cascade can not be more than three layers, CSS as far as possible using class selector, writing HTML less use table, the structure should be as simple as possible-dom tree small .... And so on, I've probably known that using wildcards or too many CSS selectors may degrade performance, so why not use the table label I have been in a daze, and then do so, but I know Repain and reflow after, the original these really can not use too much. OK, hope this article is helpful to you!

1. What is Repaint/reflow?

OK, first of all, the previous picture: Browser resolution of the approximate work flow

This diagram should be well understood and summarized into four steps:

1, parsing HTML to build a DOM tree: The rendering engine begins parsing HTML documents, converting HTML tags in the tree or JS-generated tags to DOM nodes, which is called the content tree.
2, the construction of rendering tree: parsing css (including external CSS files and style elements and JS generated style), according to the CSS selector to calculate the style of the node, create another tree-rendering tree.
3, Layout rendering tree: Recursive call from the root node, calculate the size and position of each element, give each node the exact coordinates that should appear on the screen.
4, rendering the render tree: Traversing the rendering tree, each node will use the UI back-end layer to draw.

Well, we can see that Repain and Reflow respectively appear in the third and fourth steps. So we give the following definition:

For each element in the DOM structure has its own box (model), these require the browser to compute according to various styles (browser, developer-defined, etc.) and place the element where it should appear based on the results of the calculation, a process called reflow; when the position, size, and other properties of various boxes, For example, color, font size, etc. are determined, the browser then put these elements are in accordance with their own characteristics of the plot, so the content of the page appears, the process called repaint.
It is obvious that these two things are very important to the browser rendering page, ah, it will affect performance, so we need to understand some common causes repaint and reflow some of the operations, and should be minimized to improve rendering speed.

2. Some operations that cause repain and reflow

The cost of reflow is much higher than the cost of Repaint. Every node in the DOM tree has a reflow method, and the reflow of a node is likely to cause the child nodes, even the parent points and the reflow of the sibling nodes. There may be nothing on some high-performance computers, but if reflow happens on the phone, the process is very painful and consumes power.
So the following actions are likely to be expensive.

• When you add, delete, and modify DOM nodes, it can cause reflow or Repaint.
• When you move the DOM's position or animate it.
• When you modify the CSS style.
• When you Resize the window (the mobile end is not the problem), or when scrolling.
• When you modify the default font for a Web page.

Note: Display:none triggers reflow, and Visibility:hidden only triggers repaint because no location changes are found.
3. How to optimize?

Reflow is unavoidable and can only minimize the effect of reflow on performance, giving the following tips:

Do not modify the style of the DOM in one way or another. Instead, you might as well define the CSS class in advance and then modify the DOM's className:

 Bad Writing
  var left = ten, top
  = ten;
  El.style.left = left + "px";
  El.style.top = top + "px";
  Recommended writing
  El.classname + = "Theclassname";

Take the DOM offline and then modify it. Such as:
A> uses the DocumentFragment object to manipulate the DOM in memory.
B> first give the DOM to Display:none (once repaint), and then you can change the way you want. For example, modify it 100 times and then show it to him.
c> Clone a DOM node into memory, and then how to change how to change, after the change, and the online exchange.

Do not put the attribute value of a DOM node in a loop as a variable in a loop. Otherwise, this can result in a lot of reading and writing to the properties of this node.

Modify the lower-level DOM nodes as much as possible. Of course, changing the DOM nodes at the bottom of the hierarchy may cause a large area of reflow, but it can also have a small range of effects.

For animated HTML components using fixed or absoult position, then modifying their CSS will greatly reduce reflow.

Never use a table layout. Because a small change can cause the entire table to be laid back.

Does knowing these things make you more interested in the principles of the browser? OK, I will update the article on the principle of the browser, or you can search others first, because I think it is really important to understand the principle of the browser, can help us write better performance website.