加入收藏 | 设为首页 | 会员中心 | 我要投稿 东莞站长网 (https://www.0769zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长资讯 > 评论 > 正文

浅谈浏览器缓存

发布时间:2021-04-18 13:37:43 所属栏目:评论 来源:互联网
导读:览器缓存即 http 缓存,将请求过的数据(html、css、js)存在浏览器(本地磁盘)中,当再次访问这些资源时可以从本地直接加载,减少服务端请求 服务端通过设置 http 响应头来决定缓存策略(缓存方式) 缓存流程 第一次请求需要的资源,服务器返回资源的同时在 resp
  • 览器缓存即 http 缓存,将请求过的数据(html、css、js)存在浏览器(本地磁盘)中,当再次访问这些资源时可以从本地直接加载,减少服务端请求
  • 服务端通过设置 http 响应头来决定缓存策略(缓存方式)

缓存流程

  • 第一次请求需要的资源,服务器返回资源的同时在 response hearder 响应头中添加了缓存策略,告诉浏览器缓存规则(比如以何种方式缓存,缓存信息......),此时就进行缓存了
  • 第二次如果是请求相同资源,那么就会检查缓存里面是否有相应资源,有的话直接取用,具体方式请看后续

缓存位置

  • 先谈谈缓存都会存在哪,然后引出缓存方式进一步说明

Service Worker

  • 可以让我们自由控制缓存哪些文件、如何匹配/读取缓存,并且缓存是持续性的
  • 离线缓存调用的就是 Service Worker

Memory Cache

  • 内存中的缓存,关闭页面就会失效

Disk Cache

  • 硬盘中的缓存
  • 资源存进硬盘的情况
    • 大文件(大概率)
    • 此时内存利用率较高

Push Cache

  • 推送缓存:以上三种缓存都没命中时,才启用
  • 它只在会话(Session)中存在,会话结束就会释放,缓存时间很短

如果以上四种缓存都没被命中,就只能发起请求了。所以为了性能考虑,选择好缓存方式极为重要

缓存方式

协商缓存

  • 缓存方式就两种
    • 强缓存(默认优先)
    • 协商缓存(协商,也就是商量的意思)
  • 先介绍一个响应头中重要的值 Cache-Control,用于控制网页缓存,有如下主要取值
    • public:响应可以被客户端和代理服务器缓存
    • private(默认取值):响应只有客户端可以缓存
    • no-cache:直接进入协商缓存阶段
    • no-store:不进行任何缓存
    • max-age = xxx(xxx 代表数字):缓存内容在 xxx 时间后失效
    • must-revalidate:告诉浏览器
  • 浏览器查看响应头的方法(新版 edge 为例):右键选择 
  • 就失效
  • 触发条件,Cache-Control 的值 max-age = xxx
  • 响应头 Expires 存储缓存过期时间(如果修改本地时间会造成缓存失效)
    • 概念:需要携带缓存标识(tag)发送 http 请求,由服务器判断是否使用缓存。服务端会进行判断,若资源已发生变化,则返回新资源,否则告诉浏览器启用缓存即可
    • 触发条件(两个)
      • 强缓存过期
      • Cache-Control 的值包含 no-cache
    • 缓存标识由响应头 Last-Modified、ETag 决定(简述一下)AX
      • Last-Modified 用于记录资源最后修改时间,浏览器再次请求时用来对比时间,以此判断资源是否变化
      • ETag存储一个字符串(类似标识符),只要资源修改了标识符就会变动,以此判断资源是否变化

(编辑:东莞站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读