从输入URL到浏览器显示网页，期间到底经历了什么？

Ran
2020-11-25 15:31
浏览器原理

在讨论这个问题之前，要了解到浏览器的多进程机制：

  • 浏览器进程：主要负责界面显示、用户交互、管理子进程等，同时提供网络存储功能；
  • 渲染进程：负责将HTML/CSS/JavaScript 按照一定的流程转换成为普通用户能够看得到并与之进行交互的网页；一般是运行在安全沙箱中的，并且一般是一个标签页一个渲染进程。如果是从一个标签页打开了与之同一站点（协议和根域名相同）的新标签，会公用一个渲染进程；
  • 网络进程：负责加载网页需要的资源，然后提供给渲染进程进行渲染；
  • GPU进程：主要负责提供一些 CSS效果，比如 translate3d 等，可以提供高效的交互支持；
  • 插件进程：因为插件的开发参差不奇，同时也为了保证插件的运行不影响其他进程，所以单独一个进程；

接下来，我们会站在浏览器的角度，来看一下浏览器的工作流程。

导航流程
导航流程

导航准备阶段：

根据地址栏的用户输入的信息，浏览器识别判断如果是URL地址，则开始导航过程；如果不是，则根据浏览器默认搜索引擎的规则，拼装成该搜素引擎搜索结果的URL地址，并开始导航。
在离开当前页面开始导航之前，会触发一个 Window: beforeunload event 事件，给用户一次取消导航的机会。在用户点击确认之后，才会正式开始进入导航流程，于此同时，浏览器标签上的状态也会变成正在加载的状态。

开始导航

浏览器会先在缓存里查找有没有目标网页的缓存数据，如果有的话直接返回缓存数据，没有的话开始 DNS 解析；

DNS解析阶段：

浏览器会根据上一步的URL，来查找需要请求的目标服务器地址，这个过程会一层层的去解析URL地址，直至找到目标地址的IP。

  1. 检查浏览器缓存中是否缓存过该域名对应的IP地址；
  2. 查找本机系统是否有记录，比如在 hosts 文件里查找是否有目标网址的记录，有的话就把相应映射的IP返回；
  3. 如果在 hosts 里没有相应的记录，就会开始在网络 DNS 节点上查找。这里首先会先从本机配置的 DNS 服务器上查找缓存，比如局域网路由器里默认或手动指定的某几个 DNS 服务器；
  4. 本地域名解析器没有查找到的话，就会向13台跟域名解析器发送请求来查找。如果找到，则直接把映射的IP原路返回给客户端（浏览器）。
  5. 如果跟域名解析器没有查找到，比如 域名是 bar.foo.com, 会由跟域名解析器查找到 .com 一级域名，继续查找，如果有记录，则直接原路返回映射的IP；
  6. 如果一级域名解析器没有查找到，会向二级域名解析器查找，找到了就返回，如果没有找到，则返回无法找到对应IP的错误给浏览器；
  7. 在浏览器接收到解析的IP之后，会缓存下来，以便下一次直接从缓存里查找映射。

当然，上面的流程是递归查询的流程，还有一种是迭代查询的方式，在根域名解析器找不到的时候，就告诉客户端去二级域名解析器查找，以此类推。

URL请求过程

在浏览器解析到目标URL对应主机IP的时候，网络进程会根据这个 IP 地址和服务器构建TCP连接，浏览器端会构建请求行、请求头等信息，并把和该域名相关的cookie信息放在请求头中一并发送过去。
服务器在收到请求信息后，会根据情况构建响应信息（响应行、响应头、响应体等），然后返回给浏览器端。

  1. 在网络进程接收到服务器返回的响应信息后，会开始解析响应头信息，如果响应头的状态码是 301 或者 302, 浏览器就要从响应头里的 Location 字段读取要重定向的URL地址，然后对这个 URL 地址发起新的 HTTP 或者 HTTPS 请求；如果接收到的响应头状态码是 200, 就可以继续处理该请求；
  2. 响应数据类型处理：如果响应头里的 Content-Type 字段是 application/octet-stream 之类的字节流类型，浏览器一般会把它当作下载类型来处理， 浏览器进程会触发下载管理器来下载该文件，同时中止当前导航流程；
  3. 如果 Content-Type 是 text/html，浏览器则根据响应数据开始渲染流程；

提交文档

  1. 浏览器在在网络进程接收到网络请求的响应头之后，会向渲染进程发起 提交文档 的消息；
  2. 渲染进程接收到 提交文档的消息后，会和网络进程直接建立数据传输的通道，用来接收响应体信息；
  3. 渲染进程接收完文档数据之后，返回 确认提交 的消息给浏览器进程；
  4. 浏览器进程接收到消息后，会更新浏览器的状态（安全状态、地址栏URL、历史记录、前进后退按钮、更新web页面等）；

渲染阶段

  1. 构建 DOM 树；
  2. 样式计算: 根据样式表计算所有 DOM 节点的样式；
  3. 构建布局树：
  • 遍历 DOM 树中的所有可见节点，添加到布局树中；
  • 布局计算：计算每个节点的几何位置信息和样式信息，保存在布局树中；
  1. 分层：为特定节点创造不同图层，生成分层树；各个图层分别绘制（根据绘制指令列表）；
  2. 合成：绘制列表提交给合成线程来渲染：将图层分成图块，利用光栅化转化成位图。合成线程发送 DrawQuad 命令到浏览器进程，由浏览器进程生成页面、并显示在页面上。