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.