[Front-end learning - CSS (20) reflow (reflow) and redrawing]

1. What is the difference between reflow (rearrangement) and redrawing?

Reflow (rearrangement) , reflow: when a part (or all) of the render tree needs to be rebuilt because of changes in the size of elements 尺寸, 布局, etc.;隐藏

Repainting (repaint) : When some elements in the render tree need to update attributes, and these attributes only affect the elements 外观, 风格it 不会影响布局时is called repainting, such as color changes, etc.

NOTE: Every page 至少需要引发一次reflow+repaint 重排(回流)一定will fire 重绘.

Conditions that trigger rearrangement (reflow):

  • Add or remove visible dom elements;
  • The position of the element has changed;
  • The size of the element has changed, such as geometric attributes such as margins, width and height have changed;
  • Content changes, such as picture size, font size change, etc.;
  • Page rendering initialization;
  • The size of the browser window changes, such as when a resize event occurs;

Tips : Reflow is understood as flow, and flow will naturally cause layout changes; redrawing can be understood as surface painting, so it is only a change in appearance.


 

Guess you like

Origin blog.csdn.net/weixin_60364883/article/details/123055310