在上一篇文章中，我们知道网络浏览器是由各种进程组成的。这是网络浏览器架构的静态视图。
然而，浏览器并不是静态的。它是对用户交互的主动响应。当我们与浏览器交互时，不同的进程开始作为一个团队一起工作，最后在我们面前显示一个网页。
在这篇文章中，我们将了解流程如何在导航中协同工作。 导航 ( Navigation ) 是我们将深入研究的下一个黑匣子。输入是 URL，输出是网页。
5 个步骤的高级视图
简而言之，这 5 个步骤是：
- 处理用户输入
- 发送 URL 请求
- 准备渲染器进程
- 提交导航
- 渲染页面
在这些步骤中，涉及到浏览器中的三个进程：
- 浏览器进程处理用户输入（步骤 1）。此外，它还管理其他进程（步骤 3）。
- 网络进程负责处理 URL 请求（步骤 2）。
- 渲染器进程专注于渲染页面（步骤 4 和 5）。
导航从步骤 2 开始到步骤 4。 更具体地说，它在发送 URL 请求时开始，在浏览器开始渲染页面时结束。
第 1 步：处理用户输入
在导航开始之前，浏览器进程会解析用户输入。更具体地说，它是浏览器进程中的一个 UI 线程来完成这项工作。
当用户在地址栏中输入内容时，存在两种可能性：
- 搜索查询字符串
- 一个网址
如果浏览器进程认为用户输入是搜索查询字符串，它会解析关键字，将搜索查询组成 URL，然后发起 URL 请求。
如果它是一个 URL，例如 medium.com，地址栏会根据规则将协议（HTTP 或 HTTPS）附加到它。通过该协议，地址栏现在有一个完整的 URL medium.com。 当用户按下回车键时，浏览器进程会从地址栏中读取 URL。它通过进程间通信 (IPC) 将 URL 请求发送到网络进程。
此时，会触发“beforeunload”事件。选项卡图标变为加载微调器。网页保持不变。
第2步：发送URL请求
现在，网络进程接收来自浏览器进程的命令来处理 URL 请求。
在连接到互联网之前，网络进程首先查看浏览器缓存，看看所请求的资源是否已保存在本地。如果是，则网络进程将缓存的资源返回给浏览器进程。
如果没有，它将开始连接到互联网，发起 DNS 查找，接收 IP 地址，并根据 IP 地址建立 TLS（传输层安全）连接。
最后，它将 URL 请求发送到服务器。
服务器收到请求后，根据请求生成响应，包括响应头、响应正文等信息。最后，服务器将其响应发送到浏览器中的网络进程。
现在网络进程开始解析响应头。
安全浏览和 CORB
此时，Chrome 会检查域和响应数据，尝试将它们与恶意站点数据库进行匹配。
如果存在匹配，网络进程会向浏览器发出警报并显示警告页面。
同时，跨源读阻止 ( Cross Origin Read Blocking, CORB ) 检查会发生以防止侧通道攻击。
此时，网络进程可能会遇到不同的情况。
case 1 — 重定向
根据不同的状态码，网络进程做出不同的选择。其中之一是重定向。
如果网络进程在响应标头中看到 301 或 302 状态代码，它将根据正确的地址发起另一个 URL 请求。确切的地址位于响应标头的位置中。
将重复该步骤并再次开始 DNS 查找。
case 2 — Content-Type 不是 text/html
Content-Type 存在于响应头中，告诉网络进程其响应正文中数据的数据类型。
网络进程将决定如何对响应主体做出反应。
如果Content-Type是text/html，它告诉网络进程数据是HTML。
如果Content-Type是application/octet-stream，则表示数据是字节流。通常，浏览器将其视为下载请求，并将其提交给其下载管理器。
导航结束。
case 3 — 状态代码为 200，Content-Type 为 text/html
网络进程继续导航。
它告诉浏览器进程一切顺利，它将开始下载文档数据。
浏览器进程收到此消息后，进入下一步并开始准备渲染器进程。
第三步：准备渲染器进程
浏览器进程创建渲染器进程，等待渲染器进程发出就绪信号。
同时，网络进程不断地下载文档供渲染进程使用。
当渲染器进程处于待机位置时，开始下一步。
第 4 步：提交导航
浏览器进程和渲染器进程开始协同工作，用新文档替换旧文档。
更具体地，其具有以下步骤。
- 当渲染进程准备好时，它会向浏览器进程发送一条“提交导航”消息。该消息通知浏览器进程呈现器进程已准备好解析文档数据。
- 收到消息后，浏览器进程开始清除旧文档。
- 然后，确认从浏览器进程发送到渲染器进程，让它知道提交已经完成。
- 同时，浏览器进程更新其 UI 状态。
- 渲染器进程收到确认并开始从网络进程接收文档。
- 渲染器进程与浏览器进程确认文档已提交。
- 导航完成。
关于浏览器进程中的状态更新，包括：
- 安全状态（URL 旁边的锁图标）
- 地址栏网址
- 历史状态（前进和后退按钮）
- 网页（旧页面消失并变成白色）
- 将会话历史记录存储在磁盘上以方便选项卡恢复
这就是为什么当我们在地址栏中输入 URL 时，前一页内容会保留一段时间。直到此时，最后一页已被删除。
当渲染器进程收到提交后，它开始解析数据、请求下载子资源等任务。导航完成，页面渲染阶段开始。
第五步：渲染页面
渲染器进程收到确认。它继续解析从网络进程传送来的文档数据，并在您面前显示一个页面。 渲染结束时，渲染器进程告诉浏览器进程渲染完成。
UI 线程将其选项卡中的加载旋转器替换为网站的图标。触发“unload”事件。
网络和存储线程分离
在 Google 的一篇帖子中，网络和存储线程在 2018 年运行在浏览器进程中。
根据 Chromium 文档，两者现在已分离并作为进程运行。
只有当环境没有足够的资源时，浏览器才会优雅地降级到以前的架构，其中网络和存储作为线程工作。
要点
显示页面有五个步骤：
- 浏览器进程处理用户输入，撰写URL请求。
- 网络进程发送 URL 请求。导航开始。
- 浏览器进程在收到服务器响应后创建渲染器进程。渲染进程处于待机状态，网络进程接收文档。
- 浏览器进程提交导航。网络进程开始将文档数据发送到渲染器进程。导航结束。
- 渲染器进程渲染文档。
