前端面试实录 HTTP 篇
前言
系列首发于公众号『前端进阶圈』 ，若不想错过更多精彩内容，请“星标”一下，敬请关注公众号最新消息。
前端面试实录 HTTP 篇
1. http ~ http3.0？
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包即可进行校验和纠错。特性热插拔：因为核心能力都在用户态实现的，不依赖内核，调整拥塞控制算法等行为都变得更为简单前向安全问题: 前向安全指的是密钥泄漏也不会让之前加密的数据被泄漏，影响的只有当前数据，对之前的数据无影响。
2. GET 和 POST 的不同点？
GET请求参数会保留在浏览器记录历史汇总，而POST请求参数不会保留GET只接受ASCII字符串，而POST没有限制，也可以二进制GET请求产生一个TCP数据包，而POST产生两个TCP数据包GET请求可添加为书签，而POST请求不可以GET请求有长度限制，而POST请求没有限制GET请求不是很安全，因为会一些参数显示在URL地址栏上，而POST请求不会，但也不是很安全，如果传输敏感数据，要进行数据加密GET请求一般用来获取资源，可适当进行请求缓存，而POST不行，POST是更新/获取资源，必须要与数据库交互，所以不能使用缓存
3. 常见的 HTTP 方法？
GET:获取资源POST: 创建/更新资源PUT: 更新资源HEAD: 类似于GET, 但响应式不是数据，而是HTTP的header信息DELETE: 删除资源OPTIONS: 允许客户端查看服务器的性能TRACE: 回显服务器收到的请求，用于测试和诊断COPY: 请求服务器将指定页面拷贝到另一个地址LINK: 请求与服务器建立连接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 请求的区别?
PUT请求用于更新已存在的资源，而POST请求则用于创建新资源或提交更新PUT请求是幂等的，而POST请求不是。PUT请求是幂等的，即多次调用同一个PUT请求对资源的状态不会有影响，而POST请求不是幂等的，即多次调用同一个POST请求可能会生成多个资源，或者对已存在资源进行多次更新。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-urlencodedDate: 发送请求的日期和时间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 协议的优缺点？
优点：
简单，灵活，便于扩展
应用广泛，环境成熟
无状态，因为没有任何记录信息，可减轻服务器的负担，
缺点：
明文传输，数据可见
因为无状态，所以无法进行多个步骤：比如：加入购物出，结算，支付。每次都需要验证身份信息，但是无状态所以无法连续。解决办法，就是 cookie 技术
不安全，无法验证通信双方的身份信息。
10. URL 由那些部分组成？
eg:
https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor组成：
协议：默认是 HTTP 协议,
http/https,如果省略协议，直接在浏览器地址栏输入www.example.com，那么浏览器默认会访问 http://www.example.com主机：
www.example.com/192.168.2.15端口：
www.example.com:80(默认 80,可省略),端口紧跟在域名后面，两者之间使用冒号分隔，路径：
/path/index.html: 指向网站的/path子目录下面的网页文件index.html查询参数：两者之间使用
?分隔，上例是?key1=value1&key2=value2。每组参数都是键值对（key-value pair）的形式，同时具有键名(key)和键值(value)，它们之间使用等号（=）连接。比如，key1=value 就是一个键值对，key1 是键名，value1 是键值。锚点：锚点（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握手通道，浏览器只需要和服务器完成一次握手，两者之间就可以创建持久性的连接，进行双向数据传输(服务器向客户端主动推动消息，客户端主动向服务器推送消息)。
特殊字符描述：
问题标注
Q:(question)答案标注
R:(result)注意事项标准：
A:(attention matters)详情描述标注：
D:(detail info)总结标注：
S:(summary)分析标注：
Ana:(analysis)提示标注：
T:(tips)
往期推荐：
最后：
版权声明: 本文为 InfoQ 作者【控心つcrazy】的原创文章。
原文链接:【http://xie.infoq.cn/article/b29e5b466326d94ae90138dcd】。
本文遵守【CC BY-NC】协议，转载请保留原文出处及本版权声明。
还未添加个人签名 2021-10-17 加入
还未添加个人简介
评论