1、重绘
定义:当render tree 中的一些元素需要更新属性,而这些属性只是影响元素外观,风格,而不会影响布局的,例如background-color。作为称之为重绘(repaint)。有以下操作会只触发重绘(样式的变化)
2、回流
定义:当render tree 的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,被称为回流(reflow)。 有以下操作会触发回流:- 一个DOM元素的几何属性发生变化,常见的几何属性有
width
,height
等。 - DOM节点发生
增减
或移动
- 读取
offset
族、scroll
族和client
族属性的时候,浏览器为了获取这些值,需要回流操作 - 调用
window.getComputedStyle
方法。
总结:
当页面布局和几何属性改变时就需要回流
回流并将引起重绘,而重绘不一定会引起回流
3、渲染流水线过程
3.1 新建DOM:
3.2 重绘过程:
由于没有导致 DOM 几何属性的变化,所以元素的位置信息不需要更新,省去布局的过程。流程如下:
跳过了生成布局树
和建图层树
的阶段,直接生成绘制列表
3.3 回流过程
如下图:触发回流的时候,如果 DOM 结构发生改变,则重新渲染 DOM 树,然后将后面的流程(包括主线程之外的任务)全部走一遍。
将解析和合成的过程重新又走了一篇,开销是非常大的。
4、避免重绘回流的方法
频繁触发重绘与回流,会导致UI频繁渲染,最终导致js变慢。
- GPU加速: 利用 CSS3 的transform、opacity、filter这些属性就可以实现合成的效果。
- 在合成的情况下,会直接跳过布局和绘制流程,直接进入非主线程处理的部分,也就是直接交给合成线程处理。
即能够充分发挥GPU的优势;也没有占用主线程的资源,即使主线程卡住了,效果依然能够流畅地展示。
欢迎留言评论~