重排与重绘

重排与重绘

一个页面渲染完毕后，随着用户的操作，或者数据变化，网页还会进行重新渲染。根据不同的触发条件，重新渲染分为两种情况：重排（reflow）和重绘（repaint）。

所有对元素视觉表现属性的修改，都会导致重绘（repaint）。比如修改了背景颜色、文字颜色等。

所有会触发元素布局发生变化的修改，都会导致重排（reflow）。比如窗口尺寸发生变化，删除、添加 DOM 元素，修改了影响元素盒子大小的 CSS 属性如 width、 height、 padding 等。

通常情况下，重排的影响更大，重排会导致文档局部或全部的重新运算：重新计算元素位置，大小。（改变一个元素的布局，可能会影响很多个元素的布局）

不管是重绘还是重排导致的重新渲染，都会阻塞浏览器。重新渲染的的过程中，JavaScript 会被阻塞，用户的交互行为也会被卡住。复杂的 CSS 动画甚至会拖慢 JavaScript 的运行速度。

注：本文涉及到的 JavaScript 部分，可以先忽略，等以后学习了 JavaScript 再来查看。

导致重排和重绘的场景

CSS 属性改变

网站 CSS trigglers 列出了所有 CSS 属性对 layout （布局）、paint （绘制）的影响。通过这个表，可以查到不同内核下，对 CSS