浏览器缓存机制个人理解

浏览器缓存究竟有什么作用呢?在这里我将浏览器缓存的作用简单地归结为以下几点。

加快页面打开速度
降低服务器压力
减少网络损耗

浏览器缓存有 HTML Meta 标签控制(一般不用,所以本文不介绍)与 HTTP 头信息控制两种。

缓存标识字段便是 ExpiresCache-Control

Expires 是服务器端在响应请求时用来规定资源的失效时间。

Cache-Control 是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。

Expires 是 HTTP 1.0 的字段,而 Cache-Control 是 HTTP 1.1 的字段,当 Expires 与 Cache-Control 同时存在时,Cache-Control 的优先级要高于 Expires。

在浏览器缓存中,还保存了其它关于资源副本的描述字段,这些字段都是服务器返回信息头带过来的,如 Last-ModifiedETag

Last-Modified 是服务器端在响应请求时用来说明资源的最后修改时间。与之对应的是 If-Modified-Since 字段。在服务器再验证过程中,浏览器发送的 HTTP 请求的请求头中会带上 If-Modified-Since 字段,值为该资源 Last-Modified 属性的值。

当服务器端接收到带有 If-Modified-Since 属性的请求时,则会将 If-Modified-Since 属性的值与被请求资源的最后修改时间做对比。如果相同,说明资源没有新的修改,则响应 HTTP 304,浏览器会继续使用原先保存的该资源的副本;如果最后修改时间比较新,则说明资源被修改过,则响应 HTTP 200,并且返回最新的资源。

ETag 是服务器端在响应请求时用来说明资源在服务器端的唯一标识。与之对应的是 If-None-Match 字段。在服务器再验证过程中,浏览器发送的 HTTP 请求的请求头中会带上 If-Modified-Since 字段,值为该资源 Etag 属性的值。

当服务器端接收到带有 If-None-Match 属性的请求时,则会将 If-None-Match 属性的值与被请求资源的唯一标识做对比。如果相同,说明资源没有新的修改,则响应 HTTP 304,浏览器会继续使用原先保存的该资源的副本;如果不同,则说明资源被修改过,则响应 HTTP 200,并且返回最新的资源。

那么当 Last-Modified / If-Modified-Since 和 Etag / If-None-Match 同时存在是什么情况呢?

事实上,当两者同时存在时,Etag / If-None-Match 的优先级要高于 Last-Modified / If-Modified-Since

最后,虽然说浏览器缓存对用户体验有极大的好处,但是作为开发者,我们在开发的时候则需要禁止这「讨厌」浏览器缓存,我的方法是打开浏览器的开发者工具,在 Network 中有个 Disable cache ,钩上就可以了,钩上后浏览器会忽略掉文档过期验证和服务器再验证的过程,直接向服务器请求最新的资源。


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

相关阅读更多精彩内容

  • 浏览器对于请求资源, 流程如图所示: 可以看到浏览器的缓存机制分为两个部分: 1、当前缓存是否过期? 2、服务器中...
    zhoulujun阅读 1,284评论 0 3
  • 浅谈浏览器Http的缓存机制 ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ 针对浏览器的http缓存的分析也算是老生常谈了,每隔...
    meng_philip123阅读 1,127评论 0 10
  • 针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必...
    全端玩法阅读 963评论 0 9
  • 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,...
    浪里行舟阅读 208,929评论 46 521
  • 继续往下写,现在正在写三个以上的球可以消除的内容
    ae0fdc75017d阅读 155评论 0 1

友情链接更多精彩内容