浏览器渲染机制
什么是DOCTYPE 及作用？
DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式（通俗的说，就是告诉浏览器我是什么文档类型，浏览器根据这个来判断我用什么引擎来解析它来渲染它）
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析式便会出一些差错。（直接告诉浏览器什么是DTD的，告诉浏览器这个文档包含哪些DTD）
HTML5的DOCTYPE
HTML 5:
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN"
"http://www.w3.org/TR/html4/loose.dtd">浏览器的渲染过程？
重排 Reflow
定义：
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
触发Reflow
当你增加、删除、修改DOM节点时，会导致Reflow或Repaint
当你移动DOM的位置，或是搞个动画的时候
当你修改CSS样式的时候
当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候
当你修改网页的默认字体的时候
重绘 Repaint
定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint
触发Repaint
DOM改动
CSS改动