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

系列文章目录

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

内容	参考链接
HTML & CSS 篇	HTML & CSS 篇
JavaScript 篇（一）	JavaScript 篇（一）【JS的三座大山 】原型和原型链、作用域和闭包、异步
JavaScript 篇（二）	JavaScript 篇（二）【JS 异步进阶】
JavaScript-Web-API 篇（一）	JavaScript-Web-API 篇（一）DOM、BOM、事件
JavaScript-Web-API 篇（二）	JavaScript-Web-API 篇（二）AJAX、存储
HTTP 篇	HTTP 篇
性能优化篇	性能优化篇（手写防抖、手写节流、XXS攻击、XSRF攻击）
经典面试题-JS篇	经典面试题 HTML、CSS、JavaScript篇

---

---

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

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

1、资源标识

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

图片出处：https://coding.imooc.com/lesson/400.html#mid=36668

2、headers 示例

3、请求示例

4、Last-Modified 和 Etag

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

5、http 缓存综述

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

1、三种刷新操作

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

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

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

七、http 加密方式

须知：

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

加密方式：

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

八、https 证书

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

总过程图：

出处：https://coding.imooc.com/lesson/400.html#mid=47935

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

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