重绘（重绘和重排）

布局生成和绘制的过程就是渲染。

网页生成的时候至少渲染一次。

用户交互可能导致重新渲染。

渲染是耗时的，应减少不必要的重新渲染以提高网页性能。

重排和重绘的概念

由于布局生成和绘制存在先后顺序关系，重排必定导致重绘，但重绘不一定需要重排。

重排与布局有关，当布局发生变化时，也就是素的几何信息（DOM节点的尺寸和位置）发生变化时，将会触发重排，重新计算素的几何位置，然后重新绘制。

全局范围重排：从根节点开始对整个渲染树进行重排；

当一个DOM节点变小，它后续的素可能位置也发生变化，而它的父素如果没有固定宽高也可能发生收缩，因此：

一个节点的重排可能影响到它的相邻节点、父节点......从而引发全局范围的重排。
局部范围重排：对渲染树的某部分或某一个渲染对象进行重排。

将一个DOM的几何信息固定，当其内部的节点发生重排，则不会影响到外部的节点，是局部范围的重排。

一个素的外观发生改变，但不改变布局，不影响周围的素，只是重新绘制该素的外观，这个过程叫做重绘。

当素的几何属性被修改，不会立刻导致重排。这个操作会被放到渲染队列，等到队列中的操作到达一定数量或者达到一定的时间间隔，浏览器才会批量执行这些操作。

如下的代码执行了四次对于素的几何属性的修改，但是只会触发一次重排。

当访问与布局相关的属性时，浏览器为确保其准确性、准时性，会强制立即执行渲染队列中的任务，即立即重排和重绘。

如下这段代码会触发4次重排和重绘：

强制刷新队列的属性和方法

在开发过程中应该尽可能少地访问这些属性，避免多次重排。

统一读，再统一写，而不是边读边写。这样可以将重排次数降低到1次。第一个将渲染队列清空，触发一次重排，而后续的由于渲染队列本身是空的因此不会触发重排。

不要分批次的修改样式属性，而是一次性修改。

建议提前写好若干个CSS的选择器，然后 JS 负责切换。

布局信息的每一次读取都会导致强制重排，如果确保布局信息在当前情景下不会有变动，可以使用一个临时变量缓存使用。

DOM设置，将其从渲染树中移除，然后再进行复杂修改操作，最后再将其显示出来。

整个过程包含隐藏和显示共两次重排。

或者使用创建一个DOM碎片，然后在其上面批量操作DOM，操作完成之后再添加到文档中，这样只会触发一次重排。

设置为或，这样就只会影响子节点的重排，不会影响外部。

table中的某一个素触发重排将导致整个table重排。

如果是在维护远古项目不得不使用table布局，可以设置或者，这样可以让table一行一行的渲染，限制重排的影响范围。

今天的文章重绘（重绘和重排）分享到此就结束了，感谢您的阅读。