一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

一、HTTP协议

• HTTP协议的定义：它的英文是Hypertext Transfer Protocol,也就是超文本传输协议,在RFC7230中对它的定义是：一种无状态的，应用层的，以请求应答方式运行的协议，它使用可扩展的语言和自描述的消息格式，与基于网络的超文本信息系统灵活的互动。
• RFC文档是对所有协议的最权威的一个定义。在7230中对英文版的原始的定义中有以下几个关键词：
• 首先是 stateless,意思就是一个无状态的协议，也就是说连续的两个请求中，后一个请求，不能依赖前一个请求中相应的字段或者head头部等;
• 第二是request/respons,意思是这个协议一定是基于一个连接，首先由客户端来发起请求，然后服务器才能在这个连接上发起一个respons响应，它必须以这样一种方式来工作;
• 第三个是extensible semantics,意思语义是可扩展的，比如说我们现在有些服务器还在使用很老的HTTP 1.1的版本，它不支持HTTP 1.1协议，但是浏览器是支持HTTP 1.1协议的,那么浏览器和服务器仍然可以正常的通讯;
• 第四个是self-description,也就是说传递的消息是一个自描述的消息,从一个请求中我们就知道这段消息到底是一段视频、一张图片还是一段音频，而不需要依赖于其他的请求；
• 第五个是 hypertext information,意思是这是一个超文本系统，所传输的不只有文档，还有图片、音频视频等大力度的内容

• 我们首先来看一下 HTTP 协议到底长成什么样子
• 如下图，首先我们来看用户界面，也就是我们能看到的浏览器的界面，在这个用户界面的 url 地址栏中输入 url 地址，但是当我们 url 地址还没有输入完成时呢，浏览器引擎就已经把我们的 url联想出来完整的 url 地址了。
• 那么浏览器引擎为什么能够猜测出来完整的 url 地址？这是因为我们历史中录入过的 url可能已经进入到了右边的数据存储中，而根据历史记录浏览器已经可以猜测出我们想要输入的地址。
• 等到我们的地址输入完成，我们敲下回射键以后，浏览器已经就调用了渲染引擎,也就是我们经常提到的 chrom 中所使用的webkit引擎。
• 那么渲染引擎就会首先通过网络模块发出第一个请求，等到这个 html 响应回来以后，渲染引擎可能中间发现了一些超链接例如一个javascript请求,则又会发起javascript的网络存储，等到这个javascript文件回来以后再调用JS解释器来解析这个JS文件
• 当渲染引擎拿到了 html css javascript以及所需要的图片或者其他媒体文件以后,就会通过UI后端这里把完整的界面绘制到用户界面中

• 下图中，我们可以看到左边虽然是一个app的模样，相当于app中的web view,但是和浏览器也是一致的。
• 首先我们对整个页面发起第一个请求,比如GET page.html,通过Internet到达了WebServer服务器,WebServer服务器将这个页面返回给渲染引擎。
• 然后渲染引擎根据中间所需要的元素，比如图片或者 css 或者是视频等，再次发起新的请求，这些请求通过这个网络中的相应的代理服务器就到了相应的Server，最后拿到了所有的响应以后，就渲染出用户可以看到的界面

二、浏览器发起HTTP请求的流程

• 看下面图片，首先我们有一个服务器，它监听打开了80或者43这样的web端口
• 浏览器首先从URL中解析出域名，然后根据域名去查询DNS，获取到域名对应的IP地址
• 接着浏览器用这个IP地址与服务器建立起了TCP连接,如果使用的是https,那么还要完成TLS和SSL的握手
• 在建立好连接以后，需要构造HTTP请求,在构造请求过程中,需要填充相应的HTTP头部，包括上下文所需要的信息至头部中，最后我们通过这个连接发起HTTP请求
• 当服务器收到这个IP请求以后，完成资源的表述，HTML页面或者javascript页面等作为包体返回给浏览器
• 浏览器在渲染引擎中就会解析这个响应，根据这个响应中具备的其他超链接图片等资源，再次发起新的HTTP请求
• 以上就是最基本的浏览器发起HTTP请求的流程