浏览器的渲染过程

一、浏览器结构

• 用户界面（User Interface）：包括交互组件，地址栏，返回前进按钮
• 浏览器引擎（Browser engine）：控制和管理下一级的渲染引擎
• 渲染引擎（Rendering engine）：解析请求内容，HTML,XML,CSS
• 网络（Networking）：处理HTTP请求等
• UI后端（UI backend）：绘制提示框等浏览器组件
• JavaScript解析器（JavaScript Interpreter）：解析和执行JavaScript代码
• 数据存储（Data Storage）持久化存储，cookie,缓存

二、网络请求过程

1. 用户在地址栏输入域名，DNS（Domain Name System）域名解析服务器根据域名查找IP地址，向其发起请求
2. 返回200响应码，说明响应成功
3. 浏览器得到并解析服务器返回的内容response
4. 加载HTML文件，及所需js，css，image等资源

三、渲染过程（关键渲染路径Critical Rendering Path）

1. 构建DOM树，从上到下解析HTML文档生成DOM节点树，也叫内容树
2. 构建CSSOM树，加载解析样式生成CSSOM树
3. 执行JavaScript，加载并执行JavaScript代码
4. 构建渲染树Render Tree，根据DOM树和CSSOM树生成。按顺序展示在屏幕的一系列矩阵，带有字体，颜色，尺寸等属性
5. 布局Layout，根据渲染树将节点树的每一个节点布局在屏幕上的正确位置

6. 绘制painting，遍历渲染树绘制所有节点，为每一个节点对应样式

   
   
   

   rendering path
   
   

   浏览器会每处理一部分内容，并展现在屏幕上，所以页面加载时是自上而下展现的

通常javascript会改变文档DOM结构，浏览器以同步方式解析，加载和执行脚本，遇到