浏览器渲染机制
渲染机制
什么是DOCTYPE及作用 —> 浏览器渲染过程 —> 重排 Reflow —> 重绘 Repaint —> 布局 Layout
1.什么是DOCTYPE及作用
DTD（document type definition ，文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式
DOCTYPE 是用来申明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证
如果文件代码不合法，浏览器解析时便会出现一些差错
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
SGML(Standard Generalized Markup Language，即标准通用标记语言)
注释：<!DOCTYPE> 声明没有结束标签。
提示：<!DOCTYPE> 声明对大小写不敏感。
HTML5
HTML4.01 Strict 该DTD包含所有HTML元素和属性，但不包括展示性的和弃用元素（比如font）
HTML4.01 Transitional 该DTD包含所有HTML元素和属性，包括展示性的和启用元素（比如font）
2.浏览器渲染过程
关键渲染路径
关键渲染路径是指浏览器从最初接受到请求的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程
渲染过程包括以下几步：
1.解析HTML生成DOM树
2.解析CSS生成CSSOM规则树
3.将DOM树与CSSOM规则树合并在一起生成渲染树
4.遍历渲染树开始布局，计算每个节点的位置大小信息
5.将渲染树每个节点绘制到屏幕
构建DOM树
当浏览器接受到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树
需要注意的是，DOM树生成过程中可能会被CSS和JS的加载执行阻塞
构建CSSOM规则树
浏览器解析CSS文件并生成CSS规则树，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。
渲染阻塞
当浏览器遇到一个script标记时，DOM构建将暂停，直至脚本完成执行，然后继续构建DOM
每次去执行JavaScript脚本都会严重的阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建
script标签位置很重要，实际使用遵循两个原则：
CSS优先：引入顺序上，CSS资源先于JavaScript资源。
JS置后：通常把JS代码放到页面底部，且JavaScript应尽量少影响DOM的构建
构建渲染树
通过DOM树和CSS规则树我们便可以构建渲染树。
浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点。找到其适配的CSS样式规则并应用
渲染树构建完成，每个节点都是可见节点并且都含有其内容和对应规则样式。这个也是渲染树与DOM树的最大区别所在。
渲染树是用于显示，那些不可见的元素当然不会在这棵树中出现了，譬如，display：none不会显示在这棵树中，但visibili：hidden的元素是会显示在这棵树中
渲染树布局
布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确的捕获每个元素在屏幕内的确切位置与大小
渲染树的绘制
在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容
渲染树的绘制工作是由浏览器的UI后端组件完成的
reflow和repaint
根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等信息。HTML默认是流式布局，CSS和JS会打破这个种布局，改变DOM的外观样式以及大小、位置。
这时就要提到两个重要概念：repaint和reflow
repaint:屏幕的一部分重画，不影响整体布局。比如某个CSS的背景色变了，但元素的几何尺寸和位置不变
reflow:意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是reflow或layout
所以我们应该尽量减少reflow和replanit，我想这也是为什么现在很少有用table布局的原因之一
display:none 会触发reflow
visibility:hidden 只会触发repaint，因为visibilty:none 属性并不算是可见属性，它的语义是隐藏元素，但元素仍然占据着布局空间，它会被渲染成一个空框
有些情况，比如修改了元素的样式，浏览器并不会立刻reflow或repaint一次，而是会把这样的操作积攒一批，然后做一个reflow，这又叫做异步reflow或增量异步reflow
有些情况，比如resize窗口，改变了页面默认的字体等，对于这些操作，浏览器会马上进行relow