Menu

前端重点知识总结—HTTP

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-urlencodedmultipart/form-dataapplication/jsontext/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,转载须征得作者授权。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持