学习浏览器缓存(http缓存)

Q: 浏览器缓存是个什么东东,为什么要学习浏览器缓存涅?

A: 浏览器缓存其实就是浏览器保存通过HTTP获取的所有资源,是浏览器将网络资源存储在本地的一种行为。浏览器缓存可以减少冗余数据的传输,减小服务器的负担,提高网站性能,页面利用缓存快速的响应。

任何事物都是有两面性滴,用的好,可以提升用户体验,用不好,还会降低用户体验。

缓存是什么时候用到的呢,这要从浏览器发起请求说起了,
!(浏览器缓存)[https://user-gold-cdn.xitu.io/2019/1/21/1686e2735297a596?imageView2/0/w/1280/h/960/format/webp/ignore-error/1]

浏览器缓存的分类

  1. 强缓存
  2. 协商缓存

    浏览器再向服务器请求资源时,首先判断是否命中强缓存,再判断是否命中协商缓存!

  • 强缓存
    浏览器在加载资源时,会先根据本地缓存资源的 header 中的信息判断是否命中强缓存,如果命中则直接使用缓存中的资源不会再向服务器发送请求。

这里的 header 中的信息指的是 expires 和 cahe-control.

  • Expires
    该字段是 http1.0 时的规范,它的值为一个绝对时间的 GMT 格式的时间字符串,比如 Expires:Mon,18 Oct 2066 23:59:59 GMT。这个时间代表着这个资源的失效时间,在此时间之前,即命中缓存。这种方式有一个明显的缺点,由于失效时间是一个绝对时间,所以当服务器与客户端时间偏差较大时,就会导致缓存混乱。
  • Cache-Control
    Cache-Control 是 http1.1 时出现的 header 信息,主要是利用该字段的 max-age 值来进行判断,它是一个相对时间,例如 Cache-Control:max-age=3600,代表着资源的有效期是 3600 秒。cache-control 除了该字段外,还有下面几个比较常用的设置值:
    no-cache:需要进行协商缓存,发送请求到服务器确认是否使用缓存。
    no-store:禁止使用缓存,每一次都要重新请求数据。
    public:可以被所有的用户缓存,包括终端用户和 CDN 等中间代理服务器。
    private:只能被终端用户的浏览器缓存,不允许 CDN 等中继缓存服务器对其缓存。

    Cache-Control 与 Expires 可以在服务端配置同时启用,同时启用的时候 Cache-Control 优先级高。

  • 协商缓存
    当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器根据 header 中的部分信息来判断是否命中缓存。如果命中,则返回 304 ,告诉浏览器资源未更新,可使用本地的缓存。
    这里的 header 中的信息指的是 Last-Modify/If-Modify-Since 和 ETag/If-None-Match.
    Last-Modify/If-Modify-Since
    浏览器第一次请求一个资源的时候,服务器返回的 header 中会加上 Last-Modify,Last-modify 是一个时间标识该资源的最后修改时间。
    当浏览器再次请求该资源时,request 的请求头中会包含 If-Modify-Since,该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后,根据资源的最后修改时间判断是否命中缓存。
    如果命中缓存,则返回 304,并且不会返回资源内容,并且不会返回 Last-Modify。
    缺点:
    短时间内资源发生了改变,Last-Modified 并不会发生变化。
    周期性变化。如果这个资源在一个周期内修改回原来的样子了,我们认为是可以使用缓存的,但是 Last-Modified 可不这样认为,因此便有了 ETag。
    ETag/If-None-Match
    与 Last-Modify/If-Modify-Since 不同的是,Etag/If-None-Match 返回的是一个校验码。ETag 可以保证每一个资源是唯一的,资源变化都会导致 ETag 变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存。
    与 Last-Modified 不一样的是,当服务器返回 304 Not Modified 的响应时,由于 ETag 重新生成过,response header 中还会把这个 ETag 返回,即使这个 ETag 跟之前的没有变化。

Last-Modified 与 ETag 是可以一起使用的,服务器会优先验证 ETag,一致的情况下,才会继续比对 Last-Modified,最后才决定是否返回 304。

总结
当浏览器再次访问一个已经访问过的资源时,它会这样做:

  1. 看看是否命中强缓存,如果命中,就直接使用缓存了。
  2. 如果没有命中强缓存,就发请求到服务器检查是否命中协商缓存。
  3. 如果命中协商缓存,服务器会返回 304 告诉浏览器使用本地缓存。
  4. 否则,返回最新的资源

参考资料

原文地址:https://www.cnblogs.com/renbo/p/10336150.html

时间: 01-29

学习浏览器缓存(http缓存)的相关文章

[原创]java WEB学习笔记93:Hibernate学习之路---Hibernate 缓存介绍,缓存级别,使用二级缓存的情况,二级缓存的架构集合缓存,二级缓存的并发策略,实现步骤,集合缓存,查询缓存,时间戳缓存

本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 -----------------------------------------------------------------------------------------------------------------

Java缓存学习之三:CDN缓存机制

CDN是什么? 关于CDN是什么,此前网友详细介绍过. CDN是Content Delivery Network的简称,即"内容分发网络"的意思.一般我们所说的CDN加速,一般是指网站加速或者用户下载资源加速. 举个通俗的例子: 谈到CDN的作用,可以用8年买火车票的经历来形象比喻:8年前,还没有火车票代售点一说,12306.cn更是无从说起.那时候火车票还只能在火车站的售票大厅购买,而我所住的小县城并不通火车,火车票都要去市里的火车站购买,而从县城到市里,来回就是4个小时车程,简直就

MyBatis学习总结(七)——Mybatis缓存(转载)

孤傲苍狼 只为成功找方法,不为失败找借口! MyBatis学习总结(七)--Mybatis缓存 一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Session,当 Session flush 或 close 之后,该Session中的所有 Cache 就将清空. 2. 二级缓存与一级缓存其机制相同,默认也是采用 PerpetualCache,Hash

TimesTen 应用层数据库缓存学习:12. 管理缓存环境

缓存和复制代理的启停和状态查看 cache agent的作用是将监控Oracle中数据的变化,并更新到TimesTen.因此,对于只读和AWT缓存组,cache agent都是必需的. cache agent的启停 ttisql> call ttcachestart ttisql> call ttcachestop 或者 $ ttadmin -cachestart DSN $ ttadmin -cachestop DSN replication agent的启停 ttisql> call

浏览器http的缓存机制

原文出处-----分享从伯乐在线看到的一篇好文章  http://web.jobbole.com/85509/ 针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必考的问题. 之所以还写一篇这样的文章,是因为近期都在搞新技术,想“回归”下基础,也希望尽量总结的更详尽些. 那么你是否还需要阅读本篇文章呢?可以试着回答下面这个问题: 我们在访问百度首页的时候,会发现不管怎么刷新页面,静态资源基本都是返回 200(from cache):

浅谈浏览器http的缓存机制

针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必考的问题. 之所以还写一篇这样的文章,是因为近期都在搞新技术,想"回归"下基础,也希望尽量总结的更详尽些. 那么你是否还需要阅读本篇文章呢?可以试着回答下面这个问题: 我们在访问百度首页的时候,会发现不管怎么刷新页面,静态资源基本都是返回 200(from cache): 随便点开一个静态资源是酱的: 哎哟有Response报头数据呢,看来服务器也正常返回了etag什么鬼的

[转]缓存、缓存算法和缓存框架简介

以下内容转自:http://www.leexiang.com/cache-algorithm (转载请注明出处)-----------------------------------分割线---------------------------------------------- 引言 我们都听过 cache,当你问他们是什么是缓存的时候,他们会给你一个完美的答案,可是他们不知道缓存是怎么构建的,或者没有告诉你应该采用什么标准去选择缓存框架.在这边文章,我们会去讨论缓存,缓存算法,缓存框架以及哪

缓存、缓存算法和缓存框架

译者:lixiang 译文:http://www.zavakid.com/25 原文:http://www.jtraining.com/component/content/article/35-jtraining-blog/98.html 引言 我们都听过 cache,当你问他们是什么是缓存的时候,他们会给你一个完美的答案,可是他们不知道缓存是怎么构建的,或者没有告诉你应该采用什么标准去选择缓存框架.在这边文章,我们会去讨论缓存,缓存算法,缓存框架以及哪个缓存框架会更好. 面试 “缓存就是存贮数

Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类

Android公共库--图片缓存 网络缓存 下拉及底部更多ListView 公共类 转载自http://www.trinea.cn/android/android-common-lib/ 介绍总结的一些android公共库,包含缓存(图片缓存.预取缓存.网络缓存).公共View(下拉及底部加载更多ListView.底部加载更多ScrollView.滑动一页Gallery).及Android常用工具类(网络.下载.shell.文件.json等等). TrineaAndroidCommon已开源,地

javascript学习------浏览器检测

Navigator对象:浏览器对象 该对象包含了浏览器的整体信息 Navigator对象的属性: appName:返回浏览器的名称 appVersion:返回浏览器的版本号 uerAgent:返回浏览器用于HTTP请求的用户代理头的值 appCodeName:返回浏览器的代码号 platform:返回运行浏览器的操作系统或硬件平台 IE中的Navigator属性: cookieEnabled:检测浏览器是否支持Cookie,如果支持返回TRUE,不支持返回FALSE systemLanguage