浏览器缓存机制

Published on 5 March 2010 by laruence

本文地址: https://www.laruence.com/2010/03/05/1332.html
转载请注明出处

Cache-Control
Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。
cache-control 定义是：Cache-Control = "Cache-Control" ":" cache-directive。表 1 展示了适用的值。

表 1. 常用 cache-directive 值
Cache-directive	说明
public	所有内容都将被缓存
private	内容只缓存到私有缓存中
no-cache	所有内容都不会被缓存
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

表 2 表明在不同的情形下，浏览器是将请求重新发送到服务器还是使用缓存的内容。

表 2. 对 cache-directive 值的浏览器响应
Cache-directive	打开一个新的浏览器窗口	在原窗口中单击 Enter 按钮	刷新	单击 Back 按钮
public	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
private	浏览器重新发送请求到服务器	第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
no-cache/no-store	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器
must-revalidation/proxy-revalidation	浏览器重新发送请求到服务器	第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
max-age=xxx (xxx is numeric)	在 xxx 秒后，浏览器重新发送请求到服务器	在 xxx 秒后，浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	在 xxx 秒后，浏览器重新发送请求到服务器

Cache-Control是关于浏览器缓存的最重要的设置，因为它覆盖其他设置，比如 Expires 和 Last-Modified。另外，由于浏览器的行为基本相同，这个属性是处理跨浏览器缓存问题的最有效的方法。
失效
Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。失效的缓存条目通常不会被缓存（无论是代理缓存还是用户代理缓存）返回，除非首先通过原始服务器（或者拥有该实体的最新副本的中介缓存）验证。（注意：cache-control max-age 和 s-maxage 将覆盖 Expires 头部。）
Expires 字段接收以下格式的值：“Expires: Sun, 08 Nov 2009 03:37:26 GMT”。如果查看内容时的日期在给定的日期之前，则认为该内容没有失效并从缓存中提取出来。反之，则认为该内容失效，缓存将采取一些措施。表 3-6 表明针对不同用户操作的不同浏览器的行为。

表 3. 当用户打开一个新的浏览器窗口时的失效操作
	Firefox 3.5	IE 8	Chrome 3	Safari 4
内容没有失效	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器。返回代码是 200	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面
内容失效	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200

表 4. 当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作
	Firefox 3.5	IE 8	Chrome 3	Safari 4
内容没有失效	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304
内容失效	浏览器重新发送请求到服务器。返回代码是 200	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200

表 5. 当用户按 F5 键刷新页面时的失效操作
	Firefox 3.5	IE 8	Chrome 3	Safari 4
内容没有失效	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304
内容失效	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200

表 6. 当用户单击 Back 或 Forward 按钮时的失效操作
	Firefox 3.5	IE 8	Chrome 3	Safari 4
内容没有失效	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面
内容失效	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器。返回代码是 200

注意：所有浏览器都假定为使用默认设置运行。
Last-Modified/E-Tag
Last-Modified 实体头部字段值通常用作一个缓存验证器。简单来说，如果实体值在 Last-Modified 值之后没有被更改，则认为该缓存条目有效。ETag 响应头部字段值是一个实体标记，它提供一个 “不透明” 的缓存验证器。这可能在以下几种情况下提供更可靠的验证：不方便存储修改日期；HTTP 日期值的 one-second 解决方案不够用；或者原始服务器希望避免由于使用修改日期而导致的某些冲突。
不同的浏览器有不同的配置行为。表 7-10 表明针对不同用户操作的不同浏览器的行为。

表 7. 当用户打开一个新的浏览器窗口时的 Last-Modified E-Tag 操作
	Firefox 3.5	IE 8	Chrome 3	Safari 4
内容自上次访问以来没有被修改	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304
内容自上次访问以来已经被修改	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200

表 8. 当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作
	Firefox 3.5	IE 8	Chrome 3	Safari 4
内容自上次访问以来没有被修改	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304
内容自上次访问以来已经被修改	浏览器重新发送请求到服务器。返回代码是 200	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200

表 9. 当用户按 F5 键刷新页面时的 Last-Modified E-Tag 操作
	Firefox 3.5	IE 8	Chrome 3	Safari 4
内容自上次访问以来没有被修改	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304	浏览器重新发送请求到服务器。返回代码是 304
内容自上次访问以来已经被修改	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200

表 10. 没有缓存设置且用户单击 Back 或 Forward 按钮
	Firefox 3.5	IE 8	Chrome 3	Safari 4
内容自上次访问以来没有被修改	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面
内容自上次访问以来已经被修改	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器。返回代码是 200

注意：所有浏览器都假定使用默认设置运行。
不进行任何缓存相关设置
如果您不定义任何缓存相关设置，则不同的浏览器有不同的行为。有时，同一个浏览器在相同的情形下每次运行时的行为都是不同的。情况可能很复杂。另外，有些不该缓存的内容如果被缓存，将会导致安全问题。
不同的浏览器有不同的行为。表 11 展示了不同的浏览器行为。

表 11. 没有缓存设置且用户打开一个新的浏览器窗口
	Firefox 3.5	IE 8	Chrome 3	Safari 4
打开一个新页面	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200
在原始窗口中单击 Enter 按钮	浏览器重新发送请求到服务器。返回代码是 200	浏览器呈现来自缓存的页面。	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200
按 F5 键刷新	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200
单击 Back 或 Forward 按钮	浏览器呈现来自缓存的页面。	浏览器呈现来自缓存的页面。	浏览器重新发送请求到服务器。返回代码是 200	浏览器重新发送请求到服务器。返回代码是 200

注意：所有浏览器都假定使用默认设置运行。
最后, 概括下关键的结论:

关键结论
打开新窗口	如果指定cache-control的值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如：Cache-control: max-age=5 表示当访问此网页后的5秒内再次访问不会去服务器.
在地址栏回车	如果值为private或must-revalidate,则只有第一次访问时会访问服务器,以后就不再访问。如果值为no-cache,那么每次都会访问。如果值为max-age,则在过期之前不会重复访问。
按后退按扭	如果值为private、must-revalidate、max-age,则不会重访问,而如果为no-cache,则每次都重复访问.
按刷新按扭	无论为何值,都会重复访问.

Filed in 转载

62 Comments

Prestige park grove July 7, 2023

Good post
prestigeparkgroves July 7, 2023

Prestige Park Groveis progressive development of real estate projects in Bangalore that will be released shortly by the Prestige Group. This contemporary residential enclave is situated in the cosmopolitan, stylish, and growing Whitefield neighborhood of East Bangalore. This project will have magnificent one, two, and three-bedroom apartment apartments that are visually and carefully planned.
prestigeparkgroves July 7, 2023

https://prestigeparkgroves.gen.in/
sobhaproperties July 7, 2023

SOBHA TOWN PARK Residential township located in Hosur Road, Bangalore.This Township comprises beautifully designed 3, 3.5 and 4 BHK Apartments. Check Preoffer and all price details.
ΜΑΓΟΣ ΓΙΑ ΠΑΡΤΥ June 25, 2023

okay thanks for the information contained in this case the same outcome of the information
Tattvam Goa June 24, 2023

Welcome to Tattvam on the Beach, One of the top Ayurveda Resort in Goa , your gateway to a blissful seaside retreat. Located in the picturesque coastal town, invites you to explore a world where luxury, tranquility, and rejuvenation converge. With its pristine beaches, stunning ocean views, and a serene atmosphere, Tattvam on the Beach is a sanctuary designed to awaken your senses and nourish your soul.
gudlu resort June 24, 2023

Welcome to Gudlu Resort, a hidden gem nestled amidst the picturesque hills of Mudigere in Chikmagalur. If you are looking for a resorts in Mudigere , Gudlu Resort is the place to be. Surrounded by acres of lush greenery, Gudlu Resort offers a range of luxurious accommodations that are perfect for couples, families, and groups. Each room is well-appointed with modern amenities and offers breathtaking views of the surrounding hills and valleys.
tattvamretreat June 24, 2023

Welcome to Tattvamretreat Resort, Bangalore – a serene and tranquil ayurveda resorts in bangalore that offers a holistic approach to wellness through Ayurveda and Yoga. Tucked away amidst lush greenery and rolling hills, Tattvamretreat Resort is a perfect getaway for those seeking a peaceful and rejuvenating experience.
Gari resort June 24, 2023

Welcome to Gari Resort, Bangalore – one of the best day outing resorts in Bangalore that offers a unique blend of luxury, comfort, and relaxation. If you are looking for the perfect escape from the hustle and bustle of city life, Gari Resort is the place for you.
digitalbiggy May 8, 2023

Very interesting, and thank you for sharing such an informative blog. Your article is so convincing that I can’t help but comment on it. You’re doing an excellent job. Also, I invite you to read blogs about Digital marketing company in salem.
Godrej Splendour April 7, 2023

Nice work.
Prestige Park Ridge April 7, 2023

Prestige Park Ridge is an upcoming apartment complex developed by Prestige Group in Bannerghatta Road, Bangalore. The Project consists of 2 BHK, 3 BHK 4 BHK apartments.Prestige Park Ridge is set to become one of the most prestigious addresses in Bangalore, providing its residents with luxury amenities and a great lifestyle.
Sobha Sentosa March 31, 2023

I am fan of your content.
Godrej Park Retreat March 31, 2023

I am suggesting this blog to everyone I know.
Prestige Park Grove March 31, 2023

Amazing.
Sobha Neopolis March 25, 2023

I got to know about may things.
Godrej Park Retreat March 25, 2023

Godrej Park Retreat is know as best apartment in Sarjapur, Bangalore.
Prestige Park Grove March 25, 2023

Thanks for this blog post.
My new business Prestige Park Grove
Prestige Park Ridge March 24, 2023

Great article! I found your perspective on the topic very insightful and thought-provoking. Thanks for sharing your thoughts.
Shriram Poem March 24, 2023

Shriram Poem is the best residential project developed by Shriram Properties in Bangalore. This premium development is taking shape at the fastest-growing location Jalahalli Bengaluru.This project offers the best floor plan 2 BHK, and 3 BHK luxury residential accommodations. Reflecting the complete landmark and iconic structure in day-night time makes it a prime address to reside and believe that miracles do happen.
- Provident Ecopoliten March 24, 2023
  
  Provident Ecopoliten is the massive new luxury-themed residential Apartment project launched in Aerospace park Bagalur, North Bangalore
Godrej Splendour March 24, 2023

Godrej Splendour is a residential project located in the heart of Bangalore, India. The project is being developed by Godrej Properties, one of the leading real estate developers in India. The project offers luxurious apartments in various configurations such as 2, 3, and 4 BHK units.
Prestige Park Ridge March 20, 2023

Prestige Park Ridge upcoming Prestige Project located near Bannerghatta Road in Bangalore.
Provident Deens Gate March 20, 2023

Provident Deens Gate is the best option for the people who are looking for modern houses. This is a futuristic residential apartment project developing in IVC road, Bangalore. This project offers modern houses in well developed area.
Sobha Neopolis March 17, 2023

Great content. Enjoyed reading.
Sobha Neopolis
Godrej Park Retreat March 17, 2023

Great content and well managed.
Godrej Splendour March 17, 2023

Amazing article.
Prestige Southern Star March 17, 2023

The prestige Southern Star location is appealing due to its proximity to many workplaces. The elite enclave is located in Begur.
Prestige Park Grove March 17, 2023

Very interesting article. Loved it!
Provident Ecopliten March 17, 2023

This is a fantastic piece! Your research is impressive and your arguments are persuasive. I learned a lot from reading this.
Prestige Park Ridge March 17, 2023

I really enjoyed reading your article. Your writing style is engaging and the information you presented was well-organized and easy to follow.
Provident Deens Gate March 17, 2023

Thank you for writing about this topic. It’s important to raise awareness and promote discussion around these issues. I appreciate your efforts to do so.
Brigade Valencia March 17, 2023

Great article! I found your perspective on the topic very insightful and thought-provoking. Thanks for sharing your thoughts.
web缓存 – 1 October 10, 2018

[…] 浏览器缓存机制1 […]
qpq October 4, 2018

网站是褪色了吗，哈哈哈哈
sdc October 4, 2018

这网站看起来好旧啊
淺談瀏覽器快取 - 程序員的後花園 June 20, 2018

[…] ~ 參考：Web快取機制系列淺談web快取Web前後端快取技術瀏覽器快取機制：不同瀏覽器對使用者操作行為處理比較關聯文章 zsh: command not found: […]
web快取 - 程序員的後花園 June 8, 2018

[…] 瀏覽器快取機制1 […]
白一梓 November 27, 2015

对于不设置任何缓存头的HTTP请求，其下次请求是否使用缓存的策略是不固定的
Canton Fair Interpreter November 2, 2015

学无止境.感谢作者.
记一些浏览器缓存原先不太熟悉的东西 – HTML/CSS-java知识分享 October 14, 2015

[…] http://www.laruence.com/2010/03/05/1332.html […]
Jane January 16, 2015

I would like to thank you for the efforts you’ve put in penning this website.
I am hoping to see the same high-grade blog posts by you in the future as well.
In truth, your creative writing abilities has motivated me to
get my own, personal website now 😉
web site – Jane –
【Web缓存机制系列】2 – Web浏览器的缓存机制 | Tencent AlloyTeam December 5, 2013

[…] 《浏览器缓存机制》：不同浏览器对用户操作行为处理比较 […]
Web缓存机制综述（HTML5缓存总结与细节释疑） | 极客我爱你 geek521.com October 18, 2013

[…] 浏览器缓存机制》：不同浏览器对用户操作行为处理比较 […]
猪头 March 15, 2013

chrome和firefox下history.back()时如果要获得新的内容而不是缓存的话,只设置no-cache不行,还必须设置一个no-store.否则返回的话仍是缓存内容.这里有更详细的分析IE下和chrome下对no-cache的不同.http://www.smalluv.com/php_code_29.html
服务器与浏览器缓存协商控制机制的总结 | Ginano–生活本该如此精彩 March 13, 2013

[…] 【2】浏览器缓存刷新F5/CTRL+F5对比 […]
{Web缓存机制概述} 5 – Web App时代的缓存机制新思路&全文总结 | h5train January 7, 2013

[…] http://www.procata.com/cachetest/ http://www.web-caching.com/cacheability.html http://www.laruence.com/2010/03/05/1332.html http://sofish.de/1449 […]
IE 下 JQUERY AJAX 请求官方原理 | 南龙的小站 June 22, 2012

[…] 各对待缓存的处理不一. 可参考:http://www.laruence.com/2010/03/05/1332.html 未分类就可以, 浏览器, 磁盘, 缓存, 请求 ← AVR […]
【Web缓存机制概述】5 – Web App时代的缓存机制新思路 | 星科技 May 26, 2012

[…] http://www.laruence.com/2010/03/05/1332.html […]
neekey April 14, 2012

非常详细的介绍！不过自己测试了一下，发现即使设置了max-age，直接在浏览器中输入的url资源，都会重新去请求服务器。
比如一个index.css 文件，如果是在一个index.html文件中被引用，设置max-age后，在到期前，回车index.html页面，index.css会直接读取缓存而不向服务器发送请求。
但是如果直接将index.css在浏览器中输入，则不管如何都会去请求服务器。
请问下这个是什么原因
【Web缓存机制概述】5 – Web App时代的缓存机制新思路 & 全文总结 | Tencent Alloy Team 2012 March 22, 2012

[…] http://www.laruence.com/2010/03/05/1332.html […]
【Web缓存机制概述】2 – Web浏览器的缓存机制 | Tencent Alloy Team 2012 March 22, 2012

[…] 《浏览器缓存机制》：不同浏览器对用户操作行为处理比较 […]
Mr.CO August 26, 2011

不错！好东东！学习了！
博主想给你交换个友链哦！
Shanghai Business Interpreter May 4, 2011

好深奥
Tour guide beijing September 10, 2010

我的新网站改版后，测试一直出错，检查一直找不到错误。问了人才知道原来是浏览器缓存的问题。刚好看到你的博客，收藏起来先，以后或许还用得着。嘻嘻。
达达的Google Reader分享 [2010-03-05] : : 9RIA.Com 天地会博客聚合 May 29, 2010

[…] 浏览器缓存机制 […]
第三章：添加Expires头 —《高性能网站建设指南》读书笔记 – im Png May 11, 2010

[…] 更多的关于浏览器缓存及其参数可以参看浏览器缓存机制一文。 […]
达达的Google Reader分享 [2010-03-05] « 9RIA.Com 天地会博客聚合 May 7, 2010

[…] 浏览器缓存机制 […]
bailey May 5, 2010

不错顶
yufeng March 25, 2010

呵呵，你的博客被墙了，唉。
beeboo March 17, 2010

好文章！
yufeng March 17, 2010

学习了，呵呵。

Comments are closed.