重排与重绘

一. 重排

1.1 当渲染树中部分或者全部元素的尺寸、结构、或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为重排。表现为重新生成布局，重新排列元素此时在Layout阶段,计算每一个元素在设备视口内的确切位置和大小,当一个元素位置发生变化时,其父元素及其后边的元素位置都可能发生变化,代价极高

二. 导致重排的操作

2.1 页面的首次渲染

2.2 浏览器的窗口大小发生变化

2.3 元素的内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代

2.4 元素的尺寸或者位置发生变化

2.5 激活CSS伪类

2.6 查询某些属性或者调用某些方法

2.7添加或者删除可见的DOM元素

在触发回流的时候,由于浏览器渲染页面是基于流式布局的,所以当触发回流时的DOM元素重新排列

三. 影响范围

全局范围: 从根节点开始,对整个渲染树进行重新布局

局部范围: 对渲染树的某部分或者一个渲染对象进行重新布局

四. 重绘

当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器对元素进行重新
绘制的过程,叫做重绘,表现为某些元素的外观被改变,此时在关键渲染路径中的Paint阶段,将渲染

树中的每个节点转换成屏幕上的实际像素，这一步通常称为绘制或栅格化

五. 导致重绘的操作

5.1 color,background相关属性

5.2 outline相关属性

5.3 border-radius,visibility,box-shadow

六. 联系:触发重绘不一定触发重排,触发重排一定触发重绘

七. 避免重绘或者重绘

7.1 集中改变样式,不要一条一条地修改DOM的样式

7.2 不要把DOM结点的属性值放在循环里当成循环里的变量

7.3 为动画的HTML元件使用fixed或absoult的position,将动画脱离文档流,那么修改他会引起回流的

7.4 不使用table布局

7.5 使用absolute或者fixed,使元素脱离文档流，这样他们发生变化就不会影响其他元素

7.6 触发硬件加速,可以让transform、opacity、filters这些动画不会引起回流重塑

7.7 提升为合成层

7.8 避免频繁操作DOM,可以创建一个文档片段,在它上面应用所有DOM操作,最后再把它添加到文档中

八. 性能优化

8.1 减少DOM数渲染时间

8.2 减少CSSMO数渲染时间

8.3 减少HTTP请求次数及请求大小

8.4 将CSS放在页面开始位置

8.5 将JS放在页面底部位置,并尽可能用defer或async避免阻塞的js加载,确保DOM数才会去加载JS

8.6 用link替代@import

8.7 如果页面css较少,尽量使用内嵌式

8.8 为了减少白屏时间,页面加载时先快速生成一个DOM树