浏览器缓存策略

在优化网站性能的时候,浏览器缓存是一个很重要的策略,他会去缓存一些很少更新的图片资源,js资源等。减少浏览器和服务器的资源传输。极大的优化了网站的呈现时间.主要有协商缓存和强制缓存两种方式。

第一次请求服务器,浏览器无缓存,直接去服务器拿资源:


image.png

第二次请求服务器,判断是否过期,没有过期采用强缓存,过期采用协商缓存策略。
过期的判断规则和服务器决策策略规则在图中有写出


image.png

网上有很多关于这方面的描述,我只是把图重新自己整理了下,梳理了思路

参考:https://segmentfault.com/a/1190000008956069

Cache-Control

Cache-Control是在http1.1中出现的,主要是利用该字段的max-age值来进行判断,它是一个相对时间,例如Cache-Control:max-age=3600,代表着资源的有效期是3600秒。cache-control除了该字段外,还有下面几个比较常用的设置值:

  • no-cache:不使用本地缓存。需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ETag,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。

  • no-store:直接禁止游览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。

  • public:可以被所有的用户缓存,包括终端用户和CDN等中间代理服务器。

  • private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存。
    Cache-Control与Expires可以在服务端配置同时启用,同时启用的时候Cache-Control优先级高。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 当浏览器请求一个网站的时候,会加载各种各样的资源,比如:HTML文档、图片、CSS和JS等文件。对于一些不经常变的...
    LUGY阅读 4,421评论 0 0
  • 最近在对项目做 IE 11 兼容,由 IE 的缓存问题,引发我对于浏览器缓存策略的思考。 缓存类型 web缓存主要...
    丶chlorine阅读 4,284评论 0 1
  • 今天的主题让我想起了过去的无知和愚蠢,不过谁不是一点点进步的了~ 有一次,向开发提了一个web端的bug,回归后还...
    最爱西红柿阅读 2,999评论 0 0
  • 在前端开发中,性能一直是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速...
    meow_possion阅读 5,261评论 0 0
  • 今天看奇舞团推了篇文章讲缓存策略的,讲的挺不错,记录一下。 原文地址就在下面。 总结: 缓存分为强缓存和协商缓存...
    NowhereToRun阅读 10,285评论 1 7