从输入URL到看到页面，中间经历了什么？

这是一个老生常谈的问题：
从输入URL到看到页面，中间究竟经历了什么？
这个问题的回答可繁可简，最简单地讲：经历了 寻址 -> 响应 -> 渲染 的过程。

现在让我们站在浏览器的角度，更深入一些去看看，这个过程中究竟发生了什么？

0. 拼装URL

虽然我们讨论的是从输入 URL 到看到页面，但实际上大多数现代浏览器支持的不仅仅是 URL 的输入，当浏览器判断我们输入的内容不符合 URL 规则，则会使用默认浏览器搜索引擎，结合输入的关键词组成新的带搜索内容的 URL。如下图：（划掉

（地址栏内容前G的图标提示这是一段用 Google 搜索的内容）

浏览器会组成类似于 https://www.google.com/search?q=肛肠科医院哪家强&oq=肛肠科医院哪家强&aqs=chrome..69i57j69i65j69i61l3.5319j0j9&sourceid=chrome&ie=UTF-8 这样的 URL，以便直接在搜索引擎中展示搜索结果。

如果判断输入的内容符合 URL 规范，如 t.bilibili.com， 那么地址栏会根据规则在这段内容前加上协议，组成完整的 URL，如 http://t.bilibili.com。

（地址栏内容前万维网的图标提示这是一个合法的 URL）

1. 触发卸载事件

这是经常容易被忽略的一个场景。事实上，当我们在地址栏中输入URL并按下回车后，浏览器里发生第一件事是触发卸载事件，即 beforeunload 事件。这也是当前页面最后的机会，你可以最后弹个弹窗尝试阻止用户关闭页面。此时用户可以选择取消导航，那么浏览器就会停止处理后续操作。

2. 进入 URL 请求

（页面没有马上卸载，但标签前开始转菊花）

当浏览器开始进入 URL 请求时，当前页面并没有被立即卸载，而是当前浏览器标签上多了一朵转动的菊花（加载状态）。实际上，这是因为浏览器进程需要等待提交文档阶段，才会开始渲染新的页面。

那么在页面资源请求过程中，究竟发生了什么呢？

此时，浏览器进程会通过进程间通信（IPC）把请求发送给网络进程，由网络进程发起 URL 请求。
而网络进程也不是傻傻的直接去进入网络请求流程。首先，网络进程会查找本地是否缓存了要请求的资源，如果缓存了，那么直接返回资源给浏览器进程；如果没有，那么进入网络请求流程。

（本地缓存的资源不需要再次通过网络请求获取）

2.1 建立网络连接

进入网络请求的第一步，是需要进行 DNS 解析，获取请求域名对应的服务器 IP 地址（HTTPS协议还要建立 TLS 连接）。
获取到 IP 地址后，就可以和该 IP 的服务器建立 TCP 连接了。在三次握手成功建立 TCP 连接后，浏览器就会根据 HTTP 协议，构建请求信息（请求头、请求行、cookie数据等），然后向服务器发送构建的请求信息。

接下来，就是静静地等待服务器返回响应信息。当网络进程接收到服务器响应信息之后，就开始解析响应头内容了。

2.2 处理响应行

响应的状态行（格式：HTTP版本号 状态号 原因描述<CRLF>，如 HTTP/1.1 200 OK）是服务器告诉浏览器需要做出的行为：
如果状态码是 301 或者 302，那么网络进程会读取响应头中的 Location 字段，并对该字段中指定的地址重新发起请求，一切重新开始，这个行为被称为重定向。
如果状态码是 200，那么恭喜，服务器告诉我们这是一个正常的响应，浏览器可以继续往下处理该请求了。

2.3 处理 Content-Type

某些情况下当我们访问一个资源时，我们不会看到页面渲染任何内容，而浏览器的下载管理器会将该资源下载到本地磁盘中。浏览器是如何区分的呢？
答案是响应头中的 Content-Type 告诉浏览器这是一个下载类型的资源（如 application/octet-stream）。
而当响应头中的 Content-Type 为 text/html，就是告诉浏览器，这是一个HTML格式的资源。此时浏览器会继续进行导航流程。

（当访问 www.bilibili.com 时，响应头告诉浏览器这是一个HTML资源）

3. 分配渲染进程

当 Chrome 的浏览器网络进程拿到一个 HTML 资源后，将会给该资源分配一个渲染进程。这个渲染进程往往是浏览器新建立的一个进程，除非该 URL 是从同一网站（same-site）中打开，那么他们将共享同一个渲染进程。

（同一网站共享一个渲染进程）

4. 传输渲染数据

我们前面提到过，当访问一个新的 URL 时，当前页面不会被立即卸载，而是当前浏览器标签上多了一朵转动的菊花（加载状态）。浏览器进程需要等待提交文档阶段，才会开始渲染新的页面。
所谓的提交文档，就是浏览器进行将网络进程接收到的 HTML 数据提交给渲染进程进行渲染。但此时网络进程只与浏览器进程建立了进程间通信（IPC），因此浏览器进程需要告诉渲染进行该消息（提交文档）。渲染进行接收到『提交文档』消息后，和网络进程建立连接并接收数据。数据传输完毕，渲染进程会告诉浏览器进程『确认提交』的消息，浏览器进程进行更新界面状态操作。
以上便解释了为什么在请求一个新的 URL 后，当前页面也没有立即消失。

（提交文档流程示意图）

5. 渲染

一旦进入提交文档阶段，渲染进程便开始解析 HTML 数据并加载需要的资源。一旦页面解析并渲染完成，渲染进程就会向浏览器进程发送一个消息，此时，浏览器标签上的菊花就消失了。

总结

以上就是对 从输入URL到看到页面，中间经历了什么？ 的一些学习和认知，其实这个问题往里深究可能一本书也写不完，我也仅仅将自己学到的一部分知识拿来分享。欢迎各位补充和讨论。