首页  思维导图  详情



 



HTTP 协议

2021-03-24 15:02:50   0  举报





仅支持查看

AI智能生成

前端面试_HTTP协议

HTTP

前端面试

模板推荐

作者其他创作

大纲/内容

HTTP 状态码

状态码分类

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

常见状态码

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

Restful-API

methods

传统的 methods： <ul><li>get 获取服务器数据</li><li>post 向服务器提交数据</li></ul>

现在的 methods： <ul><li>get 获取数据</li><li>post 新建数据</li><li>patch/put 更新数据</li><li>delete 删除数据</li></ul>

一种新的 API 设计方法 与传统 API 的区别

<ul><li>传统 API 设计：把每个 url 当做一个功能</li><li>Restful API 设计: 把每个 url 当做一个唯一的资源</li></ul>

如何把 url 设计成一个资源？

尽量不用 url 参数

<ul><li>传统 API 设计： /api/list?pageIndex=2</li><li>Restful API 设计： /api/list/2</li></ul>

用 method 表示操作类型

传统 API 设计： <ul><li>post /api/create-blog</li><li>post /api/update-blog?id=100</li><li>get /api/get-blog?id=100</li></ul>

Restful API 设计： <ul><li>post /api/blog（创建）</li><li>patch /api/blog/100（更新）</li><li>get /api/blog/100（获取）</li></ul>

HTTP Headers

常见的 Request Headers

Accept 浏览器可接受的数据格式 Accept-Encoding 浏览器可接收的压缩算法，如gzip Accept-Language 浏览器可接收的语言，如zh-CN Connection: keep-alive 一次 TCP 连接重复使用 Cookie 每次 http 请求时都会带上 Host 域名 User-Agent 简称 UA，浏览器信息 Content-type 发送数据的格式，如 application/json

常见的 Response Headers

Content-type 返回数据的格式，如 application/json Content-length 返回数据的大小，多少字节 Content-Encoding 返回数据的压缩算法，如 gzip Set-Cookie 服务端需要通过该字段来修改浏览器中的 cookie

自定义 header

应用场景：有些 API 需要在 headers 里面加他们的秘钥

缓存相关的 headers

Cache-Control Expires Last Modified If-Modified-Since Etag If-None-Match

HTTP 缓存

什么是缓存？

把一些没有必要重新获取的资源暂存在客户端

为什么需要缓存？

<ul><li>减少不必要的网络请求,使得页面加载更快；</li><li>网络请求是不稳定，加大了页面加载的不稳定性；</li></ul>

哪些资源可以被缓存？

静态资源（js css img）

webpack 打包时为静态资源加上 hash，hash 是通过资源内容计算的，文件内容修改后会生成新的 hash（新的文件名）

强制缓存（Cache-Control）

<ul><li>在 Response Headers 中，由服务端决定要不要添加</li><li>控制强制缓存的逻辑</li></ul>

Cache-Control 的值

max-age : 最长过期时间（秒） no-cache : 不用本地强制缓存，正常向服务端请求资源，由服务端决定缓存措施 no-store （不常见）: 不用本地强制缓存，也不用服务端的缓存措施（协商缓存），直接由服务端返回新资源 private : 只允许最终用户缓存 pubilc : 用户和中间的代理都能缓存资源

Expires

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

协商缓存（对比缓存）

<ul><li>是服务器端缓存策略，不是将资源缓存在服务器端；</li><li>服务器判断客户端资源，是否和服务端资源一样；</li><li>一致则返回304，否则返回200和最新资源。</li></ul>

资源标识

在 Response Headers 中，有两种： <ul><li>Last-Modified 资源的最后修改时间</li><li>Etag 资源的唯一标识</li></ul>

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

http 缓存 - 综述

缓存在客户端

刷新页面对 http 缓存的影响

<ul><li>正常操作 : 地址栏输入url ,跳转链接,前进后退等（两种缓存都有效）</li><li>手动刷新 : F5/Cmd + R，点击刷新按钮,右击菜单刷新（仅协商缓存有效）</li><li>强制刷新 : Ctrl + F5/Shift + Cmd + R（都失效）</li></ul>

HTTP 相关面试题