了解重排与重绘后，如何区分它们在网页渲染过程中的具体应用场景？

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

前言：浏览器下载完页面内容后，解析并生成以下两个内部数据结构：DOM树：表示页面结构；渲染树：表示页面显示内容。

浏览器下载完页面内容后，解析并生成以下内容：

HTML：网页结构JavaScript：网页行为CSS：网页样式图片：网页图片

之后会解析并生成两个内部数据结构：

DOM树：表示页面结构，包括标签、属性、内容等。渲染树：表示页面显示内容，包括标签、属性、内容、样式等。

渲染树中会展示DOM树中的节点，每个节点如何显示取决于CSS样式。DOM树中的每个节点都有可能被渲染，具体显示取决于样式规则。

前言

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

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

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

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