前端面试题之HTTP

从输入URL到页面加载发生了什么#

参考答案

大致过程如下：

1. DNS 解析：域名 -> IP地址；
2. TCP 的连接；
3. 浏览器向服务器发送 HTTP 请求；
4. 服务器处理 HTTP 请求，并返回给浏览器；
5. 浏览器解析渲染页面；
6. 关闭连接；

参考资料

前端经典面试题: 从输入 URL 到页面加载发生了什么？

从 URL 输入到页面展现到底发生什么？

从输入 URL 到页面加载完成的过程中都发生了什么事情？

从输入 URL 到页面加载的过程？如何由一道题完善自己的前端知识体系！

HTTP的状态码及含义#

参考答案

可以笼统的概括为如下：

开头	含义
1xx	请求已被接受，需要进一步处理。这类响应是临时响应
2xx	请求成功
3xx	重定向，需要进一步操作
4xx	客户端错误
5xx	服务器错误

常见的 HTTP 状态码：

状态码	含义
200	请求成功
301	永久重定向，资源（网页等）被永久转移到其他 URL
302	临时重定向，请求的资源临时搬到其他位置
304	资源未修改
400	错误的请求
403	拒绝访问
404	请求的资源（网页等）不存在
405	客户端请求的方法错误
414	请求的 URL 过长
500	内部服务器错误

参考资料

HTTP 状态码 - 维基百科

HTTP 响应代码 - MDN

HTTP Cats

常见的http headers#

参考答案

分为 Request headers 和 Response headers。

Request Headers：

Header	含义
Accept	浏览器可接收的数据格式
Accept-Encoding	浏览器可接收的压缩算法
Accept-Language	浏览器可接收的语言
Connection	决定当前的事务完成后，是否会关闭网络连接
Cookie	请求发送时，会把保存在该请求域名下的所有 cookie 值一起发送给服务器
Host	指明了请求将要发送到的服务器主机名和端口号
User-Agent	浏览器信息
Content-Type	发送数据的格式
Referer	包含一个 URL，用户从该 URL 代表的页面出发访问当前请求的页面

Response Headers：

Header	含义
Cache-Control	告诉所有的缓存机制是否可以缓存及哪种类型
Content-Type	返回数据的格式
Content-Length	返回数据的大小
Content-Encoding	返回数据的压缩算法
Date	原始服务器消息发出的时间
Expires	响应过期的日期和时间
Last-Modified	请求资源的最后修改时间
ETag	资源的唯一标识
Location	用来重定向接收方到非请求URL的位置来完成请求或标识新的资源
Set-Cookie	服务器端向客户端发送cookie

参考资料

MDN - HTTP Headers

HTTP缓存有哪几种#

参考答案

HTTP 缓存可分为两大类，分别是：强制缓存和协商缓存。

强制缓存在缓存数据未生效的情况下，是不需要再和服务器发生交互的；而协商缓存，顾名思义是需要进行比较判断是否可以使用缓存。

强制缓存的优先级高于协商缓存的

强制缓存：

强制缓存分两种情况，分别是 Expires 和 Cache-Control。

1. Expires：它的值是服务器告诉浏览器的缓存过期时间的，是一个绝对时间，即如果下次请求时，如果当前距上次请求时间还未超过过期时间时，就直接使用缓存数据。但是存在部分问题：①客户端和服务器的时间不一致会出现问题；②在缓存未生效前，获取不到修改后的资源。
2. Cache-Control：它是设置相对时间，就解决了 Expires 出现的问题。

Cache-Control 有以下可选值：

1. no-cache：不直接使用缓存，根据新鲜度来使用缓存；
2. no-store：不使用缓存，每次都是请求下载新资源；
3. max-age：设置缓存存储的最大周期，超过这个时间就被认为过期；
4. public / private：是否只能被单个用户使用，默认值为 private；
5. must-revalidate：每次访问需要缓存校验。

注意：Cache-Control 优先级高于 Expires。

协商缓存：

它是服务器端缓存策略，相关属性有：ETag / if-Not-Match、Last-Modified / If-Modified-Since。

执行流程如下：

1. 当浏览器第一次向服务器发送请求时，会在响应头中返回协商缓存的头属性：ETag 和 Last-Modified，其中 ETag 返回的是一个 hash 值，Last-Modified 返回的是 GMT 格式的最后修改时间。
2. 浏览器在第二次发送请求的时候，会在请求头中带上与 ETag 对应的 if-Not-Match，其值就是响应头中返回的 ETag 的值，再带上 Last-Modified 对应的 If-Modified-Since。服务器在接收到这两个参数后会做比较，如果返回的是 304 状态码，则说明请求的资源没有修改，浏览器可以直接在缓存中取数据，否则，服务器会直接返回数据。

他们的优先级是：Cache-Control > Expires > ETag > Last-Modified。

参考资料

HTTP 缓存 - MDN

彻底弄懂 HTTP 缓存机制及原理

Cookie、Session、LocalStorage之间的区别#

参考答案

传送门 - Cookie、Session、LocalStorage、Cache-Control

参考资料

Cookie、session 和 localStorage、以及 sessionStorage 之间的区别

cookie、session、localStorage 分别是什么？有什么作用？

cookie 与 Session 机制区别以及 Cookie SessionStorage LocalStorage 异同

GET和POST的区别#

参考答案

1. GET 请求一般去请求获取数据，POST 请求一般发送数据到后台使用；
2. GET 请求的参数在 url 上可见，而 POST 请求的参数放在 Request body 中；
3. GET 请求参数的长度有限制，POST 请求没有长度限制；
4. GET 请求刷新浏览器或回退没有影响，POST 请求回退会重新提交数据；
5. GET 请求可被缓存，POST 请求不会；
6. GET 请求保留在浏览器历史记录里，POST 请求不会；
7. GET 请求可被收藏为书签，POST 请求不能；
8. GET 请求只能进行 url 编码，POST 请求支持多种编码方式；
9. GET 请求只需要一个报文，POST 请求需要两个及以上；

其实这两种请求最本质的区别就是语义不同，GET 请求是获取数据，而 POST 请求是提交数据

参考资料

99% 的人理解错 HTTP 中 GET 与 POST 的区别

GET 和 POST 到底有什么区别？

都 2019 年了，还问 GET 和 POST 的区别

HTTP与HTTPS的区别#

参考答案

1. http 是以 http:// 开头，https 是以 https:// 开头；
2. http 默认使用 80 端口，而 https 默认使用 443 端口；
3. http 是超文本传输协议，信息采用明文传输，而 https 则是具有安全性 SSL 加密传输协议；
4. https 协议需要到证书颁发机构 CA 申请证书，大多数情况下需要一定费用；

参考资料

HTTP 与 HTTPS 的区别

HTTP与HTTPS的区别 - konglingbin

详细解析 HTTP 与 HTTPS 的区别

http 和 https 有何区别？如何灵活使用？

描述一下TCP的三次握手和四次挥手#

参考答案

传送门 - 网络模型与TCP协议

其他资料

“三次握手，四次挥手”你真的懂吗？

http1与http2的区别#

参考答案

1. 新的二进制格式（Binary Format），HTTP1.x 的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认 0 和 1 的组合。基于这种考虑 HTTP2.0 的协议解析决定采用二进制格式，实现方便且健壮。
2. 多路复用（MultiPlexing），即连接共享，即每一个 request 都是是用作连接共享机制的。一个 request 对应一个 id，这样一个连接上可以有多个 request，每个连接的 request 可以随机的混杂在一起，接收方可以根据 request 的 id 将 request 再归属到各自不同的服务端请求里面。
3. header 压缩，HTTP1.x 的 header 带有大量信息，而且每次都要重复发送，HTTP2.0 使用 encoder 来减少需要传输的 header 大小，通讯双方各自 cache 一份 header fields 表，既避免了重复 header 的传输，又减小了需要传输的大小。
4. 服务端推送（server push），同 SPDY 一样，HTTP2.0 也具有 server push 功能。

参考资料

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别

更多面试题请移步至 我的新博客 - 持续更新地址