重绘和重排

有时候我们打开一个网页会发生卡顿，动画不流畅的现象，没有耐心的用户可能等不到页面加载完成就关闭这个网页了。而决定一个网页的流畅度的原因，除了用户自身的网速外，网页性能也是一个很重要的指标。如何尽可能的优化也是开发者需要关注的问题，尽可能的减少重绘和重排就是方法之一。那么什么是重绘和重排呢？

网页生成的流程分析

重绘和重排都是网页生成流程中的一个步骤，在分析这两者之前，有必要先了解网页究竟是如何生成的。大致步骤如下：

1. 浏览器从上至下将HTML代码解析为DOM树，包括所有HTML节点（例如display:none作用的元素节点)。
2. 当遇到js标签时新起线程下载，阻塞DOM树的构建。下载完毕执行script文件时，阻塞DOM树。
3. 执行css文件时，阻塞script文件执行并构建CSSOM树。
4. 结合CSSOM树和DOM树形成新的渲染树。
5. 根据渲染树绘制元素并生成布局，不包括隐藏节点(head,display:none等)。
6. 执行script文件时，可以通过DOM API修改DOM，通过CSSOM API修改CSSOM。每次修改都会造成渲染树的重排或重绘，生成新的布局。

重排和重绘的概念

以上6步中，其实1~4步都是非常快的，耗时的是第5，6步，所以我们应该尽可能的减少根据渲染树重新渲染的次数。重新渲染，也就是重新绘制(重绘)和重新生成布局(重排)。

当渲染树中的一部分元素因为规模，布局等结构变化时需要重新构建，就称为重排。 当渲染树中的一部分元素只是更新了外观等表现属性而不影响结构时，例如颜色，透明度变化等，称为重绘。 可以看出重排对性能的影响更大，重排必将引起重绘，而重绘不一定引起重排。

重排发生时机

可以看出提升性能的关键就是减少重排次数，重排发生时机大致可以总结如下:

1. 添加，删除，移动可见的DOM元素。
2. 元素的几何属性，内容改变。
3. 调整浏览器窗口大小。
4. 获取位置相关的属性，例如offsetTop,scrollTop,clientTop等。

浏览器存在一个队列机制优化重排次数，即当连续设置会发生重排操作的属性值时会缓存这些操作到一个队列里，到一定数量时一次执行。但当请求和重排有关布局信息时会导致队列强制执行。

减少重排和重绘的方法

1. DOM的多个读写操作尽量放在一起，不要在读操作之间插入写操作。
2. 如果某个值是通过重排得到的并且还会用到，最好缓存结果。
3. 不要分步改变同一元素的样式，而是通过class或style.cssText一次性改变。
4. 多次操作DOM时，尽量利用document fragment对象，display: none, cloneNode()的方法进行离线操作。
5. 执行动画时让动画元素尽量脱离DOM树。