web前端面试高频考点——HTTP 篇

怼烎@ 2023-09-28 19:02 0阅读 0赞

## 系列文章目录 ##

> JavaScript 知识梳理，收录了web前端面试 95%以上 的高频考点，满满的干货。给你做一个高效的知识梳理，为你的面试保驾护航！

<table> 
 <thead> 
  <tr> 
   <th>内容</th> 
   <th>参考链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>HTML &amp; CSS 篇</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126056763" rel="nofollow">HTML &amp; CSS 篇</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript 篇（一）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126077498" rel="nofollow">JavaScript 篇（一）【JS的三座大山 】原型和原型链、作用域和闭包、异步</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript 篇（二）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126123773" rel="nofollow">JavaScript 篇（二）【JS 异步进阶】</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript-Web-API 篇（一）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126174849" rel="nofollow">JavaScript-Web-API 篇（一）DOM、BOM、事件</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript-Web-API 篇（二）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126189846" rel="nofollow">JavaScript-Web-API 篇（二）AJAX、存储</a></td> 
  </tr> 
  <tr> 
   <td>HTTP 篇</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126213301" rel="nofollow">HTTP 篇</a></td> 
  </tr> 
  <tr> 
   <td>性能优化篇</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126219544" rel="nofollow">性能优化篇（手写防抖、手写节流、XXS攻击、XSRF攻击）</a></td> 
  </tr> 
  <tr> 
   <td>经典面试题-JS篇</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126240337" rel="nofollow">经典面试题 HTML、CSS、JavaScript篇</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 文章目录 ####

*  系列文章目录
 *  http 面试题
 *   *  一、http 常见状态码
     *   *  1、状态码分类
         *  2、常见状态码
     *  二、什么是 Restful API
     *   *  1、传统的 methods
         *  2、现在的 methods
         *  3、Restful API
         *  4、如何设计一个资源
         *  5、不使用 url 参数
         *  6、用 method 表示操作类型
     *  三、http 常见 header
     *   *  1、Request Headers
         *  2、Response Headers
         *  3、缓存相关的 headers
     *  四、Cache-Control - http 强制缓存
     *   *  1、Cache-Control
         *  2、cache-control 的值
         *  3、关于 Expires
     *  五、协商缓存
     *   *  1、资源标识
         *  2、headers 示例
         *  3、请求示例
         *  4、Last-Modified 和 Etag
         *  5、http 缓存综述
     *  六、刷新页面对 http 缓存的影响
     *   *  1、三种刷新操作
         *  2、不同刷新操作，不同的缓存策略
     *  七、http 加密方式
     *  八、https 证书

--------------------

## http 面试题 ##

### 一、http 常见状态码 ###

#### 1、状态码分类 ####

*  1xx 服务器收到请求
 *  2xx 请求成功，如 200
 *  3xx 重定向，如 302
 *  4xx 客户端错误，如 404
 *  5xx 服务端错误，如 500

#### 2、常见状态码 ####

*  200 成功
 *  301 永久重定向（配合 location，浏览器自动处理）
 *  302 临时重定向（配合 location，浏览器自动处理）
 *  304 资源未被修改
 *  404 资源未找到
 *  403 没有权限
 *  500 服务器错误
 *  504 网关超时

### 二、什么是 Restful API ###

#### 1、传统的 methods ####

*  get 获取服务器数据
 *  post 向服务器提交数据
 *  简单的网页功能，就这两个操作

#### 2、现在的 methods ####

*  get 获取数据
 *  post 新建数据
 *  patch/put 更新数据
 *  delete 删除数据

#### 3、Restful API ####

*  一种新的 API 设计方法（早已推广使用）
 *  传统 API 设计：把每个 url 当作一个功能
 *  Restful API 设计：把每个 url 当作一个唯一的资源

#### 4、如何设计一个资源 ####

*  尽量不用 url 参数
 *  用 method 表示操作类型

#### 5、不使用 url 参数 ####

*  传统 API 设计：/api/list?pageIndex=2
 *  Restful API 设计：/api/list/2

#### 6、用 method 表示操作类型 ####

**传统 API 设计**

*  post 请求：/api/create-blog
 *  post 请求：/api/update-blog?id=100
 *  get 请求：/api/get-blog?id=100

**Restful API 设计**

*  post 请求：/api/blog
 *  patch 请求：/api/blog/100
 *  get 请求：/api/blog/100

### 三、http 常见 header ###

#### 1、Request Headers ####

*  Accept 浏览器可接收的数据格式
 *  Accept-Encoding 浏览器可接收的压缩算法，如 gzip
 *  Accept-Language 浏览器可接收的语言，如 zh-CN
 *  Connection：keep-alive 一次 TCP 连接重复使用
 *  cookie：储存在用户本地终端上的数据
 *  Host：请求的域名
 *  User-Agent（简称 UA）浏览器信息
 *  Content-type 发送数据的格式，如 application/json

#### 2、Response Headers ####

*  Content-type：返回数据的格式，如 application/json
 *  Content-length：返回数据的大小，多少字节
 *  Content-Encoding：返回数据的压缩算法，如 gzip
 *  Set-Cookie：服务器端向用户代理发送 cookie

#### 3、缓存相关的 headers ####

### 四、Cache-Control - http 强制缓存 ###

#### 1、Cache-Control ####

*  Response Headers 中
 *  控制强制缓存的逻辑
 *  例如：Cache-Control：max-age=31536000 （单位：秒）

**图片出处：https://coding.imooc.com/lesson/400.html\#mid=36807**  
![在这里插入图片描述][485149645d844368a546e194206327f6.png]  
![在这里插入图片描述][d36c5b2d90a641e7a334aa239371f756.png]

#### 2、cache-control 的值 ####

*  max-age：做本地的强制缓存（限制缓存时间）
 *  no-cache：不做本地的强制缓存，去服务端请求（如html）
 *  no-store：不做本地的强制缓存，也不用服务端做缓存
 *  private：只有某个在通过缓存服务器的时候，得到缓存资源
 *  public：所有的用户在通过缓存服务器的时候，都可以缓存这个资源

#### 3、关于 Expires ####

*  同在 Response Headers中
 *  同为控制缓存过期
 *  已被 Cache-Control 代替

### 五、协商缓存 ###

*  服务器端缓存策略
 *  服务器判断客户端资源，是否和服务端资源一样
 *  一致则返回 304，否则返回 200 和最新的资源

**图片出处：https://coding.imooc.com/lesson/400.html\#mid=36668**  
![在这里插入图片描述][3b1a7fd1973049a197bce5998e94728f.png]

#### 1、资源标识 ####

*  在 Response Headers 中，有两种
 *  Last-Modified 资源的最后修改时间
 *  Etag 资源的唯一标识（一个字符串，类似人类的指纹）

**图片出处：https://coding.imooc.com/lesson/400.html\#mid=36668**  
![在这里插入图片描述][813ae526f31e4214b3adf7e450495e45.png]  
![在这里插入图片描述][40ec8e5214c041c79c0a3d77d59ae4b2.png]

#### 2、headers 示例 ####

![在这里插入图片描述][097c384c8b884edd8dbfde857789fb2f.png]

#### 3、请求示例 ####

![在这里插入图片描述][d4185e7a8d6c4f4ebb0f252ec4a81270.png]

#### 4、Last-Modified 和 Etag ####

*  会优先使用 Etag
 *  Last-Modified 只能精确到秒级
 *  如果资源被重复生成，而内容不变，则 Etag 更精确

#### 5、http 缓存综述 ####

![在这里插入图片描述][8f41b18790ee4d98b2e600fec0ddfd18.png]

### 六、刷新页面对 http 缓存的影响 ###

#### 1、三种刷新操作 ####

*  正常操作：地址栏输入url，跳转链接，前进后退
 *  手动刷新：F5，点击刷新按钮，右击菜单刷新
 *  强制刷新：ctrl + F5

#### 2、不同刷新操作，不同的缓存策略 ####

*  正常操作：强制缓存有效，协商缓存有效
 *  手动刷新：强制缓存失效，协商缓存有效
 *  强制刷新：强制缓存失效，协商缓存失效

### 七、http 加密方式 ###

须知：

*  http 是明文传输，敏感信息容易被中间劫持
 *  https = http + 加密，劫持了也无法解密
 *  现代浏览器已开始强制 https 协议

**加密方式：**

*  对称加密：一个 key 同负责加密、解密
 *  非对称加密：一对 key，A 加密之后，只能由 B解密
 *  https 同时用到了这两种加密方式

### 八、https 证书 ###

*  中间人攻击
 *  使用第三方证书（慎用免费、不合规的证书）
 *  浏览器校验证书

**总过程图：**

![在这里插入图片描述][3060617f25b342528a6d519ecdb54677.png]  
**出处：https://coding.imooc.com/lesson/400.html\#mid=47935**

`不积跬步无以至千里 不积小流无以成江海`

点个关注不迷路，持续更新中…

[485149645d844368a546e194206327f6.png]: https://img-blog.csdnimg.cn/485149645d844368a546e194206327f6.png
[d36c5b2d90a641e7a334aa239371f756.png]: https://img-blog.csdnimg.cn/d36c5b2d90a641e7a334aa239371f756.png
[3b1a7fd1973049a197bce5998e94728f.png]: https://img-blog.csdnimg.cn/3b1a7fd1973049a197bce5998e94728f.png
[813ae526f31e4214b3adf7e450495e45.png]: https://img-blog.csdnimg.cn/813ae526f31e4214b3adf7e450495e45.png
[40ec8e5214c041c79c0a3d77d59ae4b2.png]: https://img-blog.csdnimg.cn/40ec8e5214c041c79c0a3d77d59ae4b2.png
[097c384c8b884edd8dbfde857789fb2f.png]: https://img-blog.csdnimg.cn/097c384c8b884edd8dbfde857789fb2f.png
[d4185e7a8d6c4f4ebb0f252ec4a81270.png]: https://img-blog.csdnimg.cn/d4185e7a8d6c4f4ebb0f252ec4a81270.png
[8f41b18790ee4d98b2e600fec0ddfd18.png]: https://img-blog.csdnimg.cn/8f41b18790ee4d98b2e600fec0ddfd18.png
[3060617f25b342528a6d519ecdb54677.png]: https://img-blog.csdnimg.cn/3060617f25b342528a6d519ecdb54677.png