前端面试题精心整理(二)—HTTP协议

前言：本月博主去面试了，会分类写面试题分享给大家的，前端领域，共同进步！

上一篇是 TypeScript相关问题，点击超链接查看。

Q1: http协议中，从用户输入url地址，会发生什么？

A1：会发生从解析url到渲染页面的过程。

1. 首先浏览器会解析url，查看本地缓存（浏览器缓存、系统缓存、路由缓存等），如果有则直接显示。
2. 如果都没有，则进行DNS域名解析，解析出对应的IP地址。
3. 浏览器与服务器三次握手，成功建立TCP连接。
4. 浏览器发出http请求。
5. 服务器收到请求，返回资源。
6. 浏览器接收数据后，进行解析、渲染。
7. 最后显示出页面。

由于提到了浏览器渲染，有些面试官就会接着问下去。

Q1-1：浏览器是怎么渲染的呢？CSS/DOM这些。

A1-1：过程如下。

1. 解析HTML，生成DOM树。
2. 解析CSS，生成CSSOM树。
3. 将DOM和CSSOM合并，生成渲染树（Render-Tree）。
4. 计算渲染树的布局Layout， 将布局Paint渲染到屏幕上。

如图所示（原创勿盗）：

还可能涉及到回流、重绘的问题。

本篇文章主要是http协议相关，不过多赘述渲染问题。将文章看完，再点击 这里， 有很详细的浏览器渲染的资料推荐给大家。

Q2: http协议中，缓存机制有哪些，如何命中？

A2：强缓存、协商缓存。

强缓存与协商缓存的命中，由响应头Response Headers确定（服务器返回）。

1. 强缓存
   响应头中的 status 是 200，相关字段有expires（http1.0）,cache-control（http1.1)，两者同时出现时 cache-control 优先级更高。主要是利用 cache-control 的max-age值来进行判断。

   浏览器再次请求服务器时，浏览器会先判断max-age，如果到期则直接请求服务器，否则直接从缓存中读取。

   响应头的字段如图所示：

2. 协商缓存
   响应头中的 status 是 304，相关字段有 Etag / If-No-Match，Last-Modified / If-Modified-Since。
   （1） 服务器的 ETag 和 浏览器的 If-None-Match 对应：

   Etag（服务器）: 上次加载时，服务器的 response header 返回的；
   If-No-Match（浏览器）： 浏览器请求时的 request header 里的，取的是 Etag 的值。

   如果服务器为请求的资源确定的 ETag 标头的值与浏览器请求中的 If-None-Match 值相同，则服务器将返回 304 Not Modified。表示资源文件没有发生改变，命中协商缓存。

   服务器优先考虑Etag。

   Etag 与 Last-Modifed 均是服务器的响应头返回的，如图所示：
   

   （2） 服务器的 Last-Modified 和 浏览器请求的 If-Modified-Since 对应：

   Last-Modified（服务器）：该资源文件最后一次更改时间，服务器的 response header 里返回；
   If-Modified-Since（浏览器）：浏览器请求时的 request header 里的，取的是 Last-Modify 的值。
   
   在下一次发送请求时，服务器在接收到会做比对，如果相同，则命中协商缓存。
   If-No-Match 与 If-Modified-Since 是浏览器发送的，请求头可以简略为以下格式：

GET / HTTP/1.1
Host: example.com
Cache-Control: max-age=0
If-None-Match: "deadbeef"  // 对应服务端的标记Etag
If-Modified-Since: Tue, 22 Feb 2022 20:20:20 GMT // 对应服务端的Last-Modified

Q3: http协议中，常见的状态码有哪些？

A3：以2开头的代表的成功的返回，以3开头代表重定向，以4开头是客户端、用户操作的问题，以5开头是服务器端的错误。

状态码	含义
200	请求成功。
301	永久重定向，请求的网页已永久移动到新位置，浏览器会自动重定向到新的 url 地址。
302	临时重定向，服务器目前从不同位置的网页响应请求，可使用原有 url 地址。
303	查看其它位置，重定向。
304	Not Modified，资源未作修改。协商缓存。
305	所访问资源必须通过代理访问。
401	要求用户要进行身份验证，未登录等情形。
403	请求已发出，但服务端禁止访问。
404	页面无法找到。
500	服务器内部错误。
501	服务器不支持请求的功能。
502	网关错误，通常需要后端找原因。
503	服务器超载或系统维护。

Q4：http协议 与 https协议 有什么区别？

A4：http协议是明文传输，https协议是http协议+ssl协议构建的，加密传输协议。

1. http 的连接很简单，是无状态的。
2. http 传输的数据都是未加密的，是明文传输。
3. https 协议是由 http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
4. https 协议需要ca证书，费用较高。ssl 证书也需要钱，功能越强大的证书费用越高。

Q5: TCP和UDP的区别

A5: 区别如下。

1. TCP是面向连接的，UDP 是无连接的，即发送数据前不需要先建立链接。
2. TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。
3. TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。
4. TCP只能是1对1的，UDP支持1对1,1对多。
5. TCP是面向连接的可靠性传输，而UDP是不可靠的。

其他知识点，三次握手、四次挥手能说出来就可以了，详细过程点击这里
图是知乎的，这里为说明三次握手是如何交互的使用：

针对以上还可能会顺便问到 网站性能优化 等问题，大家自行再研究，本文主题暂不涉及。（文章持续维护中，如有不足，请指正。）

Q6：Http1.1与2.0的区别

1. 多路复用。做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级。
2. 头部数据压缩。HTTP2.0使用 HPACK 算法对 header 的数据进行压缩，体积变小后，网络传输速度会更快。 （HTTP/1.1版本的头部信息是文本，数据部分可以是文本也可以是二进制；HTTP/2版本的头部和数据部分都是二进制，且统称为‘帧’。）
3. 服务器推送。服务器会将一些资源推到浏览器端。

本文为原创文章，转载需经本人同意并注明出处。