浏览器渲染流程

1.浏览器的高层结构：

1. 用户界面（我们可见的地址栏、书签菜单等，除了主窗口以外的界面）
2. 浏览器引擎（在用户界面和呈现引擎之间传送指令）
3. 呈现引擎（负责显示请求的内容。html、css等）
4. 网络（用于网络调用，列如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。）
5. 用户界面后端（绘制窗口部件，比如组合框和窗口）
6. JavaScript解释器（用于解析和执行 JavaScript 代码。）
7. 数据存储（这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。）

注意：和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。

2.呈现引擎

呈现引擎的作用嘛…当然就是“呈现”了，也就是在浏览器的屏幕上显示请求的内容。

呈现引擎也就是我们常说的浏览器内核

3.渲染流程

先来看一张图：
上面的图片讲述了浏览器内核渲染页面的流程

1. 解析 HTML ，构造出DOM树
2. 呈现树被建设
3. 将呈现树在网页中Layout（页面大体布局）
4. 绘制呈现树（渲染出页面）

这些主流程的细节如下图（webkit呈现引擎流程图）：
注意两点：

• 如上图，HTML和CSS同时解析 ，之后等待DOM树开始构建再与解析的CSS整合，构建出Render树，同时Layout，之后再进行绘制。
• 这是一个渐进的过程，在HTML未解析完毕时，就会开始构建Render树和Layout。这样可以解析的更加快速，也会获得更好的用户体验。

上面讲述了 chrome 中呈现引擎（webkit）的工作流程，其他的浏览器可以到文档中查看，不过都是大同小异