浏览器的缓存机制

强制缓存

​ HTTP响应报文中expires的时间值，是一个绝对值

​ HTTP响应报文中Cache-Control为max-age=600，是相对值

​ Expires

​ Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求的结果缓存的到期时间，即再次发送请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。

​ 到了HTTP/1.1，Expires已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，如果客户端与服务端的时间由于某些原因（时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存直接失效

​ Cache-Control

​ Cache-Control是指将在多少秒之后失效，在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择，所以同时存在时，只有Cache-Control生效。

（1）public：所有内容都将被缓存（客户端和代理服务器都可缓存）

（2）private：所有内容只有客户端可以缓存，Cache-Control的默认取值

（3）no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

（4）no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

（5）max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

协商缓存

​ 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。

​ 协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和Etag / If-None-Match。

Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。

Last-Modified / If-Modified-Since

​ Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间

​ If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。

Etag / If-None-Match

​ Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)

​ If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。

https://www.cnblogs.com/chenwenhao/p/11267238.html#_label0)

对前后端跨域可以说一下吗？如何解决跨域的？ (opens new window)

浏览器 cookie 和 session 的认识。 (opens new window)

输入URL发生什么？ (opens new window)

浏览器渲染的步骤 (opens new window)

页面渲染优化 (opens new window)

强制缓存和协商缓存 (opens new window)

GET 和 POST 请求的区别 (opens new window)

HTTP1.0 / 1.1 / 2.0 及HTTPS (opens new window)

介绍下304过程 (opens new window)

HTTP 状态码 (opens new window)

关于缓存

• 缓存可以解决什么问题？
  1. 减少不必要的网络传输，节约宽带
  2. 更快的加载页面
  3. 减少服务器负载，避免服务器过载的情况出现。
• 为了使缓存策略更加健壮、灵活，HTTP 1.0 版本 和 HTTP 1.1 版本的缓存策略会同时使用，甚至强制缓存和协商缓存也会同时使用，对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接使用缓存，超出有效时间，执行协商缓存策略，对于协商缓存，将缓存信息中的 Etag 和 Last-Modified 通过请求头 If-None-Match 和 If-Modified-Since 发送给服务器，由服务器校验同时设置新的强制缓存，校验通过并返回 304 状态码时，浏览器直接使用缓存，如果协商缓存也未命中，则服务器重新设置协商缓存的标识。
• 强缓存：浏览器如果判断本地缓存未过期，就直接使用，无需发起 http 请求
  • HTTP 1.0 中服务器使用的响应头字段为Expires， 值为未来的绝对时间（时间戳），浏览器请求时的当前时间超过了 Expires 设置的时间，代表缓存失效
  • HTTP 1.1 中 Cache-Control 是最重要的规则，默认为 private，共有 5 种值：
    1. private 私有缓存（表示资源只能被浏览器缓存）
    2. public 共享缓存（表示资源即可以被浏览器缓存也可以被代理服务器缓存）
    3. max-age 缓存的内容将在 xxx 秒后失效
    4. no-cache 需要使用对比缓存来验证缓存数据
    5. no-store 所有内容都不会缓存，强缓存、协商缓存都不会触发
    6. ETag 就是将原先协商缓存的比较时间戳的形式修改成了比较文件指纹
• 协商缓存：第一次请求时服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，服务器端读出文件修改时间，读出来的修改时间赋给响应头的 last-modified 字段，判断成功后，返回 304 状态码
  • HTTP1.0 中 If-Modified-Since/Last-Modified 这两个是成对出现的
  • HTTP 1.1 中 If-None-Match/E-tag 这两个是成对出现的

浏览器存储的方式有哪些

特性	cookie	localStorage	sessionStorage	indexedDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	无限
与服务端通信	每次都会携带在 header，中，对于请求性能影响	不参与	不参与	不参与

cookie 原本并不是用来储存的，而是用来与服务端通信的，需要存取请自行封装 api。 而 localStorage 则自带 getItem 和 setItem 方法，使用很方便。

localStorage 只能存字符串，存取 JSON 数据需配合 JSON.stringify() 和 JSON.parse()。