浏览器工作流程『从输入 URL 到页面展示

导航

    用户输入

1. 1. 用户在地址栏按下回车，检查输入（关键字 or 符合 URL 规则），组装完整 URL；
   2. 回车前，当前页面执行 onbeforeunload 事件； 
   3. 浏览器进入加载状态。

    HTTP请求过程

1. 1. 浏览器进程通过 IPC 把 URL 请求发送至网络进程； 
   2. 查找资源缓存（有效期内）； 
   3. DNS 解析（查询 DNS 缓存）； 
   4. 进入 TCP 队列（单个域名 TCP 连接数量限制）；
   5. 创建 TCP 连接（三次握手）； 
   6. HTTPS 建立 TLS 连接（client hello, server hello, pre-master key 生成『对话密钥』）； 
   7. 发送 HTTP 请求（请求行[方法、URL、协议]、请求头 Cookie 等、请求体 POST）； 
   8. 返回请求数据（响应行[协议、状态码、状态消息]、响应头、响应体等）； 

1. 1. 1. - 状态码 301 / 302，根据响应头中的 Location 重定向； 
      2. - 状态码 200，根据响应头中的 Content-Type 决定如何响应（下载文件、加载资源、渲染 HTML）。

     9. 关闭TCP连接

 

    准备渲染进程

                渲染进程机制：默认一个页面一个进程；从a打开b，并且是同一站点（相同的协议和根域名），会复用渲染进程。

    提交文档

1. 1. 浏览器进程接受到网路进程的响应头数据，向渲染进程发送『提交文档』消息； 
   2. 渲染进程收到『提交文档』消息后，与网络进程建立传输数据『管道』；
   3. 传输完成后，渲染进程返回『确认提交』消息给浏览器进程； 
   4. 浏览器接受『确认提交』消息后，移除旧文档、更新界面、地址栏，导航历史状态等； 
   5. 此时标识浏览器加载状态的小圆圈，从此前 URL 网络请求时的逆时针选择，即将变成顺时针旋转（进入渲染阶段）。

渲染

    构建 DOM 树 Dom

1. 1. 输入：HTML 文档； 
   2. 处理：HTML 解析器解析； 
   3. 输出：DOM 数据解构。

    样式计算 Style

1. 1. 输入：CSS 文本； 
   2. 处理：css文件转化styleSheets；属性值标准化；计算每个节点具体样式（继承、层叠）； 
   3. 输出：styleSheets(CSSOM)。

    布局(DOM 树中元素的计划位置) Layout

1. 1. 输入：布局树； 
   2. 处理：布局计算； 
   3. 输出：计算完几何坐标的布局树。

    分层 Layer

1. 1. 输入：分层树； 
   2. 处理：拥有重叠上下文属性（定位、透明度、滤镜）的提为一层 ；被剪裁过的提为一层；没有涂层的dom和父节点公用一个图层
   3. 输出：图层树

    绘制指令 Paint

1. 1. 输入：图层树
   2. 处理：渲染引擎对图层树中每个图层，拆分成绘制指令，生成绘制列表，提交到合成线程；
   3. 输出：绘制列表

    栅格化

1. 1. 输入：绘制列表
   2. 处理：分块：合成线程将图层转化为图块；栅格化：将视口附近的图块优先生成位图；
   3. 输出：位图

    合成显示

1. 1. 输入：位图
   2. 处理：绘制图块命令——DrawQuad，提交给浏览器进程；浏览器进程的 viz 组件，根据DrawQuad命令，绘制在屏幕上
   3. 输出：页面