浏览器解析、渲染

页面解析渲染过程如下:

 

• 解析html：生成一棵DOM树
• 解析css:生成页面样式表
• recalculate style ：DOM树和样式表，关联起来，构建一颗Render树（渲染树与dom树不同的地方在于，dom树会把所有的dom节点都展示出来，渲染树只会展示display非none的元素）
• layout ：将渲染树上的节点，根据它的高度，宽度，位置，确定每个节点在屏幕上的精确位置（layout）。
• paint：确定渲染树上的节点的大小和位置后，便可以对节点进行绘制
• composite layer：合成层；当渲染树上的节点绘制完毕后，便生成位图（bitmap），浏览器把此位图从CPU传输到GPU

跟css相关的部分从layout开始，经过paint，最终再composite layer 生成位图。