【知识梳理】4.1渲染机制

1.DOCTYPE

• DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。

解读：DTD就是告诉浏览器我是什么文档类型，那么浏览器根据这个来判断用什么引擎来解析渲染他。

• DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。

解读：DOCTYPE通知浏览器当前文档的DTD。

• 常见的DOCTYPE
• 1.HTML 5，!DOCTYPE html
• 2.HTML 4.01 Strict，严格模式，该DTD包含所有HTML元素和属性，但不包括展示型的和弃用的元素（比如font）。
• 3.HTML 4.01 Transitional，传统模式（宽松模式），该DTD包含所有HTML元素和属性，包括展示型的和弃用的元素（比如font）。

2.浏览器渲染过程

3.重排Reflow

定义：DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算，并根据计算结果将元素放到它该出现的位置，这个过程称为reflow。

• 触发Reflow：（一般触发Reflow时都会需要Repaint）
• 1.当你增加、删除、修改DOM节点时，会导致Reflow或Repaint；
• 2.当你移动DOM的位置，或是搞个动画的时候；
• 3.当你修改CSS样式的时候；（css改变宽高、display:none;）
• 4.当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候；
• 5.当你修改网页的默认字体时；在页面加载完后避免这样做，会影响性能

如何尽量避免Reflow

4.重绘Repaint

定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为Repaint。（解读：页面要呈现的内容，统统画在屏幕上）

• 触发Repaint：
• 1.DOM改动；
• 2.CSS改动；

如何尽量减少Repaint频率，将需要追加的多个DOM节点先存放在一个片段（createDocumentFragment()）中，最后一次性放到页面中。

5.布局Layout

Layout作用是计算每一个DOM的位置，宽高。