您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

彻底了解http 缓存

强制缓存

  • Expires: new Date().toUTCString(); 即将废弃!!!
    缓存机制:判断本地时间是否大于缓存时间

    缺点:依赖本地时间,如果本地时间有更改,game over。。。
    
  • Cache-Control: max-age=10;
    缓存机制:max-age 定义过期时间,时间一到就过期,单位秒。

     缺点:无法判断请求内容是否过期。
    

协商缓存

  • Cache-Control:no-cache; last-modified: 文件更新时间
    缓存机制:通知浏览器使用协商缓存, 并且发送 last-modified (最后一次文件更新时间etime)给浏览器。浏览器下次请求携带if-modified-since 给服务器, 服务器判断if-modified-since是否与文件更新时间etime一致,决定是否采用缓存,返回304,告知浏览器使用缓存。

    缺点:文件更新时间etime无法判断文件是否更改。

    文件无更改:文件原本内容为console.log(111), 更改为console.log(111222);
    接着变更文件为console.log(111), 此时内容无更改

  • Cache-Control:no-cache; etag: 内容更新时间
    缓存机制:通知浏览器使用协商缓存, 并且发送 etag (基于文件生成的时间戳etag(文件))给浏览器。浏览器下次请求携带if-none-match 给服务器, 服务器判断if-none-match是否与文件etag一致,决定是否采用缓存,返回304,告知浏览器使用缓存。

    优点: 能准确判断内容是否更新。

vue、React 等框架如何使用缓存机制

建议 html 文件使用协商缓存、而 js、css、img…等使用强制缓存。

原因:

  1. 一般都是html 中加载了其他js、css、img 文件,所以使用协商缓存
  2. js、css、img 文件打包后一般会更改命名:a. + hash + .js, 一般使用webpack 打包后都会基于文件生成hash, 如果文件未改变,hash也不会改变,而不同的名称会发起新的请求。

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进