浏览器渲染机制

浏览器渲染的整个流程

       首先当用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。

• 1.构建DOM树(DOM tree)：浏览器从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
• 2.构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
• 3.执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
• 4.构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
• 5.布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
• 6.绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；