发布于 2024 年 2 月 26 日，星期一
前端面试中对HTTP协议的深入考察，强调了面试者在实际面试过程中对HTTP知识的掌握和应用能力。HTTP作为前端开发的基础，涉及请求、响应、状态码、缓存机制等核心概念，面试官通过具体案例和问题，评估面试者对HTTP协议的理解深度和实际操作经验。这不仅要求面试者熟悉HTTP的基本原理，还需具备解决实际问题的能力，如处理跨域、优化性能、确保安全性等。因此，前端面试中对基础知识的重视，以及对实际应用能力的考察。
系列首发于公众号『非同质前端札记』https://mp.weixin.qq.com/s?__biz=MzkyOTI2MzE0MQ==&mid=2247485576&idx=1&sn=5ddfe93f427f05f5d126dead859d0dc8&chksm=c20d73c2f57afad4bbea380dfa1bcc15367a4cc06bf5dd0603100e8bd7bb317009fa65442cdb&token=1071012447&lang=zh_CN#rd ，若不想错过更多精彩内容，请“星标”一下，敬请关注公众号最新消息。
http
带宽延迟浏览器阻塞(HOL blocking)DNS 查询(DNS lookup)建立连接(initial connection)http1.0
无法复用：每次请求都会与服务器建立一次连接，消耗传输很大，队头阻塞：如果有多个请求，前一个请求的响应结果后才能发送下一个请求。所以所有的请求都会在先进先出的队列中，如果队头意外阻塞，就会造成队头阻塞问题。http1.1
缓存控制：新增了 ETag, Last-Modified, Expires，Cache-Control 来控制缓存长连接：通过设置 Connection: keep-alive 属性来保持 http 连接可以在一个 TCP 连接上发送多个请求分块传输管线化：将多个请求整批提交，在发送请求过程中也不需要等待服务器的响应http2.0
二进制分帧 Binary Format：http2.0 的基本单位是二进制，之前采用的文本的方式传输，健壮性不是很好，后续改用了二进制的格式，更方便更健壮。多路复用 MultiPlexing: http2.0 的多路复用是把多个请求当做多个流，请求响应数据分成多个帧，不同流中的帧交错发送，解决了 TCP 连接数量过多，TCP 连接慢的问题，所以，在同一个域名中只需要创建一个连接即可。header 压缩 header compress: http2.0 压缩了 header, 避免了重复请求头的传输，并减少了传输的大小。服务端推送 server push: http2.0 的服务器推送，浏览器发送请求后，服务器会主动寻找与这个请求相关的资源，将这些资源和这个请求一并返回，这样，浏览器后续就不需要在请求，也减少了请求次数。请求优先级 request prioritization：http2.0 可以设置请求的优先级，可按照优先级来解决队头阻塞的问题http3.0
0RTT 建立安全连接: 基于 DH 密钥交换算法，在一个数据包中就可以包含有效的应用数据，从而在连接延迟上有所提升，可节约数百毫秒的时间连接迁移: http3.0 是基于 UDP 来实现的，简单来说，我们切换 wifi 和 4G 时，不同基站之前不会造成重连的问题，从而提高了各种体验。队头阻塞问题: 一个数据包影响了一堆数据包，从而造成队头阻塞问题新的拥塞机制: 改用了 UDP 的方式，也就相应的改了 UDP 的拥塞机制前向纠错：QUIC 每发送一组数据就对这组数据进行异或运算，并将结果作为一个 FEC 包发送出去，接收方收到这一组数据后根据数据包和 FEC 包即可进行校验和纠错。特性热插拔：因为核心能力都在用户态实现的，不依赖内核，调整拥塞控制算法等行为都变得更为简单前向安全问题: 前向安全指的是密钥泄漏也不会让之前加密的数据被泄漏，影响的只有当前数据，对之前的数据无影响。GET 请求参数会保留在浏览器记录历史汇总，而 POST 请求参数不会保留GET 只接受 ASCII 字符串，而 POST 没有限制，也可以二进制GET 请求产生一个 TCP 数据包，而 POST 产生两个 TCP 数据包GET 请求可添加为书签，而 POST 请求不可以GET 请求有长度限制，而 POST 请求没有限制GET 请求不是很安全，因为会一些参数显示在 URL 地址栏上，而 POST 请求不会，但也不是很安全，如果传输敏感数据，要进行数据加密GET 请求一般用来获取资源，可适当进行请求缓存，而 POST 不行，POST 是更新/获取资源，必须要与数据库交互，所以不能使用缓存GET: 获取资源POST: 创建/更新资源PUT: 更新资源HEAD: 类似于 GET, 但响应式不是数据，而是 HTTP 的 header 信息DELETE: 删除资源OPTIONS: 允许客户端查看服务器的性能TRACE: 回显服务器收到的请求，用于测试和诊断COPY: 请求服务器将指定页面拷贝到另一个地址LINK: 请求与服务器建立连接UNLINK: 断开与服务器的链接关系HTTP 与 HTTPS 两者传输的安全性不同，HTTP 使用的是超文本传输协议，而 HTTPS 使用的 SSL 加密传输协议HTTP 与 HTTPS 两者使用的端口不同，HTTP 使用的是 80 端口，而 HTTPS 使用的是 443 端口HTTPS 协议需要 CA 证书，一般免费的证书较少，需要付费。HTTP 是没有证书100（继续）: 表示继续，在发送 post 请求时，已发送了 HTTP header 后，服务器端将返回此信息，表示确认，之后发送具体的参数信息。101（切换协议）: 要求服务器根据请求转换 HTTP 协议版本200（成功）: 服务器成功返回请求的数据。201（已创建）: 表示请求成功并且服务器创建了新的资源202（已接受）: 表示服务器已接受请求，但尚未处理203（非授权信息）: 服务器已成功处理了请求，但返回的信息可能来自另一来源。204（无内容）: 服务器成功处理了请求，但没有返回任何内容。205（重置内容）: 服务器成功处理了请求，但没有返回任何内容。206（部分内容）: 服务器成功处理了部分 GET 请求。300（多种选择）: 针对请求，服务器可执行多种操作。301（永久重定向）: 表示请求的网页已永久的移动到新的位置302（临时重定向）: 表示临时性重定向303（查看其他位置）304（未修改）: 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。305（使用代理）: 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。307（临时重定向）: 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。400（错误请求）：服务器不理解请求的语法。401（未授权）：请求要求身份验证。403（禁止）：服务器拒绝请求。404（未找到资源）：表示找不到任何与 URL 相匹配的资源，资源不存在405（方法禁用）：禁用请求中指定的方法。406（不接受当前格式）：无法使用请求的内容特性响应请求的网页。407（需要代理授权）：此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。408（请求超时）：服务器等候请求时发生超时。409（冲突）：服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。410（已删除）：如果请求的资源已永久删除，服务器就会返回此响应。411（需要有效长度）：服务器不接受不含有效内容长度标头字段的请求。412（未满足前提条件）：服务器未满足请求者在请求中设置的其中一个前提条件。413（请求实体过大）：服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。414（请求的 URI 过长）：请求的 URI（通常为网址）过长，服务器无法处理。415（不支持的媒体类型）：请求的格式不受请求页面的支持。416（请求范围不符合要求）：如果页面无法提供请求的范围，则服务器会返回此状态代码。417（未满足期望值）：服务器未满足"期望"请求标头字段的要求。422（验证错误）：当创建一个对象时，发生一个验证错误。449（重试请求）：应进行重试424（错误导致）：因之前某个接口失败，导致当前请求失败422（语义错误）：请求格式正确，但是由于含有语义错误，无法响应。421（连接数超出）：连接数超过了服务器许可的最大范围500（服务器内部错误）：服务器端错误501（尚未实施）：服务器不支持该请求502（错误网关）503（服务不可用）：表示服务器暂时无法处理请求，可能是过载或维护504（网关超时）505（HTTP 版本不受支持）506（服务器内部配置错误）509（服务器达到带宽限制）PUT 请求用于更新已存在的资源，而 POST 请求则用于创建新资源或提交更新PUT 请求是幂等的，而 POST 请求不是。PUT 请求是幂等的，即多次调用同一个 PUT 请求对资源的状态不会有影响，而 POST 请求不是幂等的，即多次调用同一个 POST 请求可能会生成多个资源，或者对已存在资源进行多次更新。PUT 请求需要指定要更新的资源的具体位置，而 POST 请求可以将数据提交到任何位置。Cache-Control：控制是否使用缓存机制Cookie: Cookie 值Content-Type: 常用于 POST 和 PUT 请求Date: 发送请求的日期和时间Content-Length: 请求体的长度Etag: 控制缓存的标记符Host: 请求的域名和端口号，默认 80，可省略User-Agent: 浏览器的身份标识字符串Referer：浏览器前一个访问的页面路径Access-Control-Allow-Origin: 指定哪些网站可以跨域源资源共享Age: 缓存时间，以秒为单位Allow: 允许的请求格式Cache-Control: 控制缓存，Cache-Control: max-age=3600, 以秒为单位Content-Type: 响应内容类型: application/json, multipart/form-data, application/x-www-form-urlencodedDate: 发送请求的日期和时间ETag: 控制缓存的标记符Expires: 过期时间Last-Modified: 所请求资源的最后时间Server: 服务器名称GET的长度值 = URL（2083）- （你的Domain+Path）-2（2是get请求中?=两个字符的长度）2083 个字符，如果超出，则没有任何响应65536 个字符80000 个字符190000 个字符8182 个字符8192 个字符16384 个字符https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchorhttp/https,如果省略协议，直接在浏览器地址栏输入 www.example.com，那么浏览器默认会访问http://www.example.comhttp://www.example.comwww.example.com/192.168.2.15www.example.com:80(默认 80,可省略),端口紧跟在域名后面，两者之间使用冒号分隔，/path/index.html: 指向网站的/path子目录下面的网页文件index.html?分隔，上例是 ?key1=value1&key2=value2。每组参数都是键值对（key-value pair）的形式，同时具有键名(key)和键值(value)，它们之间使用等号（=）连接。比如，key1=value 就是一个键值对，key1 是键名，value1 是键值。HTTP：超文本传输协议，一个基于 TCP/IP 通信协议来传递数据。HTTPS：超文本传输安全协议，由 HTTP 进行通信，但利用了 SSL/TLS 来加密数据包，可保证数据的隐私和完整性。HTML5 提供的一种浏览器与服务器进行全双工通信的网络技术，属于应用层协议，是基于 TCP 传输协议的，并复用了 HTTP 握手通道，浏览器只需要和服务器完成一次握手，两者之间就可以创建持久性的连接，进行双向数据传输(服务器向客户端主动推动消息，客户端主动向服务器推送消息)。websocket 服务器通知一个带有接受者 ID 的事件，然后服务器接收到后通知在接受者 ID 列表中的客户端进行处理。短轮询：客户端每隔一段时间发送一次请求，服务器接收到请求后，不管数据有没有更新，都会请求响应。这种方式比较简单，但需要不断发送请求，很浪费资源，当用户量增加时，服务器的压力就会很大，不合理。长轮询：客户端向服务器发送请求，当服务器接收到请求后，不会直接进行响应，而是先将这个请求挂起，然后再判断服务端的数据是否有更新，如果有更新，则进行响应，如果没有，则到达一定时间限制才返回。客户端接收到服务器的响应数据后，再次发出其他请求，重新建立连接。长轮询和短轮询相比，长轮询减少了很多不必要的请求数，比之前节省了资源。SSE(Server Sent Event): 服务器使用流信息向客户端推送信息，严格来说， http 协议是无法做到服务器主动推送消息的，但有一种变通方法，就是服务器向客户端声明，接下来要发送的是一个数据流，而不是一次性的数据包，会有数据不断地发送过来，这时候客户端就不会关闭连接，等一直等待服务器发送新的数据流，视频播放类似。目前出了 IE/edge， 其他浏览器都支持，相对于长轮询和短轮询，这种方式不用建立过多的 http 请求数。WebSocket: HTML5 提供的一种浏览器与服务器进行全双工通信的网络技术，属于应用层协议，是基于 TCP 传输协议的，并复用了 HTTP 握手通道，浏览器只需要和服务器完成一次握手，两者之间就可以创建持久性的连接，进行双向数据传输(服务器向客户端主动推动消息，客户端主动向服务器推送消息)。Q:(question)R:(result)A:(attention matters)D:(detail info)S:(summary)Ana:(analysis)T:(tips)