浏览器渲染过程

一、首先我们看一下浏览器的深层结构:

  1. 用户界面-包括地址栏, 返回按钮等 UI 组件, 除了主窗口
  2. 浏览器引擎-用来查询和操作渲染引擎的接口
  3. 渲染引擎-负责渲染请求的内容. 比如, 如果请求的资源是html, 那么渲染引擎负责解析 html 和 css, 然后把解析结果渲染到页面中
  4. js 引擎-用来解析执行 JavaScript 代码
  5. 网络连接-用于处理网络请求, 如 http 请求. 这一部分是跨平台的
  6. UI 后台-用于渲染基础组件, 比如多选框和窗口等, 它暴露了一个不是特定平台的通用接口, 在底层调用了操作系统的用户接口
  7. 数据存储-这是一个持久层. 浏览器在硬盘中存储各式数据, 比如 cookie , localStorage 等

二、各个组件的关系如下:
浏览器渲染流程 - 图1
1、我们需要注意的是, js 引擎是单线程的, 但是浏览器是多线程的, 比如浏览器会同时开启js 引擎线程, 界面渲染线程, 事件触发线程, http 请求线程

HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

三、接下来我们着重看一下渲染引擎所做的工作:
1、总的过程是: 解析HTML并构建DOM树 => 构建render树 => render树布局 => render树绘制
浏览器引擎开始解析 html, 并把标签转为内容树中的 dom 节点, 同时它也开始解析 css, 外链的 css 以及文件内的 css, 所有这些样式数据以及 html 中的可见性指令都用来构建另外一棵树, – render 树
2、我们以Safari 和 chrome 使用的Webkit 引擎渲染过程如下:
浏览器渲染流程 - 图2