一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
一、什么是DOCTYPE
（一）DTD和DOCTYPE
- DTD(document type definition，文档类型定义)是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析文档，以及切换浏览器模式
- DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析式便会出一些差错
- 简单来说DTD就是告诉浏览器该文档是什么文档类型，浏览器会根据这个来判断用什么引擎来解析和渲染这个文档。DOCTYPE就是用来告诉浏览器什么是DTD,即告诉浏览器当前文档属于那个DTD(那个文档类型)
（二）常见的DOCTYPE
HTML 5
写法如下：
HTML 4
- 严格模式,HTML 4.01 Strict
- 该模式下,DTD包含所有的HTML元素和属性，但不包括展示性的和弃用的元素（例如font）
2. 传统模式,HTML 4.01 Transitional
- 该模式下,DTD包含所有的HTML元素和属性，包括展示性的和弃用的元素（例如font）
二、浏览器的渲染过程
-
浏览器渲染过程如下：
-
DOM树结构如下：
-
CSSOM树结构如下：
- Render Tree如下：
- layout如下：
三、重排Reflow
（一）定义
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算，并根据计算结果将元素放到相应的位置，这个过程称为重排
（二）触发重排的情况
- 当增加、删除、修改DOM节点时，会导致Refloe和Repaint
- 当移动DOM位置、或者搞个动画时
- 当修改css样式时
- 当Resize窗口时（移动端没有这个问题），或者滚动时
- 当修改网页的默认字体时
四、重绘Repaint
（一）定义
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称为重绘
（二）触发重绘的情况
- DOM移动
- CSS改动
