前端常考面试题四：http篇

前言

前端工程师开发界面，要调用后端的接口，提交/获取数据—— http协议，要求事先掌握好ajax

知识点

1.http状态码

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

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

• 关于协议和规范
  就是一个约定
  要求大家都跟着执行
  不要违反规范，例如早期的IE浏览器

2.http methods

①传统的methods

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

②现在的methods

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

③Restful API

• 一种新的API设计方法（早已推广使用)
• 传统API 设计∶把每个url当做一个功能
• Restful API设计:把每个url当做一个唯一的资源

④Restful API — 如何设计成一个资源？

• 尽量不用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

  • Restful API设计
    post请求 /api/blog
    patch请求 /api/blog/100
    get请求 /api/blog/100

3.http headers

要求：能说3~5个

Request Headers

• Accept：浏览器可接收的数据格式
• Accept-Encoding：浏览器可接收的压缩算法，如gzip
• Accept-Languange：浏览器可接收的语言，如zh-CN
• Connection: keep-alive 一次TCP连接重复使用
• Content-type 发送数据的格式，如application/json
• cookie
• Host
• User-Agent(简称UA) 浏览器信息

Connection: keep-alive
1、HTTP keep-alive 也称为 HTTP 长连接。它通过重用一个 TCP 连接来发送/接收多个 HTTP请求，来减少创建/关闭多个 TCP 连接的开销。
2、HTTP 1.0 中默认是关闭的，需要在http头加入"Connection: Keep-Alive"，才能启用Keep-Alive；
HTTP 1.1 中默认启用Keep-Alive，如果加入"Connection: close "，才关闭。
keep-alive详解

cookie
类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息

Response Headers

• Content-type 返回数据的格式，如application/json
• Content-length 返回数据的大小，多少字节
• Content-Encoding 返回数据的压缩算法，如gzip
• Date 原始服务器消息发出的时间
• Set-Cookie 改cookie Cookie原理

自定义header

缓存相关的headers

• Cache-Control   Expires （响应头）
• Last-Modified（响应头）   If-Modified-Since（请求头）
• Etag（响应头）   If-None-Match（请求头）

4.http 缓存

缓存介绍

• Web缓存
  存在于服务器和客户端之间，是一种保存资源副本并在下次请求时直接使用该副本的技术。当Web缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。
• 缓存的好处
  减少了不必要的数据传输，节省带宽
  减少服务器的负担，提升网站性能
  加快了客户端加载网页的速度
  用户体验友好
• 哪些资源可以被缓存?
  静态资源( js css img )

memory cache(内存缓存)：缓存在内存中，读取速度快，一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
disk cache(磁盘缓存) ：缓存在硬盘中，容量大，但读取速度慢些

http缓存策略（强制缓存＋协商缓存) ☆
①强制缓存（客户端）
缓存有效

缓存过期（还是会经过服务器）

Cache-Control

• 服务端觉得这个资源适合被缓存，就会返回cache-control
• Response Headers中，控制强制缓存的逻辑
• 例如Cache-Control: max-age=31536000（单位是秒) 在客户端缓存的时间
• 值
  max-age=xxx：缓存的内容将在 xxx 秒后失效
  no-cache：跳过设置强缓存，但是不妨碍设置协商缓存
  no-store：不缓存，这个会让客户端、服务器都不缓存，也就没有强缓存、协商缓存了
  private： 只让客户端可以缓存该资源；代理服务器不缓存
  public：客户端和代理服务器都可以缓存该资源

关于Expires

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

②协商缓存（对比缓存）（服务端的缓存措施）

• 是服务器端缓存策略
  服务端来判断资源是不是可以被缓存/是不是可以用缓存，不是指资源缓存在服务端
• 服务器判断客户端资源，是否和服务端资源一样
• 一致则返回304，否则返回200和最新的资源

资源标识

• 在Response Headers中，有两种

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

• Etag 资源的唯一标识(一个字符串，类似人类的指纹)
  

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

完整流程图（要求能默画）

拓展：fireFox地址栏输入“about:cache”，可查看缓存文件信息

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

三种刷新操作

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

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

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

常考题

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

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

2.http常见的header有哪些?

（能说3~5个）
Request Headers

• Accept：浏览器可接收的数据格式
• Accept-Encoding：浏览器可接收的压缩算法，如gzip
• Accept-Languange：浏览器可接收的语言，如zh-CN
• Connection: keep-alive 一次TCP连接重复使用
• cookie
• Host
• User-Agent(简称UA)：浏览器信息
• Content-type 发送数据的格式，如application/json

Response Headers

• Content-type：返回数据的格式，如application/json
• Content-length：返回数据的大小，多少字节
• Content-Encoding：返回数据的压缩算法，如gzip
• Set-Cookie 改cookie

缓存相关的headers

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

3.什么是 Restful API

①method表示的操作类型

• get 获取数据
• post 新建数据
• patch/put 更新数据
• delete 删除数据
  ②尽量不用url参数
  ③传统API 设计∶把每个url当做一个功能，Restful API设计:把每个url当做一个唯一的资源

4.描述一下http的缓存机制(重要)