前端面试实录HTTP篇

前言

系列首发于公众号『前端进阶圈』 ，若不想错过更多精彩内容，请“星标”一下，敬请关注公众号最新消息。

前端面试实录HTTP篇

1. http ~ http3.0？

• http

  1. 带宽
  2. 延迟
  3. 浏览器阻塞(HOL blocking)
  4. DNS 查询(DNS lookup)
  5. 建立连接(initial connection)

• http1.0

  1. 无法复用：每次请求都会与服务器建立一次连接，消耗传输很大，
  2. 队头阻塞：如果有多个请求，前一个请求的响应结果后才能发送下一个请求。所以所有的请求都会在先进先出的队列中，如果队头意外阻塞，就会造成队头阻塞问题。

• http1.1

  1. 缓存控制：新增了 ETag, Last-Modified, Expires，Cache-Control 来控制缓存
  2. 长连接：通过设置 Connection: keep-alive 属性来保持 http 连接可以在一个 TCP 连接上发送多个请求
  3. 分块传输
  4. 管线化：将多个请求整批提交，在发送请求过程中也不需要等待服务器的响应

• http2.0

  1. 二进制分帧 Binary Format：http2.0 的基本单位是二进制，之前采用的文本的方式传输，健壮性不是很好，后续改用了二进制的格式，更方便更健壮。
  2. 多路复用 MultiPlexing: http2.0 的多路复用是把多个请求当做多个流，请求响应数据分成多个帧，不同流中的帧交错发送，解决了 TCP 连接数量过多，TCP 连接慢的问题，所以，在同一个域名中只需要创建一个连接即可。
  3. header 压缩 header compress: http2.0 压缩了 header, 避免了重复请求头的传输，并减少了传输的大小。
  4. 服务端推送 server push: http2.0 的服务器推送，浏览器发送请求后，服务器会主动寻找与这个请求相关的资源，将这些资源和这个请求一并返回，这样，浏览器后续就不需要在请求，也减少了请求次数。
  5. 请求优先级 request prioritization：http2.0 可以设置请求的优先级，可按照优先级来解决队头阻塞的问题

• http3.0

  1. 0RTT 建立安全连接: 基于 DH 密钥交换算法，在一个数据包中就可以包含有效的应用数据，从而在连接延迟上有所提升，可节约数百毫秒的时间
  2. 连接迁移: http3.0 是基于 UDP 来实现的，简单来说，我们切换 wifi 和 4G 时，不同基站之前不会造成重连的问题，从而提高了各种体验。
  3. 队头阻塞问题: 一个数据包影响了一堆数据包，从而造成队头阻塞问题
  4. 新的拥塞机制: 改用了 UDP 的方式，也就相应的改了 UDP 的拥塞机制
  5. 前向纠错：QUIC 每发送一组数据就对这组数据进行异或运算，并将结果作为一个 FEC 包发送出去，接收方收到这一组数据后根据数据包和 FEC 包即可进行校验和纠错。
  6. 特性热插拔：因为核心能力都在用户态实现的，不依赖内核，调整拥塞控制算法等行为都变得更为简单
  7. 前向安全问题: 前向安全指的是密钥泄漏也不会让之前加密的数据被泄漏，影响的只有当前数据，对之前的数据无影响。

2. GET 和 POST 的不同点？

1. GET 请求参数会保留在浏览器记录历史汇总，而 POST 请求参数不会保留
2. GET 只接受 ASCII 字符串，而 POST 没有限制，也可以二进制
3. GET 请求产生一个 TCP 数据包，而 POST 产生两个 TCP 数据包
4. GET 请求可添加为书签，而 POST 请求不可以
5. GET 请求有长度限制，而 POST 请求没有限制
6. GET 请求不是很安全，因为会一些参数显示在 URL 地址栏上，而 POST 请求不会，但也不是很安全，如果传输敏感数据，要进行数据加密
7. GET 请求一般用来获取资源，可适当进行请求缓存，而 POST 不行，POST 是更新/获取资源，必须要与数据库交互，所以不能使用缓存

3. 常见的 HTTP 方法？

1. GET: 获取资源
2. POST: 创建/更新资源
3. PUT: 更新资源
4. HEAD: 类似于 GET, 但响应式不是数据，而是 HTTP 的 header 信息
5. DELETE: 删除资源
6. OPTIONS: 允许客户端查看服务器的性能
7. TRACE: 回显服务器收到的请求，用于测试和诊断
8. COPY: 请求服务器将指定页面拷贝到另一个地址
9. LINK: 请求与服务器建立连接
10. UNLINK: 断开与服务器的链接关系

4. HTTP 与 HTTPS 的共同点与不同点？

• 共同点：

  • 都是采用相同的协议，在客户端建立一个连接与 Web 服务器指定的端口来传达信息

• 不同点：

  • HTTP 与 HTTPS 两者传输的安全性不同，HTTP 使用的是超文本传输协议，而 HTTPS 使用的 SSL 加密传输协议
  • HTTP 与 HTTPS 两者使用的端口不同，HTTP 使用的是 80 端口，而 HTTPS 使用的是 443 端口
  • HTTPS 协议需要 CA 证书，一般免费的证书较少，需要付费。HTTP 是没有证书

5. 常见的 HTTP 状态码：

• 1xx: 指示信息

  • 100（继续）: 表示继续，在发送 post 请求时，已发送了 HTTP header 后，服务器端将返回此信息，表示确认，之后发送具体的参数信息。
  • 101（切换协议）: 要求服务器根据请求转换 HTTP 协议版本

• 2xx: 成功

  • 200（成功）: 服务器成功返回请求的数据。
  • 201（已创建）: 表示请求成功并且服务器创建了新的资源
  • 202（已接受）: 表示服务器已接受请求，但尚未处理
  • 203（非授权信息）: 服务器已成功处理了请求，但返回的信息可能来自另一来源。
  • 204（无内容）: 服务器成功处理了请求，但没有返回任何内容。
  • 205（重置内容）: 服务器成功处理了请求，但没有返回任何内容。
  • 206（部分内容）: 服务器成功处理了部分 GET 请求。

• 3xx: 重定向

  • 300（多种选择）: 针对请求，服务器可执行多种操作。
  • 301（永久重定向）: 表示请求的网页已永久的移动到新的位置
  • 302（临时重定向）: 表示临时性重定向
  • 303（查看其他位置）
  • 304（未修改）: 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
  • 305（使用代理）: 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
  • 307（临时重定向）: 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

• 4xx: 客户端错误

  • 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（连接数超出）：连接数超过了服务器许可的最大范围

• 5xx: 服务器端错误

  • 500（服务器内部错误）：服务器端错误
  • 501（尚未实施）：服务器不支持该请求
  • 502（错误网关）
  • 503（服务不可用）：表示服务器暂时无法处理请求，可能是过载或维护
  • 504（网关超时）
  • 505（HTTP 版本不受支持）
  • 506（服务器内部配置错误）
  • 509（服务器达到带宽限制）

6. PUT 与 POST 请求的区别?

1. PUT 请求用于更新已存在的资源，而 POST 请求则用于创建新资源或提交更新
2. PUT 请求是幂等的，而 POST 请求不是。PUT 请求是幂等的，即多次调用同一个 PUT 请求对资源的状态不会有影响，而 POST 请求不是幂等的，即多次调用同一个 POST 请求可能会生成多个资源，或者对已存在资源进行多次更新。
3. PUT 请求需要指定要更新的资源的具体位置，而 POST 请求可以将数据提交到任何位置。

7. 常见的 HTTP 请求头和响应头？

• 请求头：

  • 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-urlencoded
  • Date: 发送请求的日期和时间
  • ETag: 控制缓存的标记符
  • Expires: 过期时间
  • Last-Modified: 所请求资源的最后时间
  • Server: 服务器名称

8. GET 方法 URL 长度限制的原因？

• 实际上 HTTP 协议并没有对 GET 方法做 URL 长度限制，这个限制是特定的浏览器以及服务器对他的限制
• GET的长度值 = URL（2083）- （你的Domain+Path）-2（2是get请求中?=两个字符的长度）

• 各类浏览器对 GET 方法 URL 长度限制：

  • IE：2083 个字符，如果超出，则没有任何响应
  • Firefox: 65536 个字符
  • Safari: 80000 个字符
  • Opera: 190000 个字符
  • Google: 8182 个字符

• 主流服务对 URL 长度限制：

  • Apache: 8192 个字符
  • Microsoft Internet Information Server: 16384 个字符

9. HTTP 协议的优缺点？

• 优点：

  1. 简单，灵活，便于扩展
  2. 应用广泛，环境成熟
  3. 无状态，因为没有任何记录信息，可减轻服务器的负担，

• 缺点：

  1. 明文传输，数据可见
  2. 因为无状态，所以无法进行多个步骤：比如：加入购物出，结算，支付。每次都需要验证身份信息，但是无状态所以无法连续。解决办法，就是 cookie 技术
  3. 不安全，无法验证通信双方的身份信息。

10. URL 由那些部分组成？

• eg: https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor

• 组成：

  1. 协议：默认是 HTTP 协议,http/https,如果省略协议，直接在浏览器地址栏输入 www.example.com，那么浏览器默认会访问http://www.example.com
  2. 主机：www.example.com/192.168.2.15
  3. 端口：www.example.com:80(默认 80,可省略),端口紧跟在域名后面，两者之间使用冒号分隔，
  4. 路径：/path/index.html: 指向网站的/path子目录下面的网页文件index.html
  5. 查询参数：两者之间使用?分隔，上例是 ?key1=value1&key2=value2。每组参数都是键值对（key-value pair）的形式，同时具有键名(key)和键值(value)，它们之间使用等号（=）连接。比如，key1=value 就是一个键值对，key1 是键名，value1 是键值。
  6. 锚点：锚点（anchor）是网页内部的定位点，使用#加上锚点名称，放在网址的最后，比如#anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。锚点名称通过网页元素的 id 属性命名，

11. 什么是 HTTPS 协议？

• HTTP：超文本传输协议，一个基于 TCP/IP 通信协议来传递数据。
• HTTPS：超文本传输安全协议，由 HTTP 进行通信，但利用了 SSL/TLS 来加密数据包，可保证数据的隐私和完整性。

12. 对 websocket 的理解？

• 理解：HTML5 提供的一种浏览器与服务器进行全双工通信的网络技术，属于应用层协议，是基于 TCP 传输协议的，并复用了 HTTP 握手通道，浏览器只需要和服务器完成一次握手，两者之间就可以创建持久性的连接，进行双向数据传输(服务器向客户端主动推动消息，客户端主动向服务器推送消息)。
• 原理：客户端向 websocket 服务器通知一个带有接受者 ID 的事件，然后服务器接收到后通知在接受者 ID 列表中的客户端进行处理。

13. 即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？

• 短轮询：客户端每隔一段时间发送一次请求，服务器接收到请求后，不管数据有没有更新，都会请求响应。这种方式比较简单，但需要不断发送请求，很浪费资源，当用户量增加时，服务器的压力就会很大，不合理。
• 长轮询：客户端向服务器发送请求，当服务器接收到请求后，不会直接进行响应，而是先将这个请求挂起，然后再判断服务端的数据是否有更新，如果有更新，则进行响应，如果没有，则到达一定时间限制才返回。客户端接收到服务器的响应数据后，再次发出其他请求，重新建立连接。长轮询和短轮询相比，长轮询减少了很多不必要的请求数，比之前节省了资源。
• SSE(Server Sent Event): 服务器使用流信息向客户端推送信息，严格来说， http 协议是无法做到服务器主动推送消息的，但有一种变通方法，就是服务器向客户端声明，接下来要发送的是一个数据流，而不是一次性的数据包，会有数据不断地发送过来，这时候客户端就不会关闭连接，等一直等待服务器发送新的数据流，视频播放类似。目前出了 IE/edge， 其他浏览器都支持，相对于长轮询和短轮询，这种方式不用建立过多的 http 请求数。
• WebSocket: HTML5 提供的一种浏览器与服务器进行全双工通信的网络技术，属于应用层协议，是基于 TCP 传输协议的，并复用了 HTTP 握手通道，浏览器只需要和服务器完成一次握手，两者之间就可以创建持久性的连接，进行双向数据传输(服务器向客户端主动推动消息，客户端主动向服务器推送消息)。

特殊字符描述：

1. 问题标注 Q:(question)
2. 答案标注 R:(result)
3. 注意事项标准：A:(attention matters)
4. 详情描述标注：D:(detail info)
5. 总结标注：S:(summary)
6. 分析标注：Ana:(analysis)

7. 提示标注：T:(tips)

   往期推荐：

8. 前端面试实录HTML篇
9. 前端面试实录CSS篇
10. JS 如何判断一个元素是否在可视区域内？
11. Vue2、3 生命周期及作用？
12. 排序算法：QuickSort
13. 箭头函数与普通函数的区别？
14. 这是你理解的CSS选择器权重吗？
15. JS 中 call, apply, bind 概念、用法、区别及实现？
16. 常用位运算方法？
17. Vue数据监听Object.definedProperty()方法的实现
18. 为什么 0.1+ 0.2 != 0.3，如何让其相等？
19. 聊聊对 this 的理解？

20. JavaScript 为什么要进行变量提升，它导致了什么问题？

    最后：

21. 欢迎关注 『前端进阶圈』 公众号 ，一起探索学习前端技术......
22. 公众号回复 加群 或 扫码, 即可加入前端交流学习群，一起快乐摸鱼和学习......
23. 公众号回复 加好友，即可添加为好友