Layer and redraw rearrangement
css layer
When the browser renders a page, it divides the page into many layers, the layers are large and small, and each layer has one or more nodes.
When rendering the DOM, the actual work done by the browser is :
1. After obtaining the DOM, divide it into multiple layers
. 2. Calculate the style results for the nodes of each layer (Recalculate style-style recalculation)
3. Generate graphics and positions for each node (Layout-layout, rearrangement, reflow)
4. Paint and fill each node into the layer bitmap (Paint-redraw)
5. Upload the layer to the GPU as a texture
6. Multiple combinations Layers to the page to generate the final screen image (Composite Layers-layer reorganization)
Conditions for layer creation
Chrome browser will create a layer when any of the following conditions are met :
1. Have CSS properties with 3D transformation
2. Use accelerated video decoding nodes
3. Node
4. CSS3 animation nodes
5. Elements with CSS acceleration properties (will- change)
Layer model
Repaint
Redrawing is a browser behavior triggered by a change in the appearance of an element, such as changing attributes such as outline and background color. The browser will redraw according to the new attributes of the element to give the element a new appearance. Redrawing will not bring about re-layout, so it is not necessarily accompanied by rearrangement.
It should be noted that the redrawing and rearrangement are all based on the layer. If an element in the layer needs to be redrawn, the entire layer needs to be redrawn.
So in order to improve performance, we should let these things changes have own a layer,
but fortunately most browsers automatically creates its own layer to CSS3 animation nodes.
Rearrangement (Reflow also known as: reflow)
When the render object is created and added to the render tree, it does not contain position and size information. The process of calculating these values is called layout or rearrangement.
"Redrawing" does not necessarily require "reflowing". For example, changing the color of a web page element will only trigger "redrawing", not "reflowing", because The layout has not changed.
"Reflow" will lead to "redraw" in most cases. For example, changing the position of a web page element will trigger both "reflow" and "redraw" because the layout changes.
Properties that trigger redraw
* color * background * outline-color
* border-style * background-image * outline
* border-radius * background-position * outline-style
* visibility * background-repeat * outline-width
* text-decoration * background-size * box-shadow
Attributes that trigger rearrangement (reflow)
* width * top * text-align
* height * bottom * overflow-y
* padding * left * font-weight
* margin * right * overflow
* display * position * font-family
* border-width * float * line-height
* border * clear * vertival-align
* min-height * white-space
Common actions that trigger reflow
Reflow (rearrangement) cost than the Repaint (redraw) the cost is much much higher
Reflow a node is likely to result in a child node, even Reflow parent point and peer nodes.
On some high-performance computers, it may not matter, but if Reflow happens on a mobile phone, then this process is very painful and power-consuming .
Therefore, the following actions are likely to be relatively expensive.
When you add, delete, or modify DOM nodes, it will cause Reflow and Repaint.
When you move the position of the DOM
when you modify the CSS style.
When you resize the window (the mobile terminal does not have this problem, because the zoom of the mobile terminal does not affect the layout viewport)
when you modify the default font of the web page.
[When getting some attributes (width, height...)! ! ! ! ! 】
Note: display:none will trigger reflow, and visibility:hidden will only trigger repaint, because there is no position change
Optimization plan (redraw and rearrange)
We know: go through the following browser page rendering and detailed link:
1. Calculate the results need to be loaded on to the style of nodes (Recalculate style- style recalculation)
2. For each node generates graphs and location (Layout- weight Row or reflow)
3. Fill each node into a layer (Paint-repaint)
4. Combine layers on the page (Composite Layers-layer reorganization)
If we need to improve performance, all we need to do is to reduce the browser The work that needs to be done at runtime is to reduce 1234 steps as much as possible .
[Specific optimization schemes are as follows]:
1. Try to use CSS3 transform to replace top left and other operations when transforming element positions. Transform
and opacity only affect the combination of layers.
2. [Use opacity to Instead of visibility]
(1). Using visibility does not trigger reflow, but it still redraws.
(2). Use opacity directly to trigger redrawing and rearrangement (this is the underlying design of GPU!).
(3). Opacity is used in conjunction with layers, which means neither redrawing nor rearranging is triggered.
Reason: When the
transparency is changed, the GPU simply reduces the alpha value of the texture that has been painted before to achieve the effect, and does not need to redraw as a whole.
But the premise is that the modified opacity itself must be a layer.
3. [Do not use table layout]
table-cell
4. Combine [multiple operations of changing style attributes into one] operation
Do not modify the DOM style one by one, define the class in advance, and then modify the className of the DOM
5. [ Change Modify the DOM after offline]
Since the element whose display attribute is none is not in the render tree, operations on hidden elements will not cause other elements to be rearranged.
If you want to perform complex operations on an element, you can hide it first, and then display it after the operation is complete. This only triggers 2 rearrangements when hidden and displayed.
6.【Using document Fragment】------Vue uses this method to improve performance.
7. [Do not put the attribute values of certain DOM nodes as variables in a loop]
When you request some style information from the browser, the browser will flush the queue, such as:
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width, height
When you request some of the above attributes, the browser needs to refresh in order to give you the most accurate values Internal queue, because there may be operations in the queue that affect these values. Even if you get the layout and style information of the element that has nothing to do with the recent or changed layout information, the
browser will forcibly refresh the rendering queue.
8. In the process of animation implementation, enable GPU hardware acceleration: transform: tranlateZ(0)
9. Create a new layer for animation elements and increase the z-index of animation elements
10. When writing animations, try to use the following API
The cost of redrawing
requestAnimationFrame ---- request animation frame
1. window.requestAnimationFrame()
Description: This method will tell the browser to call the function you specify before the next redrawing
. 1. Parameters: This method uses a callback function as a parameter. This callback function will be called before the next redrawing of the browser.
The callback function will be automatically passed in a parameter, DOMHighResTimeStamp, which identifies requestAnimationFrame()the current time when the callback function is triggered
Return value :
a long integer, request ID, which is the only identifier in the callback list. It is a non-zero value and has no other meaning. You can pass this value towindow.cancelAnimationFrame()to cancel the callback function.
Note :
If you want to continue to update the next frame of animation before the next browser redraw, then the callback function itself must be called againwindow.requestAnimationFrame()
2. window.cancelAnimationFrame(requestID)
Cancel an window.requestAnimationFrame()animation frame request that was previously added to the plan by calling the method.
The requestID is window.requestAnimationFrame()the value returned when the method is called previously , it is a time identifier, and its usage is similar to the id of the timer.