前端性能优化之重绘与回流

回流

    当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)；

    当页面布局和几何属性改变时就需要回流；

重绘

    当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

PS：回流必将引起重绘，而重绘不一定会引起回流。

 

触发页面重布局的属性

 

盒子模型相关属性会触发重布局：

• width                                    
• height
• padding
• margin
• display
• border-width
• border
• min-height

    

定位属性及浮动也会触发重布局：

• top

• bottom

• left

• right

• position

• float

• clear

 

 

改变节点内部文字结构也会触发重布局：

• text-align

• overflow-y

• font-weight

• overflow

• font-family

• line-height

• vertival-align

• white-space

• font-size

 

 

只触发重绘的属性

• color
• border-style
• border-radius
• visibility
• text-decoration
• background
• background-image
• background-position
• background-repeat
• background-size
• outline-color
• ouline
• outline-style
• outline-width
• box-shadow