The front end of basic skills (D): optimization of performance you really understand reflux, and redraw the synthetic layer it?

1. page rendering process

1. The browser to get the HTML code that parsed into a DOM tree, each tag in HTML DOM tree is a node, the root is our common document object. DOM tree contains all HTML tags, including display: none to hide, as well as with elements such as JS dynamically added.
2. All style browser (user-defined CSS and user agents) to resolve style structure, parsing process will remove the browser does not recognize a pattern, such as pattern -moz IE will be removed at the beginning, but will remove an _ FF style.
3. After DOM Tree Construction render tree structure and style compositions, render tree similar DOM tree, but great difference, pattern recognition can render tree, each NODE render tree has its own style, and render tree does not contain hidden nodes (such as display: none of the nodes, as well as head node), because these will not be used to render nodes, and will not affect the presentation, it will not be included in the render tree. Note visibility: hidden hidden element will still included in the render tree, because visibility: hidden would affect the layout (layout), will occupy space. The CSS2 standard, each node in the render tree are called Box (Box dimensions), page elements to be understood that a filled box, margins, borders, and having position.
4. Once the render tree building is completed, the browser can be drawn based on the page render tree.

2. What is reflux and repaints

1. When a part (or all) because of the size of the element size, layout, hide and other changes in the render tree and needs to be rebuilt. This is called reflow (reflow). Each page needs to reflux at least once, when the page is first loaded. When reflux, the browser will make part of the tree affected by the failure to render and re-render this part of the tree structure, after the completion of the reflux, the browser will repaint the affected portion of the screen, the process becomes redrawn.
2. When the render tree some elements need to be updated attributes, but these attributes only affect the element of appearance, style, and will not affect the layout, such as background-color. It is called is called redraw.
3. Reflux will cause redraw and redraw will not necessarily lead to reflux.

repaint, it is the browser that elements of this process had to be repainted after the element without affecting the layout. For example, we changed the color of the element, add underline.

reflow, the browser that had a style change elements of the document tree layout influential, re-publishing the work of all the affected nodes dom

3. reflux occurs Scene

When the page layout and geometric properties change needs to reflux.

1. Add or remove visible DOM element;
2. Element position change;
3. Changing the element size - margins, padding, borders, width and height
4. Content changes - such as text or image size is changed to change the calculated width and height changes caused;
5. Page rendering initialization;
6. Browser window size is changed --resize event;

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));
复制代码

4. Effect reflux and redraw

The proportion of the cost of reflux painted to higher expenses with reflux render tree how many nodes need to rebuild the relationship, assuming you directly manipulate body, such as the front insert an element in the body, cause the entire render tree reflux, so the cost of course, will be relatively high, but if it is inserted into a body refers back elements, it does not affect the front element reflux.

5. How to deal with browser

JS sentence operations to reflux redrawn, the browser might not stand.

The browser will maintain a queue, all cause reflux into the queue redraw operations, and other operations in the queue to a certain number or to a certain time interval, the browser will flush the queue, perform a batch . This will allow reflux many times, become a redraw redraw reflux.

Although there has been optimizing browser, but sometimes we write some code could force the browser to advance flush queue, so optimizing the browser might not achieve the effect. When you request by asking for style information to the browser, it will allow the browser to flush the queue:

1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. Requested getComputedStyle (), or IE, currentStyle

When you ask some of the properties above, the browser in order to give you the most accurate values, it is necessary flush the queue, the queue may be affected because of the operation of these values. Even if you get the layout information layout and style information element with the recent occurrence or change regardless of the browser will be forced to refresh render queue. To ensure that the engine will re-render the values ​​obtained in real time.

6. How to reduce reflux and repaints

Reduce reflux, in fact, is the need to reduce redraw operation on the render tree of the (many times more than the combined DOM and style changes), and to reduce the number of requests for information style, try to use good optimization strategy browser.

1. Calculation of the Render Tree usually need only to traverse once to complete, with the exception of table and interior elements, they may be necessary to calculate the time it usually takes three times the same element, which is the reason why avoid using table layout one.
2. Possible changes in class at the very end of the DOM tree. Multilayer avoid setting inline styles. The animation is applied to the element absolute position property or fixed for. Avoid using CSS expressions (eg: calc ()).
3. Avoid frequent operation pattern, the best one-time override the style property, or the style list is defined as a class and a one-time change the class attribute. Avoid frequent operation DOM, create a documentFragment, apply all DOM operations on it, then add it to the final document. Alternatively, you can set the display to the elements: none, after the end of the operation to be displayed it. Because it would not lead to reflux and redraw the DOM operation display attribute on the element none performed. Avoid frequent reads cause reflux redraw the property /, if you do need to use multiple times, use a variable cached. The use of elements with complex animations absolute positioning, so that it flows out of the document, otherwise it will cause the parent element and subsequent elements frequently reflux.

6. understand once again display: none and visibility: hidden similarities and differences

1. Both can be hidden node on the page.
   • display: none to hide elements after not occupy any space. Its width, height, and other property values ​​will be "lost"
   • visibility: hidden hidden element space remains. It still has the attribute value of the height, width, etc.
2. A performance perspective, that is, with respect to reflux redraw.
   • display: none will trigger reflow (reflow)
   • visibility: hidden triggers only repaint (redraw), because there is no change in the position found

They both visibility in optimization: hidden will become better, because it away because we do not change the document has defined the hierarchy display.

3. The impact of the sub-elements
   • display: none Once the parent element of the application display: none, the parent node and its descendants all the elements are not visible, but regardless of their children and grandchildren how to set the display element values ​​are not displayed;
   • visibility: hidden once the parent element applied visibility: hidden, it will also all future generations are not visible. But there is hidden "failure" of the situation. When their children and grandchildren elements applied visibility: visible, then the descendant elements will emerge.

Wireless performance optimization: Composite

A Web page display, it simply can be considered experienced the next few steps.

Performance Optimization

Upgraded to synthetic layer simply to have the following benefits:

1. Bitmap synthetic layer, the synthesis will be referred to GPU, the CPU faster than
2. When you need to repaint, just need to repaint itself, it will not affect the other layers
3. For transform and opacity effects, does not trigger layout and paint

1. To enhance the animation elements

The benefits of the synthetic layer will not affect the other elements drawn, therefore, in order to reduce the impact on other elements of animated elements, thereby reducing the paint, we need to animate the elements upgraded to synthetic layer.

The best way is to enhance the use of the synthetic layer will-change CSS property. Causes from a synthetic layer, it is known to will-change opacity, transform, top, left, bottom, right lifting element can be a synthetic layer.

#target {
  will-change: transform; //兼容性不好
}
//对于那些目前还不支持 will-change 属性的浏览器
//目前常用的是使用一个 3D transform 属性来强制提升为合成层
#target {
  transform: translateZ(0);
}
复制代码

Note, however, do not create too many rendering layer. Because each create a new render layer, it means that the new memory allocation and more complex layers of management.

If you have put a new element into a synthetic layer where you can do so using the Timeline to confirm whether it improves rendering performance. Do not blindly upgrade synthetic layer, we must analyze their actual performance.

2. Use transform or opacity to achieve animation effects

In fact, from a performance standpoint, the ideal layout and rendering pipeline is not part of the draw, you can do just merge synthetic layer:

To achieve these results, we need to use only those attributes that trigger only the Composite. Currently, only two properties that meet this criteria: transforms and opacity.

3. Reduce the drawing area

1. For the region does not need to be repainted should be avoided drawn to reduce the drawing area, such as a fix fixed in the top of the page navigation header, when the contents of a page area repaint, including the entire screen will also be re-fix the header painted.
2. As for the fixed area, which we expect it will not be redrawn, so by previous methods, which is independent of the lifting synthetic layer.

4. synthesized sound management layer: Create a new layer synthesis is not free, it must consume additional memory and resource management. In fact, the limited memory resources of the device, the synthetic layer to bring improvement in performance lags far behind the possible negative effects of excessive synthetic layer overhead performance brought to the page.

Most people like to use translateZ (0) to carry out so-called hardware acceleration to improve performance, but the performance is optimized and there is no "silver bullet", translateZ (0) No, optimization tips listed in this article no. Despite the detailed analysis of a page, any performance optimizations are untenable, blindly use some optimization measures, the result may be counterproductive. So practical to analyze the actual performance of the page, continuous improvement testing, optimization is the right way.

Reference document: Taobao FED

Front-end address everyone to learn together: Front-End-Web-Developer-Interview

Reproduced in: https: //juejin.im/post/5cf623c9f265da1b6d401198