『包教不包会的输入URL到渲染完成系列（二）』之浏览器准备导航阶段

前言

见解有限，如有描述不当之处，还请大家指出，如有错误，会及时修正。（Doge保命）

这是本系列的第二篇文章，主要讲浏览器内核的组成，浏览器准备导航阶段。

目的：

• 对浏览器内核有初步的认知。
• 了解http请求流程之前，浏览器的准备导航阶段内容
• URL和URI的关系及区别

小声BB：

• 文章内容存在大量的引用，在本人粗浅理解下整理了其中的内容，引用的链接放置在子标题下方，如有需要，可以进入原文深入了解。如有侵权，给我留言，立马删除。
• 由于本系列主要叙述和前端相关的部分，有些内容会略过。

大纲

• 回顾浏览器架构
• 浏览器内核的组成
• 按下"g"键
• 从按下回车键之后到浏览器接收
• 解析URL
• URL和URI
• 检查 HSTS 列表
• 回顾浏览器架构
• 开始导航
• 总结
• 这一系列文章地址

回顾下浏览器架构

引自：

• Inside look at modern web browser (part 1)

图：浏览器进程

• 浏览器（Browser）：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
• 渲染器（Renderer）：控制选项卡内，网站里显示的所有内容。
• 插件（Plugin）：控制网站使用的插件，例如：Flash。
• GPU：独立于其他进程，专用于处理 GPU 任务。
• 还有更多的进程，如：扩展进程（Extension Process）和实用进程（Utility Process），其中比较重要的网络服务就属于实用进程

浏览器内核的组成

引自：

• 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
• 《webkit技术内幕》
• howbrowserswork
• 浏览器内核原理--chromium blink基础

浏览器内核主要包括以下三个技术分支：排版引擎、 JavaScript引擎，以及其他。

接下来我们可以看下浏览器内核中到底有些什么。

图：WebKit架构

图：WebKit2接口和进程模型

图：Blink架构

浏览器的渲染进程是多线程的，那进程里面的线程都是什么呢？

1. GUI渲染线程
   • 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
2. JS引擎线程
   • 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
   • JS引擎线程负责解析Javascript脚本，运行代码。
3. 事件触发线程
   • 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
4. 定时触发器线程
   • 传说中的setInterval与setTimeout所在线程
5. 异步http请求线程
   • 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求

图：浏览器内核线程

按下"g"键

参考：

• How can you modify URL predictions on chrome?
• high-performance-networking-in-chrome.html
• Google Chrome中的高性能网络(二)
• High Performance Networking in Chrome

当你按下“g”键，浏览器接收到这个消息之后，会触发自动完成机制。浏览器根据自己的算法，以及你是否处于隐私浏览模式，会在浏览器的地址框下方给出输入建议。

大部分算法会优先考虑根据你的搜索历史和书签等内容给出建议。

实际上，在Chrome中 它这个特性是通过一个单例对象Predictor来实现的，具体可以在地址栏打开chrome://predictors，打开类似下图：

图：chrome://predictors的内容

单例对象Predictor在浏览器内核进程(Browser Kernel Process)中实例化，它唯一的职责就是观察和学习当前网络活动方式，提前预估用户下一步的操作。Chrome在这里优化的内容

核心优化技术	作用
DNS预解析(pre-resolve)	提前解析主机地址,以减少DNS延迟
TCP预连接(pre-connect)	提前连接到目标服务器,以减少TCP握手延迟
资源预加载(prefetching)	提前加载页面的核心资源,以加载页面显示
页面预渲染(prerendering)	提前获取整个页面和相关子资源,这样可以做到及时显示

从按下回车键之后到浏览器接收

详细内容可以看以下内容

• github.com/skyline7548…
• 从输入 URL 到页面加载完成的过程中都发生了什么事情？

大概可以分为四步

1. 回车键按下
   1. USB键盘处理
   2. 虚拟键盘处理
2. CPU 内部的处理
3. 从 CPU 到操作系统内核
4. 从操作系统 GUI 到浏览器

解析URL

引自：

• github.com/skyline7548…
• Inside look at modern web browser (part 1)

接下来，UI线程首先要判断的是“这是搜索查询还是URL？”。 因为在Chrome中，地址栏也是搜索输入框，因此UI线程需要解析并判断是将你的输入发送到搜索引擎还是去请求对应的网站。

图：UI线程询问输入是搜索查询还是URL

解析URL

浏览器通过 URL 能够知道下面的信息：

• Protocol "http"使用HTTP协议
• Resource "/"请求的资源是主页(index)

输入的是 URL 还是搜索的关键字？

当协议或主机名不合法时，浏览器会将地址栏中输入的文字传给默认的搜索引擎。大部分情况下，在把文字传递给搜索引擎的时候，URL会带有特定的一串字符，用来告诉搜索引擎这次搜索来自这个特定浏览器。

URL和URI

参考：

• 极客时间-透视HTTP协议
• URI、URL 和 URN 的区别
• 什么是URI、URL、URN、URC和Data URI？

定义

• URI: (Uniform Resource Identifier) 统一资源标识符，用于标示一个抽象或者物理资源。
• URL: (Uniform Resource Locator) 统一资源定位符，用于标示网络资源的位置。
• URN: (Uniform Resource Name )统一资源名称，通过名称来标识资源。

通俗点的描述：

• 统一资源标识符（URI）就是一个人的标记，这个标记可以是姓名或者住址；
• 统一资源名（URN）如同一个人的姓名，他叫啥；
• 统一资源定位符（URL）代表一个人的住址，他住哪儿。

换言之，URI是说某一个事物的标识，URN定义某事物的身份，而URL提供查找该事物的地址。

三者之间的关系

图：三者之间的关系

URI包括URL和URN

URI 的完整格式

图：URI 的完整格式

举个完整的栗子：

http://admin:1234@www.baidu.com:8080/abc/index.html?name=li#333
复制代码

• scheme：
  • 协议名
  • 对照例子是 http
  • 表示资源应该使用哪种协议来访问。
• user :
  • 用户名
  • 对照例子是 admin
• passwd
  • : 密码
  • 对照例子是 passwd
• host :
  • 服务器地址
  • 对照例子是 www.baidu.com
  • 表示主机名可以是 IP 地址或者域名的形式，必须要有。
• port :
  • 端口号
  • 对照例子是 8080
  • HTTP 的默认端口号是 80，HTTPS 的默认端口号是 443。端口号有时可以省略
• path:
  • 路径
  • 对照例子是 abc/index.html
  • 标记资源所在位置
• query
  • 查询字符串
  • 对照例子是name=li
  • 是多个“key=value”的字符串，这些 KV 值用字符“&”连接
• fragment
  • 片段标识符
  • 对照例子是333
  • URI 所定位的资源内部的一个“锚点”或者说是“标签”，浏览器可以在获取资源后直接跳转到它指示的位置。

检查 HSTS 列表

引自：

• what-happens-when-zh_CN
• 部署 HSTS 提升网站安全性

• 浏览器检查自带的“预加载 HSTS（HTTP严格传输安全）”列表，这个列表里包含了那些请求浏览器只使用HTTPS进行连接的网站；
• 如果网站在这个列表里，浏览器会使用 HTTPS 而不是 HTTP 协议，否则，最初的请求会使用HTTP协议发送；
• 注意，一个网站哪怕不在 HSTS 列表里，也可以要求浏览器对自己使用 HSTS 政策进行访问。浏览器向网站发出第一个 HTTP 请求之后，网站会返回浏览器一个响应，请求浏览器只使用 HTTPS 发送请求。然而，就是这第一个 HTTP 请求，却可能会使用户受到 downgrade attack 的威胁，这也是为什么现代浏览器都预置了 HSTS 列表。

开始导航

参考：

• 极客时间-浏览器工作原理与实践

接下来，便进入了页面资源请求过程。这时，浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。

然后，http请求流程就正式开始了。

图：http请求流程

这些内容，我们在接下来的文章中去详细的了解吧。

总结

作为这一系列的第二篇，从回顾浏览器架构开始，了解浏览器内核的组成。从按下按键，到浏览器准备导航的过程。 重点了解一下浏览器内核的组成和URI部分即可。 下一章就 进入http的请求流程了。各位大佬准备好上车了吗？ 如果各位大佬喜欢本系列的内容，可以点赞，加收藏，关注我。欢迎大家监督（催更）哦~

再次感谢大家~

系列文章：

1. 『包教不包会的输入URL到渲染完成系列（一）』之浏览器架构

来源：oschina

链接：https://my.oschina.net/u/4337873/blog/4282313