浏览器的渲染机制

---

什么是DOCTYPE及其作用

• DTD(文档类型定义)是一系列的语法规则，用来定义XML或是HTML的文件类型。浏览器回根据它来判断文档的类型，决定用何种协议来解析，以及切换浏览器的模式。
• DOCTYPE就是用来声明文档类型和DTD规范的。
• 主要的用途是验证文件的合法性，如果文件不合法那么浏览器解析时变回出错。（人话：告诉浏览器当前的文档包含的是哪个文档类型）

---

浏览器渲染过程

浏览器的渲染过程图

渲染过程

1. HTML解释器和CSS解释器分别解析文档,HTML生成DOM树,CSS生成style规则
2. 两者合成串联形成渲染树,包括各个DOM的颜色
3. 通过layout精确的计算到得到这些DOM要显示的位置
4. Painting浏览器开始画图
5. Display浏览器显示出要显示的网页

---

重排 Reflow

1. 定义

DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式计算结果将元素放到它该出现的地方。这个过程叫做reflow

2. 触发方式

• 增加、删除、修改DOM节点的时候，会导致Reflow或者Repaint（重绘）
• 移动DOM的位置，或者是触发动画的时候
• 修改CSS样式的时候
• 当改变浏览器窗口大小的时候，或者是滚动的时候
• 修改网页的默认字体

---

重绘 Repaint

1. 定义

当各种盒子的位置、大小及其其他的属性，例如颜色、字体大小等都确定下来后，浏览器于是把这些元素按照搁置的特性绘制了一遍，于是页面内容出现了，这个过程叫做repaint

2. 触发方式

• DOM改动
• CSS改动