浏览器缓存

TreacherousZ
116 阅读3分钟

比如localStorage, sessionStorage, cookis这种缓存用户数据服务器处理http请求，再通过http传输数据，传输数据需要带宽，带宽是要向服务商花钱买的，通过缓存去存储一些静态资源就能省很多钱

可以解决的问题：

  1. 减少不必要的网络传输，省钱
  2. 更快的加载页面
  3. 减少服务器负载

缺点：占内存，因为一些缓存会被存到内存当中

缓存又分为强制缓存和协商缓存，通常有哈希值的文件设置强缓存，没有哈希值的文件如index.html设置为协商缓存

哈希值强缓存：因为哈希值是需要webpack自动生成的，比如一些css如果我们更改了内容才会才生新的哈希值

index.html协商缓存：一般情况下index.html不会产生哈希值，因此采用协商缓存

强制缓存

浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK

实现方法

  1. Cache-control 下面的意思为，从该资源第一次返回的时候开始，往后的10s内如果该资源再次被请求，则从缓存中读取
//往响应头中写入需要缓存的时间
res.writeHead(200,{
    'Cache-Control':'max-age=10'
});

（1）max-age：用来设置资源（representations）可以被缓存多长时间，单位为秒；
（2）s-maxage：和max-age是一样的，不过它只针对代理服务器缓存而言；
（3）public：指示响应可被任何缓存区缓存；
（4）private：只能针对个人用户，而不能被代理服务器缓存；
（5）no-cache：强制客户端直接向服务器发送请求,也就是说每次请求都必须向服务器发送。服务器接收到     请求，然后判断资源是否变更，是则返回新内容，否则返回304，未变更。这个很容易让人产生误解，使人误     以为是响应不被缓存。实际上Cache-Control:     no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。
（6）no-store：禁止一切缓存（这个才是响应不被缓存的意思）。

协商缓存

向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存。如果命中则返回304并带上新的的response header通知浏览器从缓存中读取资源

协商缓存的资源标识符

基于last-modified的协商缓存——比较时间戳

  1. 读取资源

  2. 读取修改时间 记下这个资源的最后修改时间，Last-Modified

  3. 读取第一次返回给客户端的文件修改时间If-Modified-Since

  4. 比较第一次修改的时间和资源文件当前的修改时间是否一致

    1. 如果一致，说明文件没有被修改过，返回304，也不许返回新的data

  5. 设置文件最后的修改时间

  6. 设置协商缓存策略

基于ETag实现的协商缓存——比较文件指纹

根据文件内容几窜出唯一的哈希值，文件内容一旦改变则指纹改变

avatar
文章
阅读
粉丝