yuanyuanbyte / Blog

圆圆的博客,预计写七个系列:JavaScript深入系列、JavaScript专题系列、网络系列、Webpack系列、Vue系列、JavaScript基础系列、HTML&CSS应知应会系列。
306 stars 125 forks source link

网络系列之 HTTP 协议 #118

Open yuanyuanbyte opened 2 years ago

yuanyuanbyte commented 2 years ago

本系列的主题是网络,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末

如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。

前言

掌握网络协议可以让我们在日常项目开发过程中,定位那些在发起网络请求遇到的奇怪问题。

而且在一些比较成熟的团队面试过程中也经常会问到网络协议这方面的知识。

因此作为一名前端,我们需要掌握网络协议这方面的相关知识。

HTTP 协议

1. HTTP 的特点和缺点

特点无连接无状态灵活简单快速

缺点无状态不安全明文传输队头阻塞

2. HTTP 报文结构是怎样的

http报文:由请求报文响应报文组成

请求报文:由请求行请求头空行请求体四部分组成

响应报文:由状态行响应头空行响应体四部分组成

请求行:

在这里插入图片描述

状态行:

在这里插入图片描述

3. 常见的HTTP请求头和响应头

HTTP Request Header 常见的请求头

在这里插入图片描述

HTTP Responses Header 常见的响应头

在这里插入图片描述

4. HTTP 有哪些请求方法

http/1.1规定了以下请求方法(注意,都是大写):

5. GET和POST请求的区别

6. PUT和POST请求的区别

PUTPOST 都有更改指定URI的语义,但PUT被定义为幂等的方法,而POST则不是,多次调用会产生不同的结果。也就是说:

PUT请求:如果两个请求相同,后一个请求会把第一个请求覆盖掉。(所以PUT用来改资源

POST请求:后一个请求不会把第一个请求覆盖掉。(所以Post用来增资源

7. OPTIONS请求方法的使用场景

OPTIONS请求方法的主要用途有两个:

8. 常见 HTTP 状态码

1xx: 指示信息——表示请求已接收,继续处理

2xx: 成功——表示请求成功处理完毕

3xx: 重定向——表示要完成请求必须进行进一步操作

4xx: 客户端错误——表示请求有语法错误或请求无法实现

5xx: 服务端错误——表示服务器未能实现合法的请求

常见状态码:

状态码 描述
100 Continue 继续。客户端应继续其请求
101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议。如果服务器同意变更,就会发送状态码 101。
200 OK 请求成功。通常在响应体中放有数据。
204 No Content 含义与 200 相同,但响应头后没有 body 数据。
206 Partial Content 已完成指定范围的请求(带Range头的GET请求),场景如video,audio播放文件较大,文件分片和断点续传时
301 Moved Permanently 永久重定向
302 Found 临时重定向
304 Not Modified 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。可以使用缓存的资源,不用在服务器获取。当协商缓存命中时会返回这个状态码。
400 Bad Request 请求有语法错误
401 Unauthorized 没有权限访问
403 Forbidden 服务器理解请求客户端的请求,但是拒绝执行此请求。这实际上并不是请求报文出错,而是服务器禁止访问,原因有很多,比如法律禁止、信息敏感。
404 Not Found 请求资源不存在
408 Request Time-out 服务器等待客户端发送的请求时间过长,超时
500 Internal Server Error 服务器内部错误,无法完成请求
501 Not Implemented 表示客户端请求的功能还不支持,无法完成请求
503 Service Unavailable 请求未完成,因服务器过载、宕机或维护等

9. 详细描述一下 301 和 302 状态码

301 Moved Permanently 永久重定向:

301重定向是网页更改地址后对搜索引擎友好的最好方法,只要不是暂时搬移的情况,都建议使用301来做转址。

302 Found 临时重定向:

302状态码应用的典型场景是服务器页面路径的重新规划。

常见场景有百度,知乎、简书等等。比如说我们要在百度进入菜鸟教程,搜索出来后有一系列的列表,我们可以选择一个去进行一个点击。点击的那个不会直接进入菜鸟教程,而是先跳转到百度设置的一个临时地址,之后再跳转到菜鸟教程真实的地址。

10. 为什么需要 持久连接

HTTP协议的初始版本中,每进行一次HTTP通信就要断开一次TCP连接。以当年的通信情况来说,因为都是些容量很小的文本传输,所以即使这样也没有多大问题。可随着 HTTP 的 普及,文档中包含大量图片的情况多了起来。比如,使用浏览器浏览一个包含多张图片的 HTML 页面时,在发送请求访问 HTML 页面资源的同时,也会请 求该 HTML 页面里包含的其他资源。因此,每次的请求都会造成无谓的 TCP 连接建立和断开,增加通信量的 开销。

在这里插入图片描述

11. 持久连接 的特点

为解决上述 TCP 连接的问题,HTTP/1.1 和一部分的 HTTP/1.0 想出了持久连接(HTTP Persistent Connections,也称为 HTTP keep-alive 或 HTTP connection reuse)的方法。持久连接的特点是,只要任意一端没有明确提出断开连接,则保持TCP连接状态。

在这里插入图片描述

持久连接的好处在于减少了 TCP 连接的重复建立和断开所造成的额外开销,减轻了服务器端的负载。另外, 减少开销的那部分时间,使 HTTP 请求和响应能够更早地结束,这样 Web 页面的显示速度也就相应提高了。 在 HTTP/1.1 中,所有的连接默认都是持久连接,但在 HTTP/1.0 内并未标准化。虽然有一部分服务器通过非 标准的手段实现了持久连接,但服务器端不一定能够支持持久连接。毫无疑问,除了服务器端,客户端也需 要支持持久连接。

12. HTTP管线化

持久连接使得多数请求以管线化(pipelining)方式发送成为可能。

HTTP管线化是将多个HTTP要求(request)整批提交的技术,而在传送过程中不需先等待服务端的回应。管线化机制须通过永久连接(persistent connection)完成,仅HTTP/1.1支持此技术(HTTP/1.0不支持),并且只有GET和HEAD要求可以进行管线化,而POST则有所限制。此外,初次创建连接时也不应启动管线机制,因为对方(服务器)不一定支持HTTP/1.1版本的协议。

在这里插入图片描述

13. 对keep-alive的理解

HTTP1.0 中默认是在每次请求/应答,客户端和服务器都要新建一个连接,完成之后立即断开连接,这就是短连接。当使用Keep-Alive模式时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接,这就是长连接。其使用方法如下:

开启Keep-Alive的优点:

开启Keep-Alive的缺点:

14. HTTP 1.0 和 HTTP 1.1 之间有哪些区别?

15. 页面有多张图片,HTTP是怎样的加载表现?

16. HTTP协议的性能

HTTP 协议是基于 TCP/IP,并且使用了 请求-应答 的通信模式,所以性能的关键就在这两点里。

长连接

HTTP协议有两种连接模式,一种是持续连接,一种非持续连接。

(1)非持续连接指的是服务器必须为每一个请求的对象建立和维护一个全新的连接。

(2)持续连接下,TCP 连接默认不关闭,可以被多个请求复用。采用持续连接的好处是可以避免每次建立 TCP 连接三次握手时所花费的时间。

对于不同版本的采用不同的连接方式:

在这里插入图片描述

管道网络传输

HTTP/1.1 采用了长连接的方式,这使得管道(pipeline)网络传输成为了可能。

管道(pipeline)网络传输是指:可以在同一个 TCP 连接里面,客户端可以发起多个请求,只要第一个请求发出去了,不必等其回来,就可以发第二个请求出去,可以减少整体的响应时间。但是服务器还是按照顺序回应请求。如果前面的回应特别慢,后面就会有许多请求排队等着。这称为队头堵塞。

队头堵塞

HTTP 传输的报文必须是一发一收,但是,里面的任务被放在一个任务队列中串行执行,一旦队首的请求处理太慢,就会阻塞后面请求的处理。这就是HTTP队头阻塞问题。

队头阻塞的解决方案

(1)并发连接:对于一个域名允许分配多个长连接,那么相当于增加了任务队列,不至于一个队伍的任务阻塞其它所有任务。

(2)域名分片:将域名分出很多二级域名,它们都指向同样的一台服务器,能够并发的长连接数变多,解决了队头阻塞的问题。

参考

查看原文

查看全部文章

博文系列目录

交流

各系列文章汇总:https://github.com/yuanyuanbyte/Blog

我是圆圆,一名深耕于前端开发的攻城狮。

weixin