浏览器导航过程发生了什么？(Chrome)

浏览器中的导航乃用户发起url请求至页面开始解析的过程。

浏览器的导航过程

以下为谷歌浏览器自输入url到页面展示的完整示意图：

关键过程

回顾上图，图中蓝色的几个节点是导航关键节点，导航过程可以大致描述为如下。

• 浏览器进程收到用户请求，并将该URL传递给网络进程
• 网络进程发起真正URL请求
• 网络进程收到请求的URL返回的响应头数据并加以解析，传递给浏览器进程并开始“准备渲染进程”
• 浏览器进程收到网络进程响应头数据后，发送“提交导航 (CommitNavigation)”消息到渲染进程（英文取词有点怪，感觉为提交文档更合适）
• 渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道
• 渲染进程向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。
• 浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档（unload 之前的Tab页面），然后更新浏览器进程中的页面状态
• 页面渲染呈现（内容比较多 看第二篇详解 页面是如何渲染的？）

详细过程

1.用户输入

浏览器（进程的UI线程）会根据用户输入的信息判断是普通内容搜索还是网址，具体过程如下：

if(enterKey =="搜索内容"){
	newURL=默认搜索引擎查询址+搜索内容
}else if(enterKey =="网址"){
	if("网址".contain(协议头){
		newURL=URL
	}else{
		newURL=协议头+URL
	}
}

注意：网址栏默认会省略http或https://www

2.URL请求过程

用户输入完内容，按下回车键，浏览器进入URL请求过程，导航栏显示loading状态。

⚠ 在离开页面之前，浏览器会执行当前页面的beforeunload 事件，在这事件中可以做数据清理或者提醒是否需要保存等，还可以将导航取消

---

具体步骤：

1.浏览器进程构建请求行信息，通过进程间通信（IPC）将URL请求发送给网络进程。

GET http://www.xx.com/index.html HTTP1.1

2.网络进程获取到URL，先去本地缓存中查找是否有缓存文件，如果有且没有过期，拦截请求，直接 200 返回资源给浏览器进程；否则，进入网络请求过程。(默认情况下状态码为200的响应可以被缓存)

3.网络进程请求 DNS 并返回域名对应的 IP 和端口号，如果之前 DNS 数据缓存服务缓存过当前域名信息，就会直接返回缓存信息；否则，发起请求获取根据域名解析出来的IP和端口号，如果没有端口号，http默认80，https默认443。如果是https请求，还需要建立TLS连接。

4.利用 DNS 解析出来的IP地址和服务器建立 TCP 连接（三次握手）。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。
⚠ Chrome 有个机制，同一个域名同时最多只能建立 6 个TCP 连接，超过该数值的则会进入等待队列

5.目的服务器应用层 HTTP 解析请求头和请求体，如果需要重定向，HTTP直接返回状态码 301 或者 302，同时在请求头的Location字段中附上重定向地址，浏览器会根据状态码和Location进行重定向操作（重新发起一个URL请求）；如果不是重定向，首先服务器会根据 请求头中的If-None-Match 的值来判断请求的资源是否被更新，如果没有更新，就返回 304 状态码，相当于告诉浏览器之前的缓存还可以使用，就不返回新数据了；否则，返回新数据，200 状态码，如果想让浏览器缓存数据的话，就在响应头中加入字段：Cache-ControlMax-age=2000

6.数据传输完成，TCP四次挥手断开连接。如果浏览器或者服务器在HTTP头部加上如下信息，TCP就一直保持连接。保持TCP连接可以节省下次需要建立连接的时间，提升资源加载速度 ，但会占用一个TCP的连接资源，适用于频繁请求的接口connection:keep-Alive

7.浏览器网络进程将获取到的数据包进行解析，根据响应头中的Content-type来判断响应数据的类型，如果是字节流类型，就将该请求交给下载管理器，该导航流程结束；如果是text/html类型，就通知浏览器进程获取到文档，准备渲染。一旦出现该字段内容遗漏或是错误的情况，MIME 类型嗅探就开始发挥作用。

3.准备渲染进程

网络进程通知浏览器进程数据取回来了，然后判断当前页面是否为与浏览器中某页面共用一个渲染进程，则复用，否则，新创建一个单独的渲染进程。至于何时需要共用渲染进程，何时需要新建渲染进程，可看文章： 你不了解的渲染进程.

4.提交文档

简而言之： 浏览器会发出“提交文档(CommitNavigation)”的消息给渲染进程，渲染进程收到消息后，会和网络进程建立传输数据的“管道”，文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程。所谓提交文档，就是指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程，具体流程是这样的：

• 当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息；
• 渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；
• 文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；
• 浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面，此时的web页面是空白页

这也就解释了为什么在浏览器的地址栏里面输入了一个地址后，之前的页面没有立马消失，而是要加载一会儿才会更新页面。

至此，一次完整的导航完成。

---

简单记忆一次导航过程：

• DNS 查询
• TCP 连接
• HTTP 请求即响应
• 服务器响应
• 客户端渲染