这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战。
在 HTML 解析过程中，我们会得到 DOM 树和 CSS 树，由 DOM 树和 CSS 树合成渲染树，然后进行布局、绘制，最后经过合成，才可以将代码展示成页面。
文档对象模型（DOM）
一段 html 代码：
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<p>Hello <span>World</span></p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
根据这段代码可以生成 DOM 树。如图所示：
css 对象模型（CSSOM）
一段 css 代码：
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
根据这段代码可以生成 CSSOM。如图所示：
渲染树
根据上述的 DOM 和 CSSOM 可以生成渲染树：
重绘与回流
重绘 repaint
当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
触发重绘的属性
| 颜色 | 背景 | 外边框 |
|---|---|---|
color | background | outline-color |
border-style | background-image | outline |
border-radius | background-position | outline-style |
visibility | background-repeat | outline-width |
text-decoration | background-size | box-shadow |
重排 reflow
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
触发重排的属性
| 盒子模型相关属性 | 定位属性及浮动 | 改变节点内部文字结构 |
|---|---|---|
width | top | text-align |
height | bottom | overflow-y |
padding | left | font-weight |
margin | right | overflow |
display | position | font-family |
border-width | float | line-height |
border | clear | vertival-align |
min-height | white-space |
- "重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。
- 但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
常见的触发重排的操作
- 当你增加、删除、修改 DOM 结点时，会导致 Reflow , Repaint。
- 当你移动 DOM 的位置
- 当你修改 CSS 样式的时候。
- 当你 Resize 窗口的时候（移动端没有这个问题，因为移动端的缩放没有影响布局视口）
- 当你修改网页的默认字体时。
- 获取某些属性时(width，height...)
注：
display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发生位置变化。
最后说一句
如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。
