浏览器中的HTTP请求原理

一.浏览器的多进程架构(Chrome)

Chrome打开一个页面需要启动多少进程？我们可以点击Chrome浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”，这将打开Chrome的任务管理器的窗口：

Chrome任务管理器也是用来展示运行中Chrome使用的进程信息的
从图中可以看到，Chrome启动了多个进程。为什么打开一个页面却启动了多个进程，这里我们就要先了解一下什么是进程和线程
1.进程和线程:
多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的
一个进程就是一个程序的运行实例
详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。
图示：

从图中可以看到，线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率
进程和线程之间的关系有以下4个特点：
(1).进程中的任意一线程执行出错，都会导致整个进程的崩溃
(2).线程之间共享进程中的数据
(3).当一个进程关闭之后，操作系统会回收进程所占用的内存
(4).进程之间的内容相互隔离
2.多进程架构
最新的Chrome进程架构图

从图中可以看出，最新的Chrome浏览器包括：1个浏览器（Browser）主进程、1个 GPU 进程、1个网络（NetWork）进程、多个渲染进程和多个插件进程。

下面我们来逐个分析下这几个进程的功能。

● 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
● 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎Blink和JavaScript引擎V8都是运行在该进程中，默认情况下，Chrome会为每个Tab标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
● GPU进程。其实，Chrome刚开始发布的时候是没有GPU进程的。而GPU的使用初衷是为了实现3D CSS的效果，只是随后网页、Chrome的UI界面都选择采用GPU来绘制，这使得GPU成为浏览器普遍的需求。最后，Chrome在其多进程架构上也引入了GPU进程。
● 网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
● 插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。
讲到这里，现在你应该就可以回答前面提到的问题了：仅仅打开了1个页面，为什么有多个进程

二.TCP协议

1.如何把数据完整地送达应用程序？
**TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。
一个完整的TCP连接的生命周期包括了“建立连接”“传输数据”**和“断开连接”三个阶段。

● 首先，建立连接阶段。这个阶段是通过“三次握手”来建立客户端和服务器之间的连接。TCP 提供面向连接的通信传输。面向连接是指在数据通信开始之前先做好两端之间的准备工作。所谓三次握手，是指在建立一个TCP连接时，客户端和服务器总共要发送三个数据包以确认连接的建立。
● 其次，传输数据阶段。在该阶段，接收端需要对每个数据包进行确认操作，也就是接收端在接收到数据包之后，需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后，在规定时间内没有接收到接收端反馈的确认消息，则判断为数据包丢失，并触发发送端的重发机制。同样，一个大的文件在传输过程中会被拆分成很多小的数据包，这些数据包到达接收端后，接收端会按照TCP头中的序号为其排序，从而保证组成完整的数据。
● 最后，断开连接阶段。数据传输完毕之后，就要终止连接了，涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。
到这里你应该就明白了，TCP为了保证数据传输的可靠性，牺牲了数据包的传输速度，因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。

三.浏览器端发起HTTP请求流程

从图中可以看到，浏览器中的HTTP请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备IP和端口、等待TCP队列、建立TCP连接、发起HTTP请求、服务器处理请求、服务器返回请求和断开连接。

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

1.整个过程需要各个进程之间的配合。
● 首先，浏览器进程接收到用户输入的URL请求，浏览器进程便将该URL转发给网络进程。
● 然后，在网络进程中发起真正的URL请求。
● 接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。
● 浏览器进程接收到网络进程的响应头数据之后，发送“**提交导航(CommitNavigation)”**消息到渲染进程；
● 渲染进程接收到“提交导航”的消息之后，便开始准备接收HTML数据，接收数据的方式是直接和网络进程建立数据管道；
● 最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。
● 浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。
这其中，用户发出URL请求到页面开始解析的这个过程，就叫做导航。
导航过程中，如果服务器响应行的状态码包含了301、302一类的跳转信息，浏览器会跳转到新的地址继续导航；如果响应行是200，那么表示浏览器可以继续处理该请求
2.URL请求的数据类型，有时候是一个下载类型，有时候是正常的HTML页面，那么浏览器是如何区分它们呢？
答案是Content-Type。Content-Type是HTTP头中一个非常重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型
响应头中的Content-type字段的值是text/html，这就是告诉浏览器，服务器返回的数据是HTML格式。
Content-Type的值是application/octet-stream，显示数据是字节流类型的，通常情况下，浏览器会按照下载类型来处理该请求。
下载类型，那么该请求会被提交给浏览器的下载管理器，同时该URL请求的导航流程就此结束。但如果是HTML，那么浏览器则会继续进行导航流程。
注意：如果服务器配置Content-Type不正确，比如将text/html类型配置成application/octet-stream类型，那么浏览器可能会曲解文件内容，比如会将一个本来是用来展示的页面，变成了一个下载文件
总结：
● 服务器可以根据响应头来控制浏览器的行为，如跳转、网络数据类型判断。
● Chrome默认采用每个标签对应一个渲染进程，但是如果两个页面属于同一站点，那这两个标签会使用同一个渲染进程。
● 浏览器的导航过程（http请求过程）涵盖了从用户发起请求到提交文档给渲染进程的中间所有阶段。