浏览器渲染机制

1、什么是doctype以及作用

DTD就是告诉浏览器我是什么类型，浏览器就会用何种方式去解析他，doctype就是规定文档类型的。
h5:
4.0版本有两种模式，
严格模式：不包括废弃元素
宽松模式：包括废弃元素

2、浏览器的渲染过程

浏览器请求到HTML文件之后，解析DOM构建DOM树，同时也会解析CSS，构建Style Rules，之后把DOM树与Style Rules进行Attachment处理，构建Render tree，此时也会引入Layout信息，最后在浏览器中Painting绘制，最终Display出来。

3、重排Reflow

概念：浏览器根据样式计算将结果展示在哪个地方的过程叫Reflow

什么时候会触发Reflow？
1、增加删除节点的时候，会导致Reflow和Repaint
2、移动DOM位置
3、修改CSS的宽高边距样式显隐状态的时候
4、Resize窗口的时候
5、修改网页默认字体的时候

4、重绘Repaint

概念：页面要呈现的内容统统都画在屏幕上的过程叫Repaint

触发条件
DOM改动
CSS改动
页面显示的内容发生变化都会触发
优化点：把要修改的DOM一次性挂载到DOM上。