Let css javascript slow performance?
Will frequently trigger redraw the return will lead to frequent UI rendering, eventually leading to slower js.
There are two threads: one thread JavaScript parsing, rendering a UI thread is, in fact, the two are mutually exclusive two threads.
When javascript ui thread running thread is aborted pause, and vice versa.
Well, this is why?
The reason is that, when run on the ui thread pages rendered js script will inevitably involve changing some style on the page view, in order to make this change more accurately js script had to wait ui thread rendering is complete when it is to perform.
So when elements of a page style changes frequently when the ui thread will continue to render, resulting in belated reaction js code, the situation Caton.
Reflux
- 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)
- When the page layout and geometric properties change needs to reflux
-
Triggering a page layout attribute weight:
1, the box model will trigger re-layout-related attributes: width, height, padding, margin, Run the display, border-width, border, min-HEIGH.
2, the positioning and floating property will trigger re-layout: Top, bottom, left, right, position, a float, Clear
3, change the internal structure of the text node will trigger the re-layout: text-align = left, overflow-Y, font-weight, overflow, font-Family, Line-height, vertival-align = left, White-Space, font-size
Redraw
- 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.
-
只触发重绘的属性：
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline-color
outline
outline-style
outline-width
box-shadow
Summary: reflux will cause redraw and redraw will not necessarily cause reflux
Now we know that those attributes will trigger reflux, then how to avoid reflux it?
In fact, there are two methods:
First, do not use more than can trigger reflux of the layer properties,
Second, to establish a new layer, so that reflux in these layers inside, and limit the scope reflux redraw, reducing operator workload browser
New DOM process
1. After acquiring a plurality of layers is divided into a DOM
2. The nodes of each layer calculated pattern results (Recalculate style-- style weight)
3. For each node generates graphics and the position (Layout-- reflux relayout )
4. the filled layer of each node to draw bitmap (Paint Setup Paint-- and redraw)
5. uploaded layer as a texture to the GPU
6. the plurality of layers to conform to the page to generate the final screen image (Composite Layers-- layers reorganization)
Frequent reflux will redraw the DOM element alone as a separate layer, then the impact of this and return to redraw the DOM element only in this layer.
Chrome automatically created layers to create the conditions
- 3D or perspective transformation (perspective transform) CSS properties
- Using an accelerated video decoding <video> node
- 2D context has 3D (WebGL) context or the acceleration <canvas> node
- Hybrid plug-ins (like Flash)
- CSS opacity do on their own animation or use webkit transform an animated element
- It has accelerated CSS filter element
- There is a descendant element node contains composite layer (one element has a child element, the child elements in its own layer in)
- A lower element comprising a composite layer and a z-index sibling elements (in other words, the above elements are rendered in the composite layer)
How to create a layer l are two ways to manually:
- will-change:transform
- transform:translateZ(0)
Chrome browser more tools below Layers can view layers of information, rendering browser can view the page elements are being redrawn.
Layers can be reduced by redraw and reflux, but the consumption of the synthetic layer will therefore require a balance between the two!
Actual optimization points:
1. translate replace top change
2. opacity alternative visibility, but to also have translate3d or translateZ these attributes can create layers of existence can prevent backflow
3. Do not modify the DOM one by one style, pre-defined class, then modify the DOM className
4. modify the DOM offline, such as: first DOM to display: none (once Reflow), and then you modify 100 times, then put it out of the show, if you do need to use js to set up multi-dom bar style you can hide this dom first, and then set them
5. Do not put the property value DOM nodes in a loop as a loop in the variable. Browser has a buffering mechanism for returning that will be stored in a plurality of return inside the stack, when the stack is full browser will trigger a one-time change all style and refresh the stack. But if you get the actual style of these elements several times, the browser in order to give you an accurate answer will constantly refresh the buffer stack, resulting in increased page reflux. So in order to avoid this problem, you should use a variable to hold the loop in vitro.
6. Do not use table layouts, may be small, a small change will result in re-layout of the entire table of
choice to achieve the speed of the animation 7.
8. Create a new layer for animation, for frequent changes of its elements should be added to a transform property, for a video using the video tag
9. enable GPU hardware acceleration