重绘、重排

重绘、重排

什么是重绘

当渲染树上更新一些只影响外观、颜色、透明度而不影响布局的属性时，就叫重绘

什么是重排（回流）

页面渲染时，当页面中元素的位置，大小或结构、定位发生改变，或者对HTML结构增删查改时，浏览器会对所有的dom进行重新排序，这就是DOM回流，严重影响浏览器性能

重绘的几种情况

color ， border-style , visibility ,text-decoration , background
background-image , background-position , background-repeat
background-size , outline-color , outline , outline -style , outline-width , box-shadow

重排的几种情况

盒子模型相关属性
定位属性及浮动
改变节点内部文字结构
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-vlign , white-space , font-size