浏览器如何工作（二）导航
AI summary
date
Aug 13, 2024
slug
how-browser-navigate
status
Published
tags
技术
summary
访问页面时，浏览器的第一个操作就是导航，理解进程之间的协作，浏览器好像栩栩如生的小世界。
type
Post
一个经典的问题
“从输入 URL 敲下回车到页面完成渲染，发生了什么？” —— 一道 old school 经典面试题
关于这个过程，可以概括为两个主要阶段
- 导航：用户输入 URL，敲下回车，从请求网页到浏览器准备渲染网页的过程。
- 渲染：根据获取的数据渲染页面的过程。
本篇就来聊聊第一个阶段 —— 导航
1. 输入处理
访问页面，一切从用户在浏览器中输入一个 URL 开始。
在 《浏览器架构》那篇我们讲过，浏览器是多进程架构。
而导航的核心工作由主进程完成。
比如这个导航栏，由主进程的 UI线程 负责。
- 处理输入
当用户在地址栏输入内容时，UI 线程 会立即开始处理输入。它会分析用户输入的字符串，判断这是一个查询（Query）还是一个 URL。
- 如果输入看起来像一个 URL（包含常见的 URL 协议如
http://,https://,ftp://等，或者是一个常见的域名格式），UI 线程会将其视为 URL。
- 如果输入不符合 URL 的格式，UI 线程会将其视为一个查询（Query），并准备进行搜索引擎的查询。
URL 处理：
UI 线程会将用户的输入交给网络线程
查询处理：
UI 线程 使用默认搜索引擎，构建查询 URL，然后再执行 URL 处理
2. 请求资源
UI 线程通知网络线程发起网络调用，并使标签页左端显示 loading 图标
然后我们的主角来到了 浏览器主进程 的 网络线程
网络线程经过一系列操作，建立连接，请求数据（此处先不展开）
重定向
这个过程中，网络线程可能收到服务器的重定向头部 (301) ，此时网络线程会和UI线程通信，通知UI线程发起重定向，UI 线程开始使用另一个 URL 执行之前的流程。
3. 识别响应
网络线程获取到服务器响应数据，会检查收到的前几个字节。响应头的
Content-Type 应该描述该数据的类型，如果没有此字段，浏览器会进行 MIME 类型嗅探（根据内容推测类型）
如果响应是 HTML 文件 (即
Content-Type 为 text/html) ，则进入下一步，把数据交给渲染器进程
（浏览器对于不同类型的返回处理不同，比如 zip 类型，就会使用下载管理器下载此文件，如果是图片，视频，PDF，浏览器可能会使用其内置的显示程序。）
4. 通信渲染进程
当网络进程确认了需要渲染的数据，则会通知 UI 线程
- 主进程中：
网络线程：
I’m ready，leader，数据已经准备好。UI线程：
好的，网络线程，我这就把它交给渲染进程部门 - 渲染进程：
主线程：通过 IPC 收到 HTML 数据流，当收集完毕后，再告知浏览器主进程，我已ok
- 主进程收到确认通知，导航阶段完成。
- 开始文档加载阶段（渲染阶段）
有趣的想法：
写到这儿，我觉得一个进程好像一个 “部门”，而线程则是部门中的各个员工。
同一个部门的员工相互交流非常方便，只需要走几步就到对方的旁边。而跨部门的交流则更加低效一些。部门的拆分，有助于管理大型的公司，拆分进程也是同样的道理。
上述的过程可以这样想象：
网络线程 和 UI 线程同属于 浏览器主进程（同一个部门），于是他们的交流特别方便：
网络线程 转过身告诉了 UI 线程数据已经准备好
而 UI 线程要跨进程通信 （IPC）：
UI 线程 将数据装到信封，打包好，投进邮局，邮到了渲染进程—主线程签收。
渲染进程—主线程 收到后，回信给 主进程 — UI线程，我已收到。
优化策略：
网络线程可能需要花费几百毫秒才能获取到响应。
因此 UI 线程可以在这个期间提前联系到渲染进程，于是当数据实际准备好时，已经有一个渲染进程准备待命了。
但这个过程中也可能导致准备好的渲染进程用不上（比如发生了重定向）
5. 后续
到此，导航阶段已经完成，进入渲染阶段，当页面初次渲染完成后，渲染进程通知浏览器主进程的 UI 线程，UI线程将 Loading 状态改为该网站的图标，并显示网站标签名
总结
访问页面时，浏览器的第一个操作就是导航，理解进程之间的协作，浏览器好像栩栩如生的小世界。