浏览器工作原理（5）-从输入URL到页面展示，中间经历了什么

从在地址栏输入URL按下enter键，到页面展示，这中间都发生了什么

这是一道常考的面试题，涉及到网络、操作系统、浏览器渲染等问题，看一下李兵老师的一副总结图片，比较全面的总结了其中的过程

由上图可知，整个发生过程，涉及到了多个进程共同工作，简单看一下各个进程的工作职责：

• 浏览器进程：用户交互，子进程管理，文件存储
• 网络进程：为浏览器进程和渲染进程提供网络下载服务
• 渲染进程：把网络进程获取到的资源渲染成可以交互的前端页面

一起看一下各个步骤都如何工作的：

• 浏览器进程收到URL请求，首先进行信息处理（比如加上http等），然后转给网络进程发起真正的请求
• 网络进程发送请求
• 网络进程读取响应头信息，分析处理数据，再转交给浏览器进程
• 浏览器进程收到响应头数据之后，发送提交导航到渲染进程
• 渲染进程接收到提交导航的信息之后，准备HTML数据，通过管道和网络进行建立连接接受到数据
• 渲染进程向浏览器进程确认提交，通知浏览器准备好接受数据和解析数据了
• 浏览器进程接收到提交文档消息之后，开始更新浏览器页面

接下来具体看一下每一步的内容

1 用户输入URL

输入URL之后，浏览器进程首先要判断是搜索内容还是请求的URL，如果是搜索内容，则会使用默认的搜索引擎合成带有关键词的请求URL，如果是请求URL，则会处理URL，比如加上https协议。

在请求发起之前，浏览器给当前页面一个beforeunload的事件，在这个事件中，用户可以清理数据，询问是否离开等操作

2 URL请求过程

上述步骤完成以后，便开始页面资源请求，浏览器进程和网络进程通过IPC进行通信，网络进程收到URL之后开发发起真正的请求。

这个过程中，网络进程会首先查找本地缓存，看是否有该资源，如果有的话，就直接返回资源给浏览器进程(状态码：304)，没有的话，直接进入网络请求阶段。

网络请求的第一步是进行DNS解析，查找对于的IP地址，如果是https协议还需要进行TLS连接
拿到IP地址之后，开始建立TCP连接，建立之后，构建请求行，请求头，请求体，并把该域名下的cookie等数据附加到请求头

服务器收到请求头之后，开始生成相应数据(相应行、响应头、响应体)，发给网络进程，网络进程收到数据之后，开始解析响应头内容

2-1 重定向

接收到服务器返回的响应头之后，网络进程开始解析，如果发现状态码是301或者302，则表示服务器需要浏览器重定向至别的地址，网络进程可以从响应头里拿到需要重定向的地址(Loaction), 然后一切从新开始

2-2 响应数据类型处理

URL请求类型有时候是下载类型，有时候是html页面，浏览器通过content-type来区分，来告诉服务器返回的响应体应该是什么数据类型，如果请求页面，content-type为text/html，如果请求的是一个安装包文件，content-type为application/octet-stream，浏览器会 根据不同的类型来做相应的处理

2-3 准备渲染进程

默认情况下，Chrome每打开一个页面就会创建一个渲染进程，也有一些例外，多个页面直接运行在同一个渲染进程中。为什么会出现运行在同一渲染进程的情况呢？

同一站点： same-site, 根域名+协议相同就叫同一站点，可以有多个子域名，或者不同的端口，浏览器默认的策略是每个页面开启一个渲染进程，但是如果新打开的页面和父页面是同一站点，那么就会共用父页面的渲染进程，如果不是同一站点，则会打开一个新的渲染进程。

渲染进程准备好之后，还需要将文档从网络进程中拿过来，这一步叫提交文档阶段。

2-4 提交文档

提交文档是指浏览器进程将网络进程中的HTML数据提交给渲染进程的过程：

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

2-5 渲染进程

文档被提交之后，渲染进程开始解析页面和子资源加载，一旦页面生成，渲染进程会发送一个消息给浏览器进程，浏览器接收到消息之后，会停止标签图标上的加载动画，至此，从页面输入URL按下enter，到页面加载完成，一个完整的流程就走完了。

总结

1 用户输入URL按下回车键
2 浏览器进程检查URL，组装协议，构成完整的URL
3 浏览器进程通过进程间通信(IPC)，把URL发送到网络进程
4 网络进程检查本地缓存，如果有直接返回给浏览器
5 如果没有，直接发送请求
5-1 进行DNS解析，找到对应IP地址
5-2 利用IP地址建立TCP连接
5-3 构建请求头信息
5-4 发送请求头信息
5-5 服务器响应，构建返回头信息
6 网络进程接受到响应头信息
7 检查状态码，304重定向，200OK
8 网络进程提交文档
9 网络进程和渲染进程建立传输通道
10 渲染进程解析文档，向浏览器进程发送确认提交信息
11 浏览器进程渲染页面，状态栏，按钮状态
12 渲染进程完成解析，发送消息给浏览器进程，
13 浏览器进程停止刷新，整个过程结束