目录
浏览器HTTP缓存由HTTP报文的首部字段决定
控制强缓存的字段按优先级介绍
控制协商缓存的字段
整体流程
首页 后端开发 php教程 浏览器缓存机制详细介绍

浏览器缓存机制详细介绍

Jan 25, 2018 pm 02:28 PM
firefox webkit 浏览器

Web缓存可以分为这几种:浏览器缓存、CDN缓存、服务器缓存、数据库数据缓存 。因为可能会直接使用副本免于重新发送请求或者仅仅确认资源没变无需重新传输资源实体,Web缓存可以减少延迟加快网页打开速度、重复利用资源减少网络带宽消耗、降低请求次数或者减少传输内容从而减轻服务器压力。

       这篇文章主要讨论和前端密切相关的浏览器HTTP缓存机制。浏览器HTTP缓存可以分为强缓存协商缓存强缓存协商缓存最大也是最根本的区别是:强缓存命中的话不会发请求到服务器(比如chrome中的200 from memory cache),协商缓存一定会发请求到服务器,通过资源的请求首部字段验证资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的实体,而是通知客户端可以从缓存中加载这个资源(304 not modified)。
浏览器缓存机制详细介绍

浏览器HTTP缓存由HTTP报文的首部字段决定

浏览器缓存机制详细介绍

控制强缓存的字段按优先级介绍

1.Pragma
       Pragma是HTTP/1.1之前版本遗留的通用首部字段,仅作为于HTTP/1.0的向后兼容而使用。虽然它是一个通用首部,但是它在响应报文中时的行为没有规范,依赖于浏览器的实现。RFC中该字段只有no-cache一个可选值,会通知浏览器不直接使用缓存,要求向服务器发请求校验新鲜度。因为它优先级最高,当存在时一定不会命中强缓存。

2.Cache-Control
       Cache-Control是一个通用首部字段,也是HTTP/1.1控制浏览器缓存的主流字段。和浏览器缓存相关的是如下几个响应指令:

指令 参数 说明
private 表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)
public 可省略 表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存
no-cache 可省略 缓存前必需确认其有效性
no-store 不缓存请求或响应的任何内容
max-age=[s] 必需 响应的最大值
  • max-age(单位为s)设置缓存的存在时间,相对于发送请求的时间。只有响应报文首部设置Cache-Control为非0的max-age或者设置了大于请求日期的Expires(下文会讲)才有可能命中强缓存。当满足这个条件,同时响应报文首部中Cache-Control不存在no-cacheno-store且请求报文首部不存在Pragma字段,才会真正命中强缓存。以下所有图片均为刷新(command+R)的截图。

浏览器缓存机制详细介绍
浏览器缓存机制详细介绍
浏览器缓存机制详细介绍

  • no-cache  表示请求必须先与服务器确认缓存的有效性,如果有效才能使用缓存(协商缓存),无论是响应报文首部还是请求报文首部出现这个字段均一定不会命中强缓存。Chrome硬性重新加载(Command+shift+R)会在请求的首部加上Pragma:no-cacheCache-Control:no-cache

  • no-store  表示禁止浏览器以及所有中间缓存存储任何版本的返回响应,一定不会出现强缓存和协商缓存,适合个人隐私数据或者经济类数据。

  • public 表明响应可以被浏览器、CDN等等缓存。

  • private 响应只作为私有的缓存,不能被CDN等缓存。如果要求HTTP认证,响应会自动设置为private

3.Expires
       Expires是一个响应首部字段,它指定了一个日期/时间,在这个时间/日期之前,HTTP缓存被认为是有效的。无效的日期比如0,表示这个资源已经过期了。如果同时设置了Cache-Control响应首部字段的max-age,则Expires会被忽略。它也是HTTP/1.1之前版本遗留的通用首部字段,仅作为于HTTP/1.0的向后兼容而使用。

控制协商缓存的字段

1.Last-Modified/If-Modified-Since
       If-Modified-Since是一个请求首部字段,并且只能用在GET或者HEAD请求中。Last-Modified是一个响应首部字段,包含服务器认定的资源作出修改的日期及时间。当带着If-Modified-Since头访问服务器请求资源时,服务器会检查Last-Modified,如果Last-Modified的时间早于或等于If-Modified-Since则会返回一个不带主体的304响应,否则将重新返回资源。

If-Modified-Since: , :: GMT
Last-Modified: , :: GMT

2.ETag/If-None-Match
       ETag是一个响应首部字段,它是根据实体内容生成的一段hash字符串,标识资源的状态,由服务端产生。If-None-Match是一个条件式的请求首部。如果请求资源时在请求首部加上这个字段,值为之前服务器端返回的资源上的ETag,则当且仅当服务器上没有任何资源的ETag属性值与这个首部中列出的时候,服务器才会返回带有所请求资源实体的200响应,否则服务器会返回不带实体的304响应。ETag优先级比Last-Modified高,同时存在时会以ETag为准。

If-None-Match:
If-None-Match: , , …
If-None-Match: *

浏览器缓存机制详细介绍

ETag属性之间的比较采用的是弱比较算法,即两个文件除了每个比特都相同外,内容一致也可以认为是相同的。例如,如果两个页面仅仅在页脚的生成时间有所不同,就可以认为二者是相同的。

因为ETag的特性,所以相较于Last-Modified有一些优势:

    1.  某些情况下服务器无法获取资源的最后修改时间
    2.  资源的最后修改时间变了但是内容没变,使用ETag可以正确缓存
    3.  如果资源修改非常频繁,在秒以下的时间进行修改,Last-Modified只能精确到秒
登录后复制

整体流程

浏览器缓存机制详细介绍

相关推荐:

必须要了解的php缓存机制

解析php如何利用ob缓存机制实现页面静态化解决方案

PHP 缓存机制


以上是浏览器缓存机制详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何通过CSS自定义resize符号并使其与背景色统一? 如何通过CSS自定义resize符号并使其与背景色统一? Apr 05, 2025 pm 02:30 PM

CSS自定义resize符号的方法与背景色统一在日常开发中,我们经常会遇到需要自定义用户界面细节的情况,比如调...

为什么在Safari中自定义样式表能在本地网页生效,但在百度页面上却无法生效? 为什么在Safari中自定义样式表能在本地网页生效,但在百度页面上却无法生效? Apr 05, 2025 pm 05:15 PM

在Safari中使用自定义样式表的问题探讨今天我们来探讨一个关于Safari浏览器的自定义样式表应用问题。前端新手...

如何在网页上正确显示本地安装的'荆南麦圆体”? 如何在网页上正确显示本地安装的'荆南麦圆体”? Apr 05, 2025 pm 10:33 PM

在网页中使用本地安装的字体文件最近,我从网上下载了一种免费字体,并成功将其安装到了我的系统中。现在...

如何通过JavaScript或CSS控制浏览器打印设置中的页首和页尾? 如何通过JavaScript或CSS控制浏览器打印设置中的页首和页尾? Apr 05, 2025 pm 10:39 PM

如何使用JavaScript或CSS控制浏览器打印设置中的页首和页尾在浏览器的打印设置中,有一个选项可以控制是否显�...

如何在网页上使用本地安装的字体文件? 如何在网页上使用本地安装的字体文件? Apr 05, 2025 pm 10:57 PM

如何在网页上使用本地安装的字体文件你是否在网页开发中遇到过这样的情况:你已经在自己的电脑上安装了一...

负边距在某些情况下为何未生效?如何解决这个问题? 负边距在某些情况下为何未生效?如何解决这个问题? Apr 05, 2025 pm 10:18 PM

负边距为何在某些情况下未生效?在编程过程中,CSS中的负边距(negative...

Flex布局下文字超出省略却撑开容器?如何解决? Flex布局下文字超出省略却撑开容器?如何解决? Apr 05, 2025 pm 11:00 PM

Flex布局下文字超出省略导致容器撑开的问题及解决方法在使用Flex...

如何使用 CSS 和 Flexbox 实现图片和文本在不同屏幕尺寸下的响应式布局? 如何使用 CSS 和 Flexbox 实现图片和文本在不同屏幕尺寸下的响应式布局? Apr 05, 2025 pm 06:06 PM

使用CSS实现响应式布局当我们希望在网页设计中实现不同屏幕尺寸下的布局变化时,CSS...

See all articles