从输入URL到页面展示，这中间发生了什么？

一、在Chrome浏览器中：仅仅打开了1个页面，最少会有4个进程呢？

（一）Chrome 浏览器包括哪几个进程呢？

1 个浏览器（Browser）主进程

1 个 GPU 进程

1 个网络（NetWork）进程

多个渲染进程

多个插件进程。







（二）每一个进程的详细介绍

1、浏览器主进程：

主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。

2、渲染进程：

核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。

3、GPU 进程：

其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。

4、网络进程：

主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。

5、插件进程：

主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。



讲到这里，现在你应该就可以回答文章开头提到的问题了：仅仅打开了 1 个页面，为什么有 4 个进程？ 因为打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个；如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。





二、从输入URL到页面展示，这中间发生了什么？

****这个过程可以大致描述为如下：

1、首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。

2、然后，在网络进程中发起真正的 URL 请求。

3、接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。

4、浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (CommitNavigation)”消息到渲染进程；

5、渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道；

6、最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。

7、浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。



****从【输入URL 】到【页面展示】，总共分为【七步】，具体如下 ：

第一步：用户输入（处于“浏览器进程”）

（一）当用户在地址栏中【输入一个查询关键字】时，地址栏会判断输入的关键字是【搜索内容】，还是【请求的 URL】。

1、如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。

2、如果判断输入内容符合 URL 规则，比如输入的是 baidu.com，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL，如www.baidu.com/



（二）当用户输并键入回车之后

这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面，比如当前页面可能有未提交完成的表单等情况，因此用户可以通过 beforeunload 事件来取消导航，让浏览器不再执行任何后续工作。



当前页面没有监听 beforeunload 事件或者同意了继续后续流程，那么浏览器便进入下图的状态：



从图中可以看出，当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为咱们想看的页面。因为需要等待提交文档阶段，页面内容才会被替换。



第二步：URL请求过程（处于“网络进程”）

1、构建请求

首先，浏览器构建请求行信息（如下所示），构建好后，浏览器准备发起网络请求。

GET /index.html HTTP1.1



2、查找缓存

在真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件。其中，浏览器缓存是一种在本地保存资源副本，以供下次请求时直接使用的技术。

（1）【有“缓存”】时：当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求，而不会再去源服务器重新下载。这样做的好处有：缓解服务器端压力，提升性能（获取资源的耗时更短了）；对于网站来说，缓存是实现快速资源加载的重要组成部分。

（2）【有“缓存”】时：如果缓存查找失败，就会进入网络请求过程了。



3、准备“IP地址”和“端口号”

（1）浏览器会请求 DNS 返回域名对应的 IP地址。

（2）拿到 IP 之后，接下来就需要获取端口号了。通常情况下，如果 URL 没有特别指明端口号，那么 HTTP 协议默认是 80 端口。





4、等待TCP队列

现在已经把端口和 IP 地址都准备好了，那么下一步是不是可以建立 TCP 连接了呢？答案依然是“不行”。Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。当然，如果【当前请求数量】少于 6，会直接进入下一步，建立 TCP 连接。



5、建立TCP连接（通过“三次握手”）

（1）排队等待结束之后，终于可以快乐地和服务器握手了，在 HTTP 工作开始之前，浏览器通过 TCP 与服务器建立连接。

（2）【建立TCP连接】这个阶段是通过“三次握手”来建立客户端和服务器之间的连接。

（3）TCP 提供面向连接的通信传输。面向连接是指在数据通信开始之前先做好两端之间的准备工作。

（4）所谓三次握手，是指在建立一个 TCP 连接时，客户端和服务器总共要发送三个数据包以确认连接的建立。



6、发起HTTP请求

浏览器会向服务器发送请求行，它包括了请求方法、请求 URI（Uniform Resource Identifier）和 HTTP 版本协议。





7、服务器处理请求

8、服务器响应请求

（1）服务器处理结束，便可以返回数据给浏览器了。

（2）Content-Type 是 HTTP 头中一个非常重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型，然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。

（3）需要注意的是，如果服务器配置 Content-Type 不正确，比如将 text/html 类型配置成 application/octet-stream 类型，那么浏览器可能会曲解文件内容，比如会将一个本来是用来展示的页面，变成了一个下载文件。















9、断开TCP连接（通过“四次挥手”）

（1）数据传输完毕之后，就要终止连接了，涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。

（2）通常情况下，一旦服务器向客户端返回了请求数据，它就要关闭 TCP 连接。不过如果浏览器或者服务器在其头信息中加入了：

Connection:Keep-Alive 

那么 TCP 连接在发送后将仍然保持打开状态，这样浏览器就可以继续通过同一个 TCP 连接发送请求。保持 TCP 连接可以省去下次请求时需要建立连接的时间，提升资源加载速度。比如，一个 Web 页面中内嵌的图片就都来自同一个 Web 站点，如果初始化了一个持久连接，你就可以复用该连接，以请求其他资源，而不需要重新再建立新的 TCP 连接。



第三步：准备渲染进程

默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。



第四步：提交文档

所谓提交文档，就是指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程，具体流程是这样的：首先当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息；渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

其中，当渲染进程确认提交之后，更新内容如下图所示：







导航完成状态这也就解释了为什么在浏览器的地址栏里面输入了一个地址后，之前的页面没有立马消失，而是要加载一会儿才会更新页面。到这里，一个完整的导航流程就“走”完了，这之后就要进入渲染阶段了。



第五步：渲染阶段

一旦文档被提交，渲染进程便开始页面解析和子资源加载了，关于这个阶段的完整过程，我会在下一篇文章中来专门介绍。这里你只需要先了解一旦页面生成完成，渲染进程会发送一个消息给浏览器进程，浏览器接收到消息后，会停止标签图标上的加载动画。如下所示：







至此，一个完整的页面就生成了。那文章开头的“从输入 URL 到页面展示，这中间发生了什么？”这个过程及其“串联”的问题也就解决了。