浏览器得渲染机制 以chrome为例

浏览器从接收到页面开始到页面显示，这整个过程中的所有步骤，称为关键渲染路径，一般分为两步：页面内容加载完成和页面资源完成，分别对应于DOMContentLoaded和Load

整个关键渲染路径包括以下几个步骤：

解析HTML，生成DOM树（DOM）
解析CSS，生成CSSOM树（CSSOM）
将DOM和CSSOM合并，生成渲染树（Render-Tree） Script标签的处理
计算渲染树的布局（Layout）
将布局渲染到屏幕上（Paint）

1.生成DOM树和CSSOM树
浏览器解析html 将HTML的元素关系转换成一个数据结构DOM，在解析的时候style、link元素以及具有内联样式的元素：交给“CSSOM生成” CSSOM和DOM是两个独立的数据结构。

2.Script标签的处理
JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析（而CSS不会），执行JS，再返还控制权.JS阻塞了HTML的解析，也阻塞了其后的CSS解析，整个解析进程必须等待JS的执行完成才能够继续，这就是所谓的JS阻塞页面,渲染引擎会等待所有的JS操作完成，收集JS对DOM和CSSOM的操作结果

3.将DOM和CSSOM合并，生成渲染树
只有DOM和CSSOM完全结束才能生成渲染树，CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。

4.布局
渲染树生成后，浏览器便可以根据渲染树中的样式信息，结合设备的屏幕信息，计算每个元素的位置和尺寸。

5.渲染
得到了渲染树及其节点的布局信息，浏览器便可以将最终的页面渲染到屏幕。