前端面试题 — http

xw2327
69 阅读9分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

题目

  • http 常见的状态码有哪些？
  • http 常见的 header 有哪些？
  • 什么是 Restful API
  • 描述一下 http 的缓存机制（重要）

1. http 常见的状态码有哪些？

1.1 状态码的分类

  • 1xx 服务器收到请求

  • 2xx 请求成功，如 200

  • 3xx 重定向，如 302

    就是 我这不管了 我告诉你个地址，你去别的地方去

  • 4xx 客户端错误, 如 404

  • 5xx 服务端错误, 如 500

1.2 常见的状态码

  • 200 成功

  • 301 永久重定向（配合 location（新的地址），浏览器制动处理）

    比如说自己的网站过期了，或者想换域名了，这个时候自己的老域名就会返回一个新的状态码，然后返回一个 location 一个新的域名

  • 302 临时重定向（配合 location（新的地址），浏览器制动处理）

    只是这次去访问一个新的地址，那我下次还是去访问老地址，看看有什么指令给我，或者说是不访问新的地址了，或者是location变了

  • 304 资源未被修改

    我们要去想服务端请求一个资源（js.css.json,html），这个时候服务端向你返回一个200，表示请求成功了，但是，如果你的浏览器请求过了（今天已经请求过了），你发送了一个一样的请求，服务端有可能会返回一个304，表示说 你刚刚的请求的资源已经请求过了，你的资源跟我这是一样的，你可以继续用你本地缓存的结果

  • 403 没有权限 服务器拒绝请求

  • 404 服务器找不到请求的网页

  • 500 服务器错误，无法完成请求

  • 504 网关超时

    你能访问第一台服务器，但是第一台服务器连接其它服务器的时候 连接超时了

1.3 关于协议和规范

  • 就是一个约定
  • 要求大家都跟着执行
  • 不要违反规定，例如 IE 浏览器

2. http 常见的 header 有哪些？

2.1. 常见的 Request Headers

  • Accept 浏览器可接收的数据格式

  • Accept-Encoding 浏览器可接受的压缩算法，如 gzip

    可以用gzip压缩一下，就可以传输比较快，浏览器告诉服务器我可以接受gzip这个算法,浏览器就会根据 Accept-Encoding 去压缩 一般用gzip就可以了 这是前后端都通用的

  • Accept-Languange 浏览器可接受的语言，如 zh-CN 中文

  • Connection:keep-alive 一次 TCP 连接重复使用

    我们和服务端建立了连接之后，我们就可以重复的去使用这个连接，把资源一次性解决完成，保持一个效率

  • cookie

    我们同域请求一个资源的时候，都会把cookie带上

  • Host：请求域名是什么

  • User-Agent（简称 UA ）浏览器信息

    能标识出你是什么样的浏览器，甚至是什么样的系统

  • Content-type 发送数据的格式，如 application/json

    比如说客户端要post发送数据的时候，会告诉服务端我们要的数据是什么格式的

2.2. 常见的 Response Headers

  • Contnet-type 返回数据的格式，如 application/json

    服务端向客服端返回了是什么格式

  • Content-length 返回数据的大小，多少字节

  • Content-Encoding 返回数据的压缩算法，如gzip

    服务端压缩之后还会通过 Content-Encoding 告诉你压缩的是什么格式 客户端就会像浏览器自动的去用压缩算法去解压，就可以用了

  • Set-Cookie 服务端要去改 Cookie 的时候，要通过 Set-Cookie 把 Cookie 改掉

2.3. 自定义 header

  • headers:{'x-Requested-With' : 'XMLHttpRequest'}

2.4. 缓存相关的 headers

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

后面会讲

3. 什么是 Restful API？

3.1. http method

3.1.1. 传统的 methods

  • get 获取服务器的数据
  • post 向服务器提交数据

简单的网页功能，就这两个操作

3.1.2. 现在的 methods

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

3.1.3. Restful API

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

如何时机成一个资源？

  • 尽量不用 url 参数

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

  • 用 method 表示操作类型（传统 API 设计）

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

  • 用 method 表示操作类型（Restful API 设计）

    • post 请求：/api/blog
    • post 请求：/api/blog/100
    • get 请求： /api/blog/100

4. http 缓存（重点）

4.1 关于缓存的介绍

4.1.1 什么是缓存 ?

什么可以把一些 没必要 重新获取 的 东西 重新获取

4.1.2 为什么要缓存？

我们要让页面加载的更快一些 你的CPU 页面的渲染都是很快的（毫秒级别） 但是网络请求的加载，特别是请求MySQL 这对CPU的计算和对页面的渲染都是很慢的 要尽量减少网络请求的数量 才能让页面加载更快一些 同理：我们把网络请求变得更快一些 那我们加载的更快一些

4.1.3 哪些资源可以被缓存？—— 静态资源（ js css img ）

网站的html不能被缓存 因为时刻要保持最新的 比如博客信息 我们的业务数据也是不能被缓存的

但我们的静态支援可以被缓存 因为缓存完毕后，不会改变了

4.2 http 缓存策略（强制缓存 + 协商缓存）

4.2.1 缓存机制

浏览器像服务器初次发起请求，请求成功了 服务器请求成功了 就会像浏览器返回资源 并加一个 Cache-Control 表示被缓存了，如果没有请求成功，就不会加 Cache-Control

image.png

image.png

image.png

当浏览器再次请求服务器的时候，会直接请求本地缓存 本地缓存肯定比服务器请求要快

image.png

disk cache 表示本地缓存的意思，没有去请求服务端 我们可以看到 Time 显示 3 毫秒 非常的快

image.png

如果有一天，时间太长了，缓存失效了 那么浏览器就会再次去请求服务端，服务端会重新返回资源和 Cache-Control 就又设置了一边过期时间

4.2.2 cache-control 的值

  • max-age：设置缓存的最大过期时间
  • no-cache：不用本地缓存 服务端怎么做我们不管
  • no-store：我们不用本地缓存 而且我们不用服务端的一些缓存措施
  • private：我们只能允许最终用户做缓存
  • public：允许中间的一些路由，代理做缓存

4.2.3 Expires

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

Cache-Control 和 Expirse 都可以被浏览器兼容，如果两个一起出现，以 Cache-Control 为主

4.3 http 缓存 — 协商缓存

  • 服务器端缓存策略

    我们这个资源到了服务端之后，服务端告诉我这个资源没有改变，你可以直接用本地的就可以了，不用让我再给你一份了 也就是说 服务端判断这段资源能不能用缓存的内容，而不是说这个资源缓存到服务端

  • 服务端判断客户端资源，是否和服务端资源一样

  • 一致则返回 304 ，否则返回 200 和最新的资源

image.png

4.3.1 资源标识

  • 在 Response Headers 中，有两种

    服务端返回的永远会在 Response Headers 里面

  • Last-Modified 资源的最后修改时间

    初次请求的时候 服务器会返回资源和 Last-Modified(最后修改的时间) 当浏览器再次向服务器发送请求的时候，请求头会带着 If-Modified-Since(也就是 Last-Modified 的键 它们两个的值是一样的 If-Modified-Since => Last-Modified) 然后服务器会通过这个值来判断是不是一样来返回 304 或者 新的 Last-Modified用与下次判断过期时间

image.png

  • Etag
    资源的唯一标识（一个字符串，类似人类的指纹） 浏览器向服务器初次请求的时候，如果成功，服务器会向浏览器返回资源和Etag 浏览器会记录下来 当再次请求的时候 会带一个 If-None-Match ，它的值其实求生上一次 Etag 这个字符串，当服务端看到他有 If-None-Match 这个值 他会重新计算资源并根Etag做对比，如果这个资源没有变过的话，那么 Etag 就不会变 就会返回 304 如果变过的话，会返回新的资源和 Etag

image.png

Last-Modified 是通过时间来做对比

Etag 是通过类似于指纹一样的唯一标识来做对比

image.png

image.png

4.3.2 Last-Modified 和 Etag 共存

  • 有限使用 Etag
  • Last-Modified 只能精确到秒级 （秒级对于计算机来说算是蛮宽泛的 因为计算机用毫秒）
  • 如果资源被重复生成，而内容不变，则 Etag 更精确

image.png

4.4 刷新操作方式，对缓存的影响

4.4.1 三种刷新操作

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

4.4.2 不同刷新操作，不同的缓存

  • 正常操作：强制缓存有效，协商缓存有效

  • 手动刷新：强制宣传失效，协商缓存有效

  • 强制刷新：强制缓存失效，协商缓存失效

    也就是说 不管多慢，也要给你最新的结果，所有的全部失效，全部返回200 返回最新的资源

小结

  • 强制缓存 Cache-Control

    这个必须要理解，掌握，面试中很有可能会考的

  • 协商缓存 Last-Mondified 和 Etag ，304 状态码

    这两种缓存必须了解 304 状态码必须要知道

  • 完整的流程图

    流程图必须自己画出来

\

avatar
文章
阅读
粉丝