Render Optimization: repaint and reflow

Rendering optimization : Repaint (Repaint) And backflow (Reflow)

Interview questions

• Have you ever understood the concept of redrawing and rearrangement ？
• transform Is the offset of this attribute rearranged or redrawn ？
• If it is transform:rotate Whether the rotation is rearranged or redrawn ？
• When will backflow be triggered （ rearrangement ） Redraw ？
• css Will asynchronous loading of files cause redrawing or reflow , Tell me your reason

What is redraw and reflow

Page layout is also called redrawing (Repaint) And backflow (Reflow)

• backflow : Recalculate the... Of each box on the page according to various styles Size and location
  When we are right DOM The modification of caused DOM Changes in Geometry （ For example, change the width of an element 、 High or hidden elements, etc ） when , The browser needs to recalculate the geometric properties of the elements , Then draw out the result of calculation

• When calculating the position of the box model 、 After size and other attributes , The browser draws according to the characteristics of each box
  When we are right DOM The modification of led to Change of style （color or background-color）, Without affecting its geometric properties , The browser doesn't have to recalculate the geometry of the element 、 Draw a new style directly for the element , This only triggers the backflow

Backflow must redraw , Repainting does not necessarily cause backflow .

Trigger timing of redrawing and reflow

backflow

• DOM Elemental Geometric properties change
• change DOM Tree structure
• Get the values of some specific properties :offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight.
  reason : Browser optimization mechanism

Browser optimization mechanism

Because each reflux will cause additional calculation consumption , So most browsers will pass Queue modification and batch execution to optimize the reflow process . The browser will The modification operation is put into the queue , Until some time has passed or the operation has reached a threshold , Before emptying the queue

When you get the operation of the layout information , The browser will empty the queue , Triggers a backflow redraw to return the correct value , So it will force the queue to refresh

Optimization plan

1. Use visibility Replace display: none , Because the former only causes a redraw , The latter causes backflow

visibility And display The difference between
display:none stay DOM Delete node from tree
visibility:hidden The node is still DOM There are... On the tree , Hide in the interface , Occupy a place in the document flow

2. Avoid using JavaScript Make frequent changes to the style , If it must be modified , You can reduce the number of times to trigger redrawing or reflow in the following ways

   • Use the class name to modify the style one by one . stay js So let's define one css class , Add a class to the specified element
   • Operate special attributes for many times, such as offset attribute , Intermediate variables can be used to cache , Submit it to offset
   • adopt JS Set element properties display: none, Remove it from the page , Then follow up ( Offline operation ), Set the attribute after the operation display: block
   • Complex animation effects , Use absolute positioning to detach it from the document stream , Avoid affecting other layers .

3. css3 Hardware acceleration （GPU Speed up ）
   principle ： Skip redrawing and reflow , Go directly to the synthesis stage
   Different layers don't interact with each other
   Common trigger for hardware acceleration css attribute ：transform、opacity etc.

JS Realization of animation :requestAnimationFrame Tell the browser —— You want to perform an animation , It also requires the browser to invoke the specified callback function before updating the animation next time