浏览器缓存机制简单概括和分析

浏览器缓存:

对于访问的页面和请求,为了缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷,浏览器和服务器都有可能会对请求资源进行缓存,接下来的文章就简单介绍和分析浏览器的缓存机制。


浏览器缓存机制

概括和分析

深入理解浏览器的缓存机制: https://www.jianshu.com/p/54cc04190252

作者:浪里行舟

来源:简书

这篇文章已经有详细的讲解,这里就概括一下:

以简书首页的请求为例:

1、强制缓存策略(Expires和Cache-Control):当浏览器发起http请求的时候,如果配置了缓存策略且缓存在有效期内,会直接使用浏览器缓存。不使用强制缓存Cache-Control=no-chache, 或者 max-age=0 

简书首页的请求

    (1)、图中请求服务器:是max-age=0 的情况,浏览器直接请求服务器资源,而不是用本地缓存

    (2)、图中磁盘缓存和内存缓存:就是浏览器使用了本地缓存而不再请求服务器资源

2、协商缓存策略(Last-Modified和If-Modified-Since, ETag和If-None-Match):当浏览器发起http请求的时候,如果强制缓存策略失效,或者者禁用了强制缓存,这时候会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比,如果没有变化,返回304和空的响应体,直接从缓存读取,如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间,说明文件有更新,于是返回新的资源文件和200。

不使用协商缓存Cache-Control=no-store),这个参数同时也会禁用强制缓存。

    (1)、服务器资源返回无更新,浏览器使用上次请求的资源

协商缓存有效

(2)、服务器资源有更新,返回200并返回最新的资源

协商缓存失效,服务器重新返回资源

3、不使用缓存策略(Cache-Control=no-store):所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存。当response head 设置了no-store,浏览器不会对返回的资源做缓存,每次请求都是直接请求服务器。这可以保证浏览器每次都能拿最新的资源,即使资源对比上次请求没有任何更新,但同时也降低了页面的响应速度,和增加了网络的IO与服务器的压力。

可以明显的看到请求时间,请求服务器资源时间 >> 请求磁盘缓存 > 请求内存缓存,所以合适的缓存策略,可以在不影响业务的情况下,极大地提升客户体验和后台服务器压力。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容