乐趣区

关于http:前端面试实录HTTP篇

jiezi

前言

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

前端面试实录 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. 公众号回复 加好友，即可添加为好友
退出移动版