浏览器缓存

浏览器缓存对于复杂程度比较大的应用来说是非常重要的

优点

• 减少带宽
• 减少服务器压力(不用每次都发送请求到服务器)
• 提升性能(加载本地缓存资源要比加载服务器的速度要快)

  缓存方式

• 强缓存

  用户发送的请求，直接从客户端缓存获取，不发送请求到服务器，不与服务器发生交互行为

• 协商缓存

  用户发送请求到服务器，让服务器确认是否要从浏览器缓存中读取缓存

共同点：客户端获得的数据最后都是从客户端缓存中获得。
两者的区别：从名字就可以看出，强缓存不与服务器交互，而协商缓存则需要与服务器交互。

一张图解析缓存的机制

文字解答

• expires
  Http1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。
  可以看到过期时间被设定为了：Thu, 28 Sep 2017 06:38:37 GMT
  存在的问题：服务器时间与客户端时间的不一致，就会导致缓存跟期待效果出现偏差。

• Cache-Control
  Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。
  简单介绍下Cache-Control的属性设置。
  1）max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires
  2) s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于普通缓存，
  而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires.
  3) public：响应会被缓存，并且在多用户间共享。默认是public。
  4) private: 响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。
  5）no-cache: 指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。
  6）no-store: 绝对禁止缓存。
  7）must-revalidate: 如果页面过期，则去服务器进行获取。

  http状态码

• 100 表示http发送了http header后，服务器返回的一个状态值
• 200 表示请求正常
• 201 表示服务器收到请求，并且在服务器创建了资源
• 202 服务器收到请求，但是尚未处理
• 301 请求被移动到新的地址(比如：域名换了，那我们直接在nginx服务器上设置当访问老域名的时候重定向到新的域名return 301 new url;还有就是我们输入地址默认是使用http协议，我们可以在服务器上设置重定向到https协议)
• 302 资源展示转移（比如：短连接跳转到长连接）
• 303 临时性重定向，但总是使用get请求新的uri
• 304 资源没有被修改过
• 400 必要的参数丢失或者参数格式不正确
• 401 请求需要授权
• 403 请求成功，但是服务器拒绝提供服务
• 404 请求资源不存在，可能是url输入错误
• 500 请求服务器错误（可能是代码异常但是没有被成功捕获，被tomcat服务器捕获了），当服务彻底挂掉了，连返回都没有的时候，那么就会出现502
• 502 bad gateway 网关错误（可能是因为nginx收到请求，但是请求没有打过去，可能是因为业务服务挂掉了，或者是打过去的端口号错了）
• 503 服务器过载，这种就是高并发会出现的问题，同时有很多人在同一时间访问
• 504 网关超时(服务器请求太久，比如php规定的时间为30s只要超过这个时间就会返回504)

  总结

• 过程执行完后，如果判定为未过期，则使用客户端缓存，那么就是属于“强缓存”
• 否则就是协商缓存，跟服务器协商是否使用缓存，浏览器会向服务器发送请求，同时如果上一次的缓存中有Last-modified和Etag字段，浏览器将在 header中加入If-modified-since(对应Last-modified表示请求的资源上一次的修改时间)和If-none-match(对应Etag,资源的内容表示符，一般用md5或者一段hash值)，协商缓存中最后服务器会将Cache-control\expire\last-modified\date\etag

上一篇：冒泡和去重

下一篇：js执行机制