html的渲染过程

(一). 解析html文件，构建DOM树

1. 将字节流转换成字符流，根据不同的编码进行解码
2. 通过词法分析将字符流解析为一个个词语，这个过程会跳过空格与换行内容。词法分析由HTMLTokenizer完成
3. 使用XSSAuditor来进行词语验证及过滤，主要是出于安全方面考虑
4. 在经过XSSAuditor过滤之后，由解释器调用方法构建DOM节点
5. 从上面的DOM节点构建出来DOM树，包括创建元素节点的属性节点工作

[ 浏览器下载HTML页面，边下载边解析，解析过程中发现担忧defer属性的script标签，网页继续解析，同时启用script开始下载外部脚本，等待页面渲染完成，执行下载的脚本 ]

(二). 解析css文件，构建CSSOM树

1. 将字节流转换成字符流
2. 接着将字符流转换成词语
3. 将token转换成相应的节点
4. 最后组装成CSSOM树

[ css并不像HTML那样能执行部分并显示，因为css具有继承属性，后面定义的样式会覆盖或者修改前面的样式。如果我们只使用样式表中部分解析好的样式我们可能会得到错误的结果。所以，我们只能等待css完全解析之后，才能进入关键渲染路径的下一环节，也就是生成渲染树的环节。在CSSOM构建完毕之前，页面会一直处于白屏状态，这也是为什么建议将css引用及<style>标签放在head中，通过优先解析css。从而提高用户体验。CSSOM树在构建的过程中会阻塞页面的渲染，但是不会阻止DOM的解析]

(三). 将DOM树和CSSOM树合并生成渲染树当DOM树与CSSOM树构建完成后，浏览器会将两者进行结合，生成渲染树，这棵树包含了所有可见于安素及其渲染信息

(四). 计算渲染树的布局渲染树生成之后，浏览器会根据渲染树中的样式以及设备的屏幕尺寸，来计算每个元素的坐标和大小。如果页面元素的结构位置或者尺寸发生了变化，那么就需要重新计算样式并构建渲染树render。

[ 引起重新计算（重排）的有，删除或新增某个DOM节点；修改页面元素的尺寸值；改变字体的大小；获取某些属性值：offsetTOP 、scrollTOP、clientTop、width、height等]

(五). 绘制paint计算最终的渲染信息，在实际的渲染过程中浏览器会尽可能多的层上去渲染，类似于photoshop里图层的概念。并将每个渲染层进行合并，最终生成一层渲染画面。在绘制过程中，每个层独立渲染，并不关心与其他层之间的关系。