前端性能优化--避免重绘和回流的两种方法

重绘概念：当render tree 中的一些元素须要更新属性，而这些属性只是影响外观，风格不会影响布局的，好比说background-color。则就叫重绘。

触发页面重布局的属性

一、盒子模型相关属性

二、定位属性及浮动

三、改变节点内部文字结构

①. 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

只会触发重绘的属性

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

新建DOM的过程

一、获取DOM后分割为过个图层

二、对每一个图层的节点计算样式结果（Recalculate style -- 样式重计算）

三、为每一个节点绘制填充到图层位图中（ Paint Setup 和Paint -- 重绘）

四、为每一个节点生成图形和位置 （Layout--回流和重布局）

五、图层做为纹理上传GPU

六、符合多个图层到页面上生成最终的屏幕图像*（Composite Layers - 图层重组）