浏览器导航

从我们输入URL到页面的展示，是一道面试经常会问的题目，这篇文章就重新梳理一遍这个流程。

首先，在开始前，我们回顾一些知识点：

• 浏览器的进程，线程
• 浏览器的网络

只有了解了这两个才能很好的理解这篇文章。

上图已经挺清楚的将框架搭好了，接下里再写写里面的具体内容就好了。总的流程大概可以被描述为：

1. 浏览器收到用户输入的URL请求，浏览器进程就讲该URL转发给网络进程。
2. 在网络进程中发起真正的URL请求。
3. 网络进程发送完后收到了相应头数据，便解析响应头数据，并将数据转发给浏览器进程。
4. 浏览器进程收到网络进程的响应头数据后，发送“提交导航”消息到渲染进程。
5. 渲染进程收到“提交导航”的消息后，便开始接收HTML数据，接收数据的方式是直接和网络进程建立数据管道。
6. 最后渲染进程向浏览器进程“确认提交”，这是在告诉浏览器进程，“已经准备好接收和解析页面数据了”
7. 浏览器进程收到渲染进程“提交文档”的消息后，便开始移除旧文档，然后更新浏览器进程中的页面状态

用户发出URL请求到页面开始解析的过程，这个叫做导航。

输入

用户在导航栏中输入内容，浏览器进程的UI线程会判断输入的是地址还是搜索内容。

• 网址：UI线程启动一个**网络线程（网络进程）**请求DNS进行域名解析。

  • 在以前版本的浏览器中，网络部分是浏览器进程的一个线程，到了最近的多架构浏览器，网络部分从浏览器进程中独立出来了，单独作为一个独立的浏览器进程，通过IPC通道进行通信。

• 搜索内容：使用默认的搜索引擎进行搜索。

当敲下回车后，意味着当前页面会被新的页面替换，在这个过程中，首先会执行一个旧页面的销毁过程，给旧页面一个 beforeunload 事件

• beforeunload：当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

当页面同意了继续后续流程时，不会立刻更新页面，页面还是刚刚的页面，但是上面的滚动刷新开始转了，进入了加载状态。

这个时候是提交文档阶段， 等待提交文档，页面内容才会被替换。

URL请求

导航栏部分是属于浏览器的浏览器进程，在上一阶段结束后，浏览器进程会通过进程间通信IPC把URL请求发送到网络进程，在网络进程接收到URL请求后，在这里发起真正的URL请求。

1. 查看缓存。
2. 进行DNS解析，获取IP。
3. 利用IP和服务器进行TCP连接。
4. 建立成功后，浏览器构建请求行，请求头等信息，并加上cookie，向服务器发送构建的请求信息。
5. 服务器收到信息后，会根据请求信息生成相应信息，并发送回浏览器，给到网络进程。
6. 网络进程解析相应数据。

收到相应后

1. 重定向

   在收到相应数据后，网络进程解析响应头，如果状态码为301 or 302 则说明服务器需要浏览器重定向到其他URL，这时候网络进程会从响应头中的Location字段中读取重定向的地址，然后再发起新的HTTP或者HTTPS请求，一切从头开始。

这张图来看，我们通过发http请求到极客时间这个网站，他返回的相应里面有个Location字段，叫我们重定向到https的极客时间，这就是一个重定向的例子。

在导航过程中，如果服务器响应行的状态码包含了 301、302 一类的跳转信息，浏览器会跳转到新的地址继续导航；如果响应行是 200，那么表示浏览器可以继续处理该请求。

1. 相应数据类型处理

   我们发送了请求后，很多时候得到的结果并不一样，例如我们在下载一些图片，下载一些资源的时候，也是发送请求，但是为什么这些请求就可以下载图片，有些请求却是访问页面的呢？

   我们发送的时候都是差不多的，但是返回来的时候是有区别的，区别就在Content-Type这个属性上。这是HTTP头中一个很重要的字段，它告诉浏览器返回的数据相应体是什么样的数据，然后浏览器就会根据不同的Content-Type来决定如何显示相应体的内容。

常见的Content-type：

HTML文档	text/html
JPEG图片	image/jpeg
GIF图片	image/gif
JS	application/javascript
xml	application/xml
json	application/json

导航结束

在导航结束后，也就是浏览器接收到了服务端传过来的数据，接下来就是很重要的渲染阶段了。