12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题

前言

大家好啊，我是吒儿👦，每天努力一点点💪，就能升职加薪💰当上总经理出任CEO迎娶白富美走上人生巅峰🗻，想想还有点小激动呢😎。

这是我的第12期文章内容✍，希望能够把每一处知识点，说明白，（当然，如果哪一处不了解，可以在评论区进行探讨哦！）⏰，计时开始！

如果您发现本文有帮助，请您点赞，收藏，评论，留下您学习的脚印👣，我很乐意谈论😃

学习阅读这篇文章内容还是需要一点前端网络基础的，至少你用过接口，了解过后端啥的。（也了解过一点网络知识，但不怎么会懂的学习者）

学习Http协议太重要了，了解Http协议，可以了解Web应用程序前后端的交互等

HTTP

什么是网络中的HTTP，HTTPS，HTTP2，DNS，TCP，CDN等等，您是不是听得一头雾水呢？小朋友您是不是有很多问号？😧

Web建立在HTTP协议上通信的

那我们先从HTTP协议开始，HTTP协议：

特点：1.简单快速，2.灵活，3.无连接，4.无状态（HTTP是一种不保存状态，无状态协议-从HTTP/1.1 虽然是无状态协议，但为了实现保持状态功能，引入了 Cookie 技术，有了它就可以管理状态了）。（记住咯）

HTTP报文：请求报文，响应报文

请求报文：

  1. 请求行：请求方法，请求URL，HTTP协议以及版本；
  2. 请求头，通知服务器有关于客户端请求的信息
  3. 空行，发送回车符和换行符

响应报文：

  1. 状态行
  2. 响应头
  3. 空行
  4. 响应体

HTTP方法：

主要GET方法获取数据，POST方法传输资源

PUT方法更新资源，DELETE方法删除资源，HEAD方法获得报文首部

当然作为程序员常用到的HTTP状态码：

描述到这里应该大部分人也是了解这部分比较的是吧？那么接下来我来添加一些内容。

让我们了解web网络基础，我们知道我们是使用HTTP协议访问web的，那么你知道我们在网页浏览器中的地址栏中输入URL时，web页面是如果呈现的吗？

第一步👣，浏览器根据请求的url交给dns域名解析，找到真实的Ip，向服务器发起请求。

第二步👣，服务器交给后台处理后，返回响应的数据，浏览器接收文件。

第三步👣，浏览器对加载到的资源（根据web浏览器地址栏中指定的url，web浏览器从web服务器获取文件资源等信息）进行解析，建立相应的内部数据结构。

第四步👣，浏览器载入解析到的资源文件，进行页面渲染，呈现出web页面。

so，就算你不了解其运作原理，也是能够看到web页面的。

客户端通过指定的访问地址获取服务器资源，服务器使用HTTP协议进行通信，将资源传递给客户端。

在浏览器地址栏内输入URL之后，信息会被送往某处，然后从某处获得的回复，内容就会显示在web页面上。

so，HTTP协议是超文本传输协议，是用于从万维网服务器传输超文本到本地浏览器的传输协议。

HTTP是基于TCP/IP协议通信协议来传递数据的，主要是客户端和服务器端之间的通信格式，不涉及数据包传输。

那么什么是网络基础TCP/IP

网络基础TCP/IP

当然说到网络基础TCP/IP，就要了解一下TCP/IP协议族啦！

通常使用的网络是在网络基础TCP/IP协议族的基础上运作的，so，加上刚刚所说的，HTTP就是它内部的一个子集（子集？数学概念）

协议就是定义规则，双方要定义好规则，事先确定，才能相互通信，网络基础TCP/IP是互联网相关的各类协议族的总称。

在图解HTTP中，TCP/IP协议族是分4层：应用层，传输层，网络层和数据链路层（分层的）。

利用TCP/IP协议族进行网络通信：

通过分层顺序与对方进行通信，发送端（客户端）从应用层往下走，接收端（服务器端）从链路层往应用层上走。

即：客户端，应用层（HTTP客户端）➡，传输层（TCP）➡，网络层（IP）➡，链路层（网络）➡；服务器端，应用层（HTTP服务器端），⬅传输层（TCP），⬅网络层（IP），⬅链路层（网络）。

从发送端到接收端，发送HTTP请求流程：

发送端，每通过一层增加首部，接收端，每通过一层删除首部。发送端发起HTTP请求，从发送端：应用层，HTTP数据（HTTP报文）➡，接收TCP首部到传输层，即TCP首部包含HTTP数据➡，接收IP数据包到网络层，即IP首部里包含TCP首部，TCP首部包含HTTP数据➡，接收网络架构到链路层，即以太网首部包含IP首部，IP首部里包含TCP首部，TCP首部包含HTTP数据。在发送端是这样的传输。

接着发送端的链路层传送到接收端的链路层，就是通过每一层会删除首部，so，传输过来的HTTP数据，（以太网首部👉IP首部👉TCP首部👉HTTP数据），从发送端到接收端，接收端往上走每一层删除首部（即链路层到应用层），so，接收端的链路层到网络层删除首部后（P首部👉TCP首部👉HTTP数据），一次类推，到接收端的应用层就剩下HTTP数据。

那么有人说，在计算机网络的七层协议呢？是的有七层，不过都不会影响的，说一说七层协议，顺带讲讲。

在主机上：应用层，表示层，会话层，传输层；在网络上：网络层，链路层，物理层。

以上可以一部分一部分进行学习掌握的知识点。

HTTP 中 GET 与 POST 的区别

在网上冲浪时，看到《99%的人都理解错了HTTP中GET与POST的区别》这篇文章。

说GET和POST有一个重大区别，GET产生一个TCP数据包；POST产生两个TCP数据包。

在GET请求，浏览器会把http header和data一并发送出去，服务器响应200，而对于POST，浏览器发送header，服务器响应100 continue，浏览器再发送data，服务器响应200。

然后看到这篇文章《听说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』？？》结论是，关于『GET 发一个包，POST 发两个包』的知识 99% 大概是从这篇文章中得来的《XMLHttpRequest (XHR) Uses Multiple Packets for HTTP POST?》可以自己查看哦！（多多提出自己思考，不断问为什么，去扩展自己知识点的边缘）

一个TCP连接能发多少个HTTP请求

so，一个tcp连接里到底能发几个http呢？😉，应该是tcp连接不断开，就可以一直发送请求，不断开就可以随便发，HTTP2的话可以一个连接里并行，HTTP/1.1不行的。（开了Pipelining就可以了吧，http1.1的，但是 Pipelining 默认在浏览器是不开的）

（感觉应该和网络状况相关，不会存在一定一种比另一种快）

一个 TCP 连接后是否会在一个 HTTP 请求完成后断开？

在 HTTP/1.0 中，一个服务器在发送完一个HTTP响应后，会断开TCP链接。但这样请求会重新建立和端口TCP连接，代价过大。

如果某服务器对Connection: keep-alive 的 Header 进行了支持。表示完成这个HTTP请求后，不用断开HTTP请求使用TCP的TCP连接，可以被重复使用，之后发送HTTP请求就不用重新建立TCP连接了。

维持连接好处多多，那么在HTTP/1.1 就把 Connection 头写进标准，除非关闭，否则会维持一段时间的TCP连接，默认情况下连接TCP不会断开，只有在请求报头中声明Connection: close 才会在请求完成后关闭连接。

如果维持连接，一个 TCP 连接是可以发送多个 HTTP 请求的。

一个 TCP 连接中 HTTP 请求发送可以一起发送么?

在PiPelining来解决这个问题：（Pipelining 是什么）

如图：

这一问题解决后，下面了解一下IP,TCP,和DNS(先简单说明一下，还可能再加深)

IP,TCP,和DNS

说到IP，TCP，DNS这三个协议，当然在网络通信中，层次有涉及到所以要说一下否则就忘记了。

TCP/IP 是一类协议系统，它是用于网络通信的一套协议集合

tcp的首部格式

首部格式

负责传输的IP协议，IP协议（位于网络层），几乎所有使用网络的系统都用到了IP协议，IP协议的作用就是把各种数据包传送给对方，需要确保两个重要的条件，IP地址（说明节点被分配到的地址，IP可换）和MAC地址（指网卡所属的固定地址，MAC地址基本上不会换）。

通过MAC地址使用ARP协议进行通信，（而ARP是一种用于解析地址的协议，通过通信方的IP地址就可以反查对应的MAC地址）。ARP协议用于在通信双方需要通过多台计算机和网络设备中转才能到达对方，这个过程中需要采用ARP协议进行中转时，利用下一站中转设备的MAC地址来搜索下一个中转地址。（如果快递公司，您作为寄快递的人，只知道自己的快递件送到了快递公司，这快递过程中，您无法了解掌握快递的过程细节）

就是说发送端向往某个IP地址发送数据包（快递包）就会通过ARP协议进行中转把数据包发往MAC地址（路由器）某个中转站，然后接着到达下一个中转地址（由上一个中转地址搜索（送往）下一个中转地址），最后到达接收端。

数据包：

我知道了MAC地址进行通信过程中是使用ARP协议的了，但是这是用在通信双方很少在同一局域网内的情况。

TCP协议用于保证可靠性，位于传输层，提供字节流服务

字节流服务是将大块数据分割成以报文段位单位的数据包进行管理（主要是为了方便传输）。

而这里确保数据可靠性送达，这里就是我们常说的TCP协议采用了三次握手，用于保证数据准确无误的送到目的地。（TCP建立连接—三次握手，TCP释放连接—四次挥手(待会说)）

三次握手,四次挥手

握手过程中使用了TCP标志，SYN（synchronize）同步信号和ACK（acknowledgement）确认信号。

描述过程是：（三次握手）

第一次握手：发送端，把标有SYN的数据包发给到 接收端，等待对方接收。

第二次握手：接收端接收后，发送标有 SYN/ACK 的数据包给以示传达确认信息。

第三次握手：发送端收到后，在传回带ACK标识的数据包给 接收端，握手接收。

发送端，把标有SYN的数据包发给到 接收端，接收端收到后，发送标有 SYN/ACK 的数据包给 发送端，发送端收到后，发送标有 ACK的数据包给 接收端。

如图：（SYN、ACK 是 TCP 封包中的 控制位元 ）

描述过程是：四次挥手

通常我们习惯记忆域名，但是机器间互相指认ip地址，域名与ip地址之间是一一对应的，它们之间的转换工作称为域名解析，域名解析是需要由专门的域名解析服务器来完成。

so，这就需要DNS服务来负责域名解析。

DNS服务来负责域名解析

负责域名解析的 DNS 服务,就是通过域名查询到具体的 IP。

当客户机提出查询请求时，会在本地计算机中的缓存中查找，如果在本地无法获取查询信息，就将查询请求发给DNS服务器。

开始，客户机将域名查询请求发送到本地DNS服务器，在该服务器管理的区域的记录中查找，如果找到该记录，就利用此记录进行解析，如果没有区域信息可以满足查询要求，不能在本地找到客户机查询的信息，将请求发送到根域名DNS服务器，用于负责解析客户机请求的根域部分，将包含下一级域名信息的DNS服务器地址返回给客户机的DNS服务器地址，最后在目标域名的DNS服务器上找到相应的IP地址信息。

DNS服务是位于应用层的协议，提供域名到IP地址之间的解析服务。（DNS服务可以加上对域名购买，解析服务的了解，更加容易理解一些，这就是一部不通过IP地址访问，而是使用主机名或域名来访问对方的计算机），它提供通过域名查找IP地址，也可以逆向从IP地址查找域名。

流程详解，就是发送端向DNS发送把某域名下的IP地址告知我的请求，DNS接收到后，把对应的IP地址返回到发送端，发送端通过Ip地址可以向web服务器发送访问请求。

so，根据上述总结，我可以描述HTTP协议的通信过程：

HTTP协议的通信过程

客户端（浏览器）在地址栏访问某域名网页，向DNS要求发送给对应的IP地址，浏览器通过域名在网页请求某域名下的页面资源，HTTP协议会生成对目标web服务器的HTTP的请求报文。TCP协议就是将HTTP请求报文分割成报文段，可靠地传给对方。通过（数据包中转站）IP协议负责的地方，搜索对方某MAC地址路由器，一边中转一边传送。到达对方服务器（某Ip地址），TCP协议负责从对方接收接收过来的报文段，重组到达按序号以原来的顺序，HTTP协议就对web服务器请求的内容进行处理。

这个过程就是从应用层，传输层，网络层，链路层之间的传递。

在这里讲到客户端发送HTTP请求给服务器端的请求报文是什么？

因为上面说到就讲一下请求报文，那么请求报文是如下图整体：

这是客户端的请求报文，那么服务器端也有，是接收后结果以响应报文形式返回：

用表格，描述GET用于获取资源：

说明描述
请求GET /index.html HTTP/1.1
响应返回index.html的页面资源

so，HTTP报文用于HTTP协议交互的信息，报文是由多行数据构成的字符串文本。大致分报文首部和报文主体两块。

报文的结构

请求报文和响应报文的结构（找了如下图片进行解释）

当然如果还不够清晰，再次找了几张图片：

请求头

请求体

状态行

响应头部

响应体

到了这里，上面有一些知识点就是在地址栏中输入的url，URL应该比较常说，它是同一资源定位符，用英文是（Uniform Resource Locator）。url就是输入地址栏的网页地址。

URI

说到url，我们要了解一下URI,它是同一资源标识符。了解一下绝对URI的格式。

URI一般都是定位互联网上的资源，保证在互联网上任意位置的资源进行访问（HTTP协议使用URI让客户端定位到资源）。如下图：

快速看到这里的朋友应该对HTTP了解还很不错呢。

GET和POST的区别？

来道常考面试题：GET和POST的区别？

  1. GET在浏览器回退不会再次请求，POST会再次提交请求
  2. GET请求会被浏览器主动缓存，POST不会，要手动设置
  3. GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会
  4. GET请求在URL中传送的参数是有长度限制的，而POST没有限制
  5. GET参数通过URL传递，POST放在Request body中

HTTP四个版本

分别是HTTP1.0、HTTP1.1、HTTP/2，HTTP/3

HTTP1.0默认是短连接，每次与服务器交互，都需要新开一个连接。

HTTP1.1版本,默认持久连接，只要没有明确提出端口就一直保持，可以发送多次HTTP请求，还有重点在于断点续传，利用HTTP消息头使用分块传输编码，将实体主体分块传输。

https协议现在部分网站都用这个。

在网络上，客户端和服务端交互，就有可能被挟持，需要用CA（公信机构）来帮客户端认定服务端是真实的。

这个时候就要去申请一份数字证书，数字证书里有证书持有者、证书有效期、服务器公钥等信息。

客户端用CA的公钥对证书解密（证书被CA机构的私钥解密，然后客户端用CA证书的公钥解密。）

流程如下图所示：

管线化和持久连接

仅在HTTP/1.1才支持管线化，在持久连接前提下，请求一次性打包传输过去，响应一次性打包传递回来。

管线化技术的出现，不用等待响应亦可直接发送下一个请求。

在HTTP1.1中所有链接默认都是持久连接，使用同一个TCP连接来发送和接收多个HTTP请求或响应。

持久连接（HTTP Persistent Connections，也称为 HTTP keep-alive 或 HTTP connection reuse）

好处：

  1. 减少了 TCP 连接的重复建立和断开所造成的额 外开销
  2. 减轻了服务器端的负载
  3. Web 页面的显示速度提高了

Cookie了解一下

Cookie 技术通过在请求和响应报文中写入 Cookie 信 息来控制客户端的状态

跨域

什么是同源策略

同源策略是一种约定，它是浏览器最核心的安全功能，所谓同源是指"协议+域名+端口"三者相同。

跨域是请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

解决跨域：

有 jsonp、iframe、cors、img、HTML5 postMessage等等。其中用到 html 标签进行跨域的原理就是 html 不受同源策略影响。但只是接受 Get 的请求方式，这个得清楚。

JSONP原理，利用js请求返回不需要域名，没有跨域问题，即利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据,不安全可能会遭受XSS攻击。

JSONP 使用简单且兼容性不错，但是只限于 get 请求。

<script src="http:=jsonp"></script>
<script>
    function jsonp(data) {
    	console.log(data)
	}
</script>

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

从输入 URL 到页面展示完整流程示意图

输入url并回车，浏览器进程检查url，组装协议，构成完整的url，通过进程间通信（IPC）把url请求发送给网络进程，接收到url请求后检查本地缓存是否缓存该请求资源，如果有,则将该资源返回给浏览器进程，如果没有，网络进程向web服务器发起http请求。

向web服务器发起http请求

  1. 进行DNS解析，获取服务器ip地址，端口
  2. 利用ip地址和服务器建立tcp连接
  3. 构建请求头信息
  4. 发送请求头信息
  5. 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容
  6. 网络进程解析响应流程
  7. 准备渲染进程
  8. 传输数据、更新状态

Web服务器

  1. 用单台虚拟主机实现多个域名
  2. HTTP/1.1 规范允许一台 HTTP 服务器搭建多个 Web 站点

代理、网关、隧 道


来源于《图解HTTP》

代理：


来源于《图解HTTP》

网关：


来源于《图解HTTP》

隧道：


来源于《图解HTTP》

缓存：


来源于《图解HTTP》

有效期限：


来源于《图解HTTP》

web安全

  1. 通信使用明文可能会被窃听，存在通信内容被窃听的风险
  2. TCP/IP 可能被窃听的网络
  3. 加密处理防止被窃听
  4. 无法证明报文完整性，可能已遭篡改
  5. 使用 HTTPS 通信
  6. HTTP+ 加密 + 认证 + 完整性保护 =HTTPS

参考文献

你猜一个 TCP 连接上面能发多少个 HTTP 请求

前端总结–网络

熬夜写了一篇HTTP总结

《图解HTTP》

posted @ 2020-05-20 09:34  达达前端  阅读(89)  评论(0)  编辑  收藏  举报