浏览器渲染原理

（1）渲染包括的流程
1.解析HTML，生成DOM树（DOM）
2.解析CSS，生成CSSOM树（CSSOM）
说明：对于style和内联样式，浏览器会直接根据样式声明生成CSSOM;对于外联样式link
浏览器会发送请求，待请求成功，获取到外联样式后，浏览器再解析该外联样式，并生成
相应的CSSOM。由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，
CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，
浏览器才会进入下一步的渲染，这就是传说中的CSS阻塞渲染。
注意：JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，
这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析（而CSS不会），
执行JS，再返还控制权。
4.将DOM和CSSOM合并，生成渲染树（Render-Tree）
说明：生成渲染树，浏览器做了这些工作：
从DOM的根节点开始，遍历每个可视节点：script、link、meta都属于不可视节点，另外，display: none的节点也属于不可视节点
从CSSOM中搜索可视节点的样式
计算这些样式，将计算值应用到可视节点上
5.计算渲染树的布局（Layout）
6.将布局渲染到屏幕上（Paint）

从浏览器渲染原理谈页面优化

浏览器渲染机制基础

浏览器渲染