Press "Enter" to skip to content

浏览器缓存机制

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,则每次都重复访问.
按刷新按扭 无论为何值,都会重复访问.

62 Comments

  1. prestigeparkgroves
    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.

  2. sobhaproperties
    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.

  3. Tattvam Goa
    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.

  4. gudlu resort
    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.

  5. tattvamretreat
    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.

  6. Gari resort
    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.

  7. digitalbiggy
    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.

  8. Prestige Park Ridge
    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.

  9. Prestige Park Ridge
    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.

  10. Shriram Poem
    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.

  11. Godrej Splendour
    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.

  12. Prestige Park Ridge
    Prestige Park Ridge March 20, 2023

    Prestige Park Ridge upcoming Prestige Project located near Bannerghatta Road in Bangalore.

  13. Provident Deens Gate
    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.

  14. Prestige Southern Star
    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.

  15. Provident Ecopliten
    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.

  16. Prestige Park Ridge
    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.

  17. Provident Deens Gate
    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.

  18. Brigade Valencia
    Brigade Valencia March 17, 2023

    Great article! I found your perspective on the topic very insightful and thought-provoking. Thanks for sharing your thoughts.

  19. qpq
    qpq October 4, 2018

    网站是褪色了吗,哈哈哈哈

  20. sdc
    sdc October 4, 2018

    这网站看起来好旧啊

  21. […] ~ 參考:Web快取機制系列淺談web快取Web前後端快取技術瀏覽器快取機制:不同瀏覽器對使用者操作行為處理比較 關聯文章 zsh: command not found: […]

  22. 白一梓
    白一梓 November 27, 2015

    对于不设置任何缓存头的HTTP请求,其下次请求是否使用缓存的策略是不固定的

  23. Jane
    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

  24. 猪头
    猪头 March 15, 2013

    chrome和firefox下history.back()时如果要获得新的内容而不是缓存的话,只设置no-cache不行,还必须设置一个no-store.否则返回的话仍是缓存内容.这里有更详细的分析IE下和chrome下对no-cache的不同.http://www.smalluv.com/php_code_29.html

  25. neekey
    neekey April 14, 2012

    非常详细的介绍!不过自己测试了一下,发现即使设置了max-age,直接在浏览器中输入的url资源,都会重新去请求服务器。
    比如一个index.css 文件,如果是在一个index.html文件中被引用,设置max-age后,在到期前,回车index.html页面,index.css会直接读取缓存而不向服务器发送请求。
    但是如果直接将index.css在浏览器中输入,则不管如何都会去请求服务器。
    请问下这个是什么原因

  26. Mr.CO
    Mr.CO August 26, 2011

    不错!好东东!学习了!
    博主想给你交换个友链哦!

  27. Tour guide beijing
    Tour guide beijing September 10, 2010

    我的新网站改版后,测试一直出错,检查一直找不到错误。问了人才知道原来是浏览器缓存的问题。刚好看到你的博客,收藏起来先,以后或许还用得着。嘻嘻。

  28. bailey
    bailey May 5, 2010

    不错 顶

  29. yufeng
    yufeng March 25, 2010

    呵呵,你的博客被墙了,唉。

  30. beeboo
    beeboo March 17, 2010

    好文章!

  31. yufeng
    yufeng March 17, 2010

    学习了,呵呵 。

Comments are closed.