• 浏览器缓存的一些知识


    1,缓存的作用

      缓存可以优化性能,应该是最简单的一种方式了,可以减少一些不必要的请求,或者在数据一致的情况下,不再将数据回传回来。

    2,缓存位置

      缓存位置有四种,各自有优先级,当四种都没有命中时,才会去请求网络

    • service worke : 我们可以来手动控制缓存哪些文件,如何匹配和读取缓存。不管service worker命中缓存与否。该请求浏览器上都显示的from service worker。
    • memory cache: 内存中的缓存,读取速度比磁盘中的缓存快很多,但是持续时间短,会随着进程的释放而释放。
    • disk cache: 硬盘中的缓存,读取速度慢,但容量大,存储时间很长。会根据header中的字段判断哪些需要缓存,哪些资源过期了需要请求,哪些资源可以不请求直接使用。
    • push cache:http2中的内容。当以上三种都没有命中时才使用。缓存时间短,会话结束就被释放。

    3,缓存策略

      一:强缓存:强缓存可以通过设置header的Expires和Cache-Control,表示在缓存期间不用请求,status为200

        1,Expires

          Expires: Fri, 17 Dec 2021 11:11:00 GMT
          
          表示在2021年12月17 11:11:00后会过期,需要再次请求。判断是基于本地时间处理的,修改本地时间会造成缓存过期

        2,Cache-Control

          Cache-control: max-age=60

          优先级高于Expires,表示在60秒后过期,需要再次请求。

      

      二:协商缓存:缓存过期,就需要发起请求验证资源是不是更新了。可以通过设置header的Last-Modified和ETag

        1,Last-Modified和If-Modified-Since

          Last-Modified为本地文件最后修改日期,If-Modified-Since会发送该值查询是否有更新,如果有更新则返回更新的资源,否则返回304状态码

          本地打开缓存文件,即使没修改也会造成Last-Modified被更改,浪费请求

          Last-Modified只能以秒计时,如果在1秒之内的改变文件,服务端还是会以为文件没有改变,不能获取最新资源

        2,ETag和If-None-Match

          优先级比Last-Modified高,ETag类似文件指纹,If-None-Match会将ETag发送到服务端,如果指纹有改变,则返回新的资源。

    4,实际使用

      对频繁变动的资源,Cache-Control设置为no-cache使每次都发送请求,再配合ETag和Last-Modified来验证资源是否过期。

      代码文件: 文件名进行hash处理,Cache-Control设置时间为一个长时间,这样的话只有当hash变化的时候才去请求新资源,否则就一直使用缓存资源      

  • 相关阅读:
    脚本 页面截取
    net Email 发送(借助第三方)
    查询表、存储过程、触发器的创建时间和最后修改时间(转)
    ActionScript简介
    mysql 1064 USING BTREE问题
    浅谈SQL SERVER函数count()
    程序员学习能力提升三要素
    构建杀手级应用的 JavaScript 框架、工具和技术
    javascript刷新页面方法大全
    html页<![if IE]>...<![endif]>使用解说
  • 原文地址:https://www.cnblogs.com/wjyz/p/15697783.html
Copyright © 2020-2023  润新知