浏览器的重绘（repaint）与重排（reflow）

浏览器下载完成页面中的所有组件——HTML标记、JavaScript、CSS、图片——之后会解析并生成两个内部数据结构：

• DOM树：表示页面结构
• 渲染树：表示DOM节点如何展示

DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的DOM元素在渲染树中没有对应的节点）。
渲染树的节点被称为“帧”或“盒”，符合CSS模型的定义，理解页面元素为一个具有padding，margins，borders，position的盒子。
一旦DOM树和渲染树构建完成，浏览器就开始显示（绘制“paint”）页面元素。

重排——reflow

当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。
下述情况会发生重排：

• 添加或删除可见的DOM元素。
• 元素位置或尺寸改变。
• 内容改变，例如文本改变或者图片被不同尺寸的图片替换。
• 页面渲染器初始化。
• 浏览器窗口尺寸改变（进度条的出现也算）。

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。然而，你可能会强制刷新队列并要求计划任务立刻执行。
获取布局信息的操作会导致队列刷新：

• offsetTop, offsetLeft, offsetWidth, off