浏览器缓存机制-社招必问知识

浏览器缓存总共有5个方法:

1.Pragma关键字,这是非HTTP协议定义的缓存机制,使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。使用上很简单,但只有部分浏览器可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。因此当服务器前面有代理缓存服务器存在时,pragma关键字不会有作用,意思就是会使用代理服务器上的缓存数据。

2.Expires策略。HTTP协议定义的缓存机制。Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。Expires返回来的过期日期是服务器的时间,是绝对时间。有可能客户端的时间跟服务器的时间不一致,会导致过期时间不准确。Expires (Pragma也是)是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1。但是HTTP 1.1兼容HTTP 1.0的东西。因此也可以使用Expires策略。

3.Cache-control策略。HTTP1.1协议定义的缓存机制。控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。其优先级高于Expires。Cache-control有很多设置的值,最常用的是max-age,它是相对时间,比如:cache-control:max-age=300,意思就代表300秒之内的正常浏览器请求(不是使用F5,CTRL+F5刷新),可以使用浏览器缓存。cache-control有很多关键字设置,如果要进大公司就必须知道这些关键字的意义。因此校招生可以略过:

public   (仅为响应标头)

指示响应可被任何缓存区缓存。没过期时,每次请求都取缓存。

private  (仅为响应标头)

指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。被缓存在私有缓存中,此响应消息对于其他用户的请求无效(不会使用缓存)。

跟must-revalidate一样,没过期时,第一次需要验证服务器。

no-cache  (请求,响应都有)

指示请求不使用缓存,它必须与源服务器校验。会存储返回的数据。每次都验证服务器。会考虑服务器缓存验证。

no-store  (请求,响应都有)

指示请求不使用缓存,并且不存储返回的数据。每次都验证服务器。且request并没有发送"If-Modified-Since"和"If-None-Match"头,不会考虑服务器缓存验证。

max-stale   (请求,响应都有)

如果max-stale后面带有值,则客户端不能接受过期时间超过这个值的响应,如果没有值,则可以接受任何时候的过期响应。意思是,我允许缓存者,发送一个,过期不超过指定秒数的(max-stale),陈旧的缓存给我。

min-fresh   (仅为请求标头)

客户机可以接收响应时间小于当前时间加上指定时间的响应(缓存的过期时间)。也就是说:min-fresh:300秒,当前时间是2014-4-15 14:14:20   那么,如果缓存的过期时间大于当前时间+300秒,就用缓存,如果小于,则请求服务器,不使用缓存。

must-revalidate   (仅为响应标头)

当一个must-revalidate 指令出现在响应中时,cache 在首先从源头服务器那里重新刷新之前,不可以使用这个不新鲜的条目。

如果缓存没过期,第一次请求时(用户之前请求过服务器,并且缓存了数据,并且关闭了浏览器窗口,然后用户再一次打开浏览器,访问同一服务器,由于缓存没过期,正常情况会使用缓存,但是由于有must-revalidate ,因此被标为第一次请求。),浏览器重新发送请求到服务器(服务器验证);此后,浏览器呈现来自缓存的页面。

如果缓存过期,并且向服务器验证时,服务器无法连接上,这时不允许返回一个不新鲜的缓存副本,而会返回504网关超时错误。

Cache-Control : no-transform  (请求,响应都有)

当用户请求或者响应时,文件都不应该被转换格式。

.only-if-cached:(仅为请求标头)    
        请求:告知缓存者,我希望内容来自缓存,我并不关心被缓存响应,是否是新鲜的.
.s-maxage(仅为响应标头)    
        响应:与max-age的唯一区别是,s-maxage仅仅应用于共享缓存.而不引用于用户代理的本地缓存,等针对单用户的缓存. 另外,s-maxage的优先级要高于max-age.

.cache-extension   (请求,响应都有)

(cache-extension是一个泛化的代称.它指所有自定义,或者说扩展的,指令,客户端和服务器端都可以自定义扩展Cache-Control相关的指令.)    那么,实际上我们可以这样 Cache-Control:max-age=300, custom-directive = xxx, public. 这样我们就定义了一个被统称为cache-extension的扩展指令.该指令如果对应的客户端或服务器端,不认识,就会忽略掉.

.proxy-revalidate(仅为响应标头)    
        响应:限制上与must-revalidate类似.区别在于受体的范围.proxy-revalidate,是要排除掉用户代理的缓存的.即,其规则并不应用于用户代理的本地缓存上.

4.Last-Modified/If-Modified-Since

服务端的缓存验证机制,这是http1.0的缓存机制。 Last-Modified:标示这个响应资源的最后修改时间(绝对时间)。web服务器在响应请求时,告诉浏览器资源的最后修改时间。 If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age,或者expires过期时),发现资源具有Last-Modified声明,则再次向web服务器请求时,带上头 If-Modified-Since,表示请求时间。web服务器收到请求后发现有头If-Modified-Since, 则与被请求资源的最后修改时间进行比对。若最后修改时间较新(与If-Modified-Since的时间不同),说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),HTTP 200;若最后修改时间较旧(与If-Modified-Since的时间相同),说明资源无新修改,则响应HTTP 304 (无需包体,节省流量),告知浏览器继续使用所保存的cache。

缺点:Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间。

如果某些文件会被定期生成,有时,当内容没有任何变化,但Last-Modified改变了,使用此缓存机制,会返回200,并告知浏览器你缓存的文件不是最新的(其实内容是一样的,只是时间不一样),增加流量。

有可能存在服务器没有准确获取文件最后修改的时间,导致此缓存机制没有起到作用。或者与代理服务器时间不一致等情形(这里点到为止,代理服务器,反向代理服务器,CDN等,这些都有可能缓存数据,都有可能时间不一致,这里面试官不会问,即便问了,面试官也不会非常清楚)。

5.Etag/If-None-Match

服务端的缓存验证机制,这是http1.1的缓存机制。优先级大于Last-Modified。服务器会优先验证ETag。

Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定,一般就是hash值)。

If-None-Match:当资源过期时(使用Cache-Control标识的max-age或者expires过期时),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match (Etag的值)web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,决定返回200或304

这是从别人那里弄来的一张图,只验证了F5和Ctrl+F5.


用户操作


Expires/Cache-Control


Last-Modified/Etag


地址栏回车


有效


有效


页面链接跳转


有效


有效


新开窗口


有效


有效


前进、后退


有效


有效


F5刷新


无效


有效


Ctrl+F5刷新


无效


无效

加油!

时间: 2024-11-12 15:00:59

浏览器缓存机制-社招必问知识的相关文章

浏览器缓存机制浅析

非HTTP协议定义的缓存机制 浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires: Cache-control等).但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下: <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 上述代码的作用是告诉浏览器当前页面不被缓存,每

浏览器缓存机制详解

对于浏览器缓存,相信很多开发者对它真的是又爱又恨.一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了"错误"的东西,而在开发过程中千方百计地想把缓存禁掉.那么浏览器缓存究竟是个什么样的神奇玩意呢? 什么是浏览器缓存: 简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中.缓存会根据进来的请求保存输出内容的副本.当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是

浏览器缓存机制

最近在做项目过程中需要对部分文件数据进行缓存,于是整理一些关于浏览器缓存机制的信息 概要总结:1.Expires 过期时间2.Cache-Control 缓存机制 [max-age=300]缓存时间 300 表示5分钟3.Last-Modified 最后修改时间 对应在请求头部有If-Modified-Since4.Etag 唯一标识 由服务器生成 对应在请求头部有If-No-Match优先级:Etag > last-modified > Expires 浏览器缓存机制,其实主要就是HTTP协

浏览器缓存机制(2)-应用缓存

浏览器缓存机制(2)-应用缓存 在公司项目中,一些移动版的WEB页面恰好用到了应用缓存,故顺便写篇文章来总结下应用缓存方面的内容. 1.应用缓存简介 应用缓存(application cache)是HTML5提供的一套缓存机制,使得WEB应用可以离线运行.除了一些旧版本的IE外,现代浏览器如firefox,chrome,safari大部分都是支持HTML5标准的.使用应用缓存主要优势有: 离线浏览:用户可以在离线状态浏览网页内容. 速度更快: 因为数据存储在浏览器缓存中,浏览器只会下载服务器发生

Java缓存学习之二:浏览器缓存机制

浏览器端的九种缓存机制介绍 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景.打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制. 一.http缓存 http缓存是基于HTTP协议的浏览器文件级缓存机制.即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从

浏览器缓存机制(1)

浏览器缓存机制之一(经典缓存) 因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理.周末天气不好,懒得出去了,正好找时间总结下. 1.关于浏览器缓存 记得去年看<HTTP权威指南>的时候,有一章是专门讲浏览器缓存的,一年时间过得太快,逝去的时光还真是如同人群中消失的好姑娘,眼看她嫁给别人.我这里把浏览器缓存分为经典的浏览器缓存(以下简称为经典缓存)和HTML5应用缓存这两类. 经典的浏览器缓存其实主要

atitit。浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结

atitit.浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结 1. 缓存的一些机制 1 1.1. http 304 1 1.2. 浏览器刷新的处理机制 1 1.3. Expires 2 1.4. Cache-Control 2 1.5. Last-Modified/E-tag 3 1.6. Etag 主要为了解决 Last-Modified 无法解决的一些问题. 4 2. 不同的页面打开方式产生的请求区别 5 3. html  meta法 5 4. http head 法

[转]浏览器缓存机制

浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires: Cache-control等).但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下: <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取.使用

【转】浏览器缓存机制

最近在做页面分析的时候发现页面F5刷新时,大部分原来已经缓存的内容的状态变成了304,很是不解,原来想好好看看是什么原因的.结果发现园里已经有人分析的很彻底了. 原文地址:浏览器缓存机制 浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires: Cache-control等).但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下: <META HTTP-EQ