开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
回流与重绘
浏览器的三大核心内容: 渲染引擎，渲染过程，兼容性。其中渲染过程的回流与重绘是css中很重要的概念。
回流
回流又称重排，指改变集合属性的渲染。
可理解为将整个网页填白，对内容重新渲染一次。只不过以人眼的感官速度看浏览器回流是不会有任何变化的，若你拥有闪电侠的感官速度看浏览器回流(实质是将时间调慢)，就会发现每次回流都会将网页清空，从左上角第一个像素点从左到右从上到下这样一点一点渲染，直至右下角最后一个像素点。每次回流都会呈现该过程，只是感受不到而已。
重绘
重绘指改变外观属性而不影响几何属性的渲染。
渲染树的节点发生改变，但不影响节点的几何属性，所以回流对浏览器性能的消耗高于重绘且回流一定伴随重绘，重绘却不一定伴随回流。
属性分类:
常见几何属性与外观属性分类
几何属性: 包括布局，尺寸等可用数学几何衡量的属性
布局: display,float,position,list,table,flex.columns.grid等
尺寸: margin,padding,border,width,height等
外观属性: 包括外界，文字等可用状态向量描述的属性
界面: background,mask,box-shadow，filter,clip等
文字: font,text,word等
性能优化
回流重绘在我们操作节点时会频繁出现，这会导致很大程度上的性能问题。在一些高性能的电脑上可能没有什么影响，不过在一些安卓手机上，会减缓加载速度，增加手机的耗电
减少和避免回流重绘
-
使用transform代替top
top是几何属性，操作top会改变节点位置引发回流，使用transform:translate3d(x,0,0)来代替top，就只会引发图层上的重绘，而且还会间接的启动GPU加速。
-
避免使用Table布局
在table布局中，可能就很小的一个改变就会引起整个table回流，所以我们用ul,li,span标签代替table来生成表格
-
使用visivility：hidden替换display：none,下面有一个比对
-
占位表现
- DN不占据空间
- VH占据空间
-
触发影响
- DN触发回流重绘
- VH触发重绘
-
过渡影响
- DN影响过渡不影响动画
- VH不影响过渡不影响动画
-
株连效果
- DN后自身及其子节点全都不可见
- VH后自身及其子节点全都不可见但可声明子节点
visibility:visible单独显示
-
- 避免规则层级过多
浏览器的CSS解析器解析css文件时，对CSS规则是从右到左匹配查找，样式层级过多会影响回流重绘效率，建议保持CSS规则在3层左右。
