前端重点知识总结—HTTP

前端 2,676° Views

1.http和https的基本概念

http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。https协议的主要作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。（简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。）https的SSL加密是在传输层实现的。

2.http和https的区别？

  1. Https协议需要ca证书，费用较高。
  2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
  3. 使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
  4. http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

3.https协议的工作原理

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤：

  1. 客户使用https url访问服务器，则要求web 服务器建立ssl链接。
  2. web服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。
  3. 客户端和web服务器端开始协商SSL链接的安全等级，也就是加密等级。
  4. 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给服务端。
  5. web服务器通过自己的私钥解密出会话密钥。
  6. web服务器通过会话密钥加密与客户端之间的通信。

4.https协议的优点

  1. 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
  2. HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
  3. HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
  4. 谷歌搜索算法，采用HTTPS加密的网站在搜索结果中的排名将会更高。

5.https协议的缺点

  1. https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。
  2. https缓存不如http高效，会增加数据开销。
  3. SSL证书也需要购买，功能越强大的证书费用越高。比如使用泛域名SSL证书。
  4. SSL证书需要绑定IP，不能再同一个ip上绑定多个域名，ipv4资源支持不了这种消耗。

6.tcp三次握手，一句话概括

客户端和服务端都需要知道各自是否可以进行收发，因此需要三次握手。相当于敲门，用于确认是否可以开始发送。

三次握手可以简化为：C发起请求连接，S确认，S也发起连接，C确认。我们再看看每次握手的作用：第一次握手：S只可以确认自己可以接受C发送的报文段；第二次握手：C可以确认S收到了自己发送的报文段；并且可以确认自己可以接受S发送的报文段；第三次握手：S可以确认C收到了自己发送的报文段。

7.说一下http2.0

简要概括：http2.0是基于1999年发布的http1.0之后的首次更新。

提升访问速度：请求资源所需时间更少，访问速度更快，相比http1.0。

多路复用：多路复用允许同时通过一个TCP连接发送多个请求。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

头部压缩：相同请求不需要再次发送请求头等信息，通信期间几乎不会改变的请求头的通用的键值，如user-Agent和content-Type只发送一次，相当于做了一层缓存。

二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码。

8.400和401、403状态码

(1)400状态码：请求无效

产生原因：

前端提交数据的字段名称和字段类型与后台的实体没有保持一致

前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。

解决方法：

对照字段的名称，保持一致性

将obj对象通过JSON.stringify实现序列化

(2)401状态码：当前请求需要用户验证

(3)403状态码：服务器已经得到请求，但是拒绝执行

9.HTTP支持哪些请求方式

get、post、head、options、put、delete、trace、connect

10.HTTP请求的options，head方式

head：类似于get请求，只不过返回的响应中没有具体的内容，用户获取报头

options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

11.GET和POST的区别

  1. 副作用指对服务器上的资源做改变，比如搜索是无副作用的，注册是副作用的。Get 多用于无副作用场景，Post 多用于副作用场景。
  2. get参数通过url传递，post放在request body（请求体）中。
  3. get请求连接长度是有限制的（浏览器或服务器限制，HTTP不限制），post没有。
  4. post比get更加安全。因为get参数直接暴露在url中，不能用来传递敏感信息。
  5. get只能进行url编码。而post可以通过 request body来传输比 Get 更多的数据，支持多种编码方式且不对数据类型限制，如application/x-www-form-urlencoded、multipart/form-data、application/json、text/xml
  6. get参数会被浏览器主动缓存，保留在浏览器历史记录中，而post参数不会
  7. get和post本质都是tcp连接，但由于浏览器和服务器的限制导致传输有一些差异。
  8. get产生一个tcp数据包，post产生两个tcp数据包。get方式会把请求头和data数据一并发出，服务器响应200；post请求先发请求头，服务器响应100，再发请求体数据，服务器响应200。

12.浏览器缓存机制

详见：浏览器的缓存机制详解

13.前端http优化

  1. 减少http请求数（http/1）：合并css，合并JS，合并图片。但这种优化方式在http2.0中无效。
  2. 减少DNS查询时间
  3. 使用CDN
  4. 利用浏览器缓存：传输轻量、细粒度的资源，以便独立缓存和并行传输。因为HTTP/2的多路复用和头部压缩特性。
  5. 最小化HTTP请求大小
  6. 最小化HTTP响应大小
  7. 减少不必要的重定向
  8. 服务端渲染：允许服务端主动发送额外的资源。类似于ssr首屏的处理。

http2.x多路复用

多路复用使得不同的请求共用一个TCP连接，允许多个资源并行下载，避免建立多个连接带来不必要的额外开销。它消除了HTTP/1.1中的线头阻塞问题。头部压缩进一步减少了多个HTTP请求的开销，因为每个请求开销都小于未压缩的等价HTTP/1.1请求。

PS：文件合并依然可以提高压缩率，但它带来了代价高昂的缓存失效。即使有一行CSS改变了，浏览器也会强制重新加载你 所有的 CSS声明。另外，不是所有页面都使用了合并后的CSS或JavaScript文件中的全部声明或函数。

14.列举HTTP状态码，及如何获取

在原生xhr请求完成可通过XMLHttpRequest的实例中的status属性来获取。

var xhr = new XMLHttpRequest()
// open方法的第三个参数是是否异步
xhr.open('GET', 'http://xxxx.com/api?a=1&b=2' ,true)
xhr.send(null)
xhr.onreadystatechange = () =>{
	if(xhr.readyState==4){
		console.log(xhr.status, xhr.responseText)
	}
}
  • 100，接受的请求正在处理，信息类状态码
  • 2xx(成功)表示成功处理了请求的状态码
  • 200(成功)服务器已成功处理了请求
  • 206，服务器成功处理了部分请求，比如做分段下载（head方法获取文件大小，请求头字段用Range）
  • 3xx(重定向)表示要完成请求，需要进一步操作。通常这些状态代码用来重定向。
  • 301，永久性重定向，表示资源已被分配了新的 URL
  • 302，临时性重定向，表示资源临时被分配了新的 URL
  • 303，表示资源存在另一个URL，用GET方法获取资源
  • 304，(未修改)，http请求的缓存问题引起，服务端不会返回新内容
  • 307，临时重定向
  • 4xx，(请求错误)这些状态码表示请求可能出错，妨碍了服务器的处理
  • 400，(错误请求)服务器不理解请求的语法
  • 401，当前请求需要用户验证
  • 403，(禁止)服务器拒绝请求（服务器已经得到请求，但是拒绝执行）
  • 404，(未找到)服务器找不到请求网页
  • 5xx，(服务器错误)这些状态码表示服务器在尝试处理请求时发生内部错误。
  • 500，(服务器内部错误)服务器遇到错误，无法完成请求
  • 502，服务端负载比较高，导致连接超时
  • 503，表示服务器宕机，无法处理请求

15.TCP和UDP的区别（了解）

UDP：

  • 面向无连接，不需要三次握手建立连接的，想发数据就可以开始发送了。并且也只是数据报文的搬运工，不会对数据报文进行任何拆分和拼接操作。
  • 支持一对多，多对多，多对一的方式，也就是说 UDP 提供了单播，多播，广播的功能。
  • 面向报文
  • 不可靠性：通信都不需要建立连接，想发就发，也不会关心对方是否已经正确接收到数据了，这样的情况肯定不可靠。
  • 恒定速率：UDP 因为没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 UDP 而不是 TCP。
  • 头部开销小，传输数据报文时是很高效的。
  • 没有缓存，不会备份数据。

TCP：

  • 面向连接的、可靠的、基于字节流的传输层通信协议。流就是指不间断的数据结构。
  • 三次握手：相当于敲门，告知和确认可以开始收发。防止出现失效的连接请求，从而产生错误。这样能建立可靠的连接。建立连接，是为数据的可靠传输打下了基础。
  • 只能进行点对点的数据传输，不支持多播和广播传输方式。
  • 每个包一个序号，同时序号也保证了传送到接收端实体的包的按序接收
  • 拥塞控制：当网络出现拥塞的时候，TCP能够减小向网络注入数据的速率和数量，缓解拥塞
  • 全双工通信：TCP允许通信双方的应用程序在任何时候都能发送数据，因为TCP连接的两端都有缓存，用来临时存放双向通信的数据。当然，TCP可以立即发送一个数据段，也可以缓存一段时间以便一次发送更多的数据段
  • TCP 针对数据包丢失的情况，可以采用重传机制解决

16.Chrome浏览器HTTP最大请求并发数限制

同一域名下，同一GET请求的并发数是1，也就是说上一个请求结束，才会执行下一个请求，否则置入队列等待发送；

同一域名下，不同GET/POST请求的并发数量是6。当发送的请求数量达到6个，并且都没有得到响应时，后面的请求会置入队列等待发送。

本文固定连接：https://code.zuifengyun.com/2018/05/1723.html，转载须征得作者授权。

加载中...
加载中...