如何区分网页的重排和重绘过程？

本文共计1326个文字，预计阅读时间需要6分钟。

前言：浏览器下载完页面内容后，分析并生成以下两个内部数据结构：

1.DOM树：展示页面结构

2.渲染树：展示DOM节点如何渲染

前言

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

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

DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。渲染树中的节点被称为“帧”或者“盒子”，理解页面元素为一个具有填充(padding)、边距(margin)、边框(border)和位置(position)的盒子。一旦DOM树和渲染树构建完成，浏览器就开始显示(绘制 paint)页面元素

当DOM的改变影响了元素几何属性（例如宽和高）——浏览器就需要重新计算元素的几何特性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排(reflow)。完成重排后，浏览器会重新绘制受到影响的部分到屏幕中，该过程称为重绘(repaint)

重绘和重排操作都是代价昂贵的操作，它们会导致web应用程序的UI反应迟钝，所以应该尽可能减少这类过程的发生。

引起重排的原因

• 添加或删除可见的DOM元素
• 元素位置改变
• 元素尺寸改变
• 内容改变（例如：文本改变或图片被另一个不同尺寸的图片替代）
• 页面渲染初始化
• 浏览器窗口尺寸改变

渲染树变化的排队与刷新

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改和批量执行来优化重排过程（将多个重排过程合并成一次）。