渲染机制
什么是DOCTYPE及作用
DTD
DTD(Document Type Definition 文档类型定义)
用来定义XML或者（X）HTML的文件类型
浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式
DOCTYPE
声明文档类型和DTD规范
告诉浏览器当前文档包含的是哪个DTD
用于文件的合法性验证，如果文件代码不合法，那么浏览器解析会出错
常见的DOCTYPE
HTML5
HTML5 不基于 SGML，所以不需要引用 DTD
<!DOCTYPE html>
HTML4 strict 严格模式
该DTD包含所有HTML元素和属性，但不包括展示性和废弃的元素（如font）
HTML4 Transitional 传统模式
该DTD包含所有HTML元素和属性，包括展示性和废弃的元素
浏览器渲染过程
- 将HTML解析成DOM树
- 将CSS解析成 CSS Rule Tree
- 根据DOM树和CSSOM来构造 Rendering Tree
- 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点
重排Reflow
定义
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置
触发Reflow
增加/删除/修改DOM节点时，会导致Reflow或Repaint
移动DOM位置，或者做动画
修改CSS样式
Resize窗口（移动端无）/滚动
修改网页的默认字体
避免触发Reflow
重绘Repaint
定义
各种盒子位置/大小/其他属性如颜色 字体大小等确定之后，浏览器于是把这些元素按照自己的特性绘制
触发Repaint
DOM改动
CSS改动
如果避免最小程度的Repaint
要改变的节点添加到一个片段了，一次repaint