浏览器 HTTP 缓存原理分析
转自:http://www.cnblogs.com/tzyy/p/4908165.html
浏览器缓存原理:
1、浏览器第一次访问服务器资源/index.html,在浏览器中没有缓存文件,直接向服务器发送请求,服务器返回200 OK 实体中返回index.html文件内容,并设置一个缓存过期时间,一个文件修改时间,一个根据index.html内容计算出来的实体标记Entity Tag简称ETag,浏览器将/index.html路径的请求缓存到本地
2、浏览器第二次访问服务资源/index.html ,由于本地已经有了此路径下的缓存文件,所以这次就不直接向服务器发送请求了
1)首先进行缓存过期判断,浏览器根据@1中设置的缓存过期时间,判断缓存文件是否过期
情景1:没有过期:则不向服务器发送请求,直接使用缓存中的文件,这时我们在浏览器的控制台中可以看到200K,此时的情况就是完全使用缓存,浏览器与服务器没有任何交互
情景2:若已过期,则向服务器发送请求,此请求中会带上@1设置文件修改时间和ETag
然后进行资源更新判断,服务器根据浏览器传送过来的文件修改时间,判断自浏览器上次请求之后,文件有没有发生变化;根据ETag,判断文件内容自上次请求之后,有没有发生变化,
情景一:若两种判断的结论都是文件没有修改过,则服务器不会给浏览器发送Index.html的内容了,而是直接告诉它,内容没有被修改,你用你那边的缓存吧~304 Not Modified 此时浏览器就会从本地获取index.html的内容了,此时的情况较协议缓存,这是浏览器跟服务器是有一次交互的
情景二:若修改时间跟文件内容有一个改变,则服务器会受理此次请求,之后的操作同@1一样
一图以蔽之
缓存相关首部字段 {缓存设置是前端设置,还是后端?}
request缓存相关首部字段
① cache-control 用来做缓存过期判断
常用指令:
no-cache 不直接使用缓存,始终向服务器发起请求
max-age 缓存过期时间,是一个时间数值,比如3600秒,设置为0的时候效果等同于no-cache
s-maxage 给缓存代理用的指令,对直接返回资源的server无效,当s-maxage生效时,会忽略max-age的值
only-if-cached 若有缓存,则只使用缓存,若缓存文件出问题了,请求也会出问题
② Pragma 用来做缓存过期判断
它可以取值no-cache
这是一个http1.0遗留的字段,当它和cache-control同时存在的时候,会被cache-control覆盖
③ if-match / if-none-match 用来做资源更新判断
这个指令会把缓存中的Etag传给服务器,服务器用它来和服务器端的资源Etag进行对比,若不一致则证明资源被修改了,需要响应请求为 200 OK
④ if-modified-since 用来做资源更新判断
这个指令会把文件的上一次缓存中的文件的更新时间传给服务器,服务器判断文件在这个时间点后是否被修改,如果被修改过则需要响应请求为200 OK
response缓存相关首部字段
① cache-control 用来设置缓存过期时间
常用指令:
no-cache 让客户端不直接使用缓存,始终向服务器发起请求,不设置默认是这个,上边截图中的请求就是省略了,所以客户端不会直接使用缓存。
max-age 缓存过期时间,是一个时间数值,比如3600秒,设置为0的时候效果等同于no-cache
s-maxage 给缓存代理用的指令,对直接返回资源的server无效,当s-maxage生效时,会忽略max-age的值
private/public 默认是private,只在一个浏览器中缓存,设置为public时缓存可被多个用户共享
② Etag 用来设置根据资源内容生成的实体标签
这个值有强tag和弱tag,区别是计算方式不同,只有强tag才会在资源被更新的时候立即发生变化,请求首部中的if-match/if-none-match字段就会传回这个值给服务端
③ age
这个字段用来告诉客户端,这个response是在多久前被创建的,单位为秒,缓存服务器返回资源的时候必须创建此字段
实体首部缓存相关字段
response的head里边可能还包括实体首部,实体首部是紧跟在response首部后边的。
①last-modified-time ——用来设置资源最后修改时间
②Exprire —— 设置文件过期时间
这个字段的作用和cache-control相同,不同的是它直接指定一个缓存过期时间点,容易受客户端时间的影响。
这也是一个遗留的字段,和cache-control同时存在的时候会被后者覆盖
缓存配置的一些注意事项
① 只有get请求会被缓存,post请求不会
② Etag 在资源分布在多台机器上时,对于同一个资源,不同服务器生成的Etag可能不相同,此时就会导致304协议缓存失效,客户端还是直接从server取资源。可以自己修改服务器端etag的生成方式,根据资源内容生成同样的etag。
③ 系统上线,更新资源时,可以在资源uri后边附上资源修改时间、svn版本号、文件md5 等信息,这样可以避免用户下载到缓存的旧的文件
④ 观察chrome的表现发现,通过链接或者地址栏访问,会先判断缓存是否过期,再判断缓资源是否更新;F5刷新,会跳过缓存过期判断,直接请求服务器,判断资源是否更新。
目前只能回忆起这些了,以后遇到了再补充吧~
浏览器 HTTP 缓存原理分析的更多相关文章
- 浏览器HTTP缓存原理分析
以前项目中遇到了很多浏览器缓存相关的问题,也在网上查过资料,搞过服务器的配置,来确保客户端加载服务器资源的速度和资源有效性.最近仔细看了下http协议中和缓存相关的一些属性,总结一下. 浏览器缓存原理 ...
- 浏览器HTTP缓存原理分析(转)
章节目录 浏览器缓存原理 文字版描述 一图以蔽之 缓存相关首部字段 request缓存相关首部字段 response缓存相关首部字段 实体首部缓存相关字段 缓存配置的一些注意事项 以前项目中遇到了很多 ...
- 【Web技术】276- WebView缓存原理分析和应用
前言 混合式开发,在产品体验以及页面加载速度的体验上已经非比以往的.今日早读文章由@unclechen分享. 正文从这开始- 一.背景 现在的App开发,或多或少都会用到Hybrid模式,到了WebV ...
- MyBatis:二级缓存原理分析
MyBatis从入门到放弃七:二级缓存原理分析 前言 说起mybatis的一级缓存和二级缓存我特意问了几个身边的朋友他们平时会不会用,结果没有一个人平时业务场景中用. 好吧,那我暂且用来学习源码吧.一 ...
- Solr缓存原理分析及配置优化
一.缓存原理 缓存,带来急速性能体验! Solr提供了一系列的内置缓存来优化查询性能.Solr的缓存原理主要涉及以下4个方面: 1.缓存大小及缓存置换法 从缓存大小的角度来看,不能将缓存设置的太大,否 ...
- MyBatis从入门到放弃七:二级缓存原理分析
前言 说起mybatis的一级缓存和二级缓存我特意问了几个身边的朋友他们平时会不会用,结果没有一个人平时业务场景中用. 好吧,那我暂且用来学习源码吧.一级缓存我个人认为也确实有些鸡肋,mybatis默 ...
- MyBatis 源码分析 - 缓存原理
1.简介 在 Web 应用中,缓存是必不可少的组件.通常我们都会用 Redis 或 memcached 等缓存中间件,拦截大量奔向数据库的请求,减轻数据库压力.作为一个重要的组件,MyBatis 自然 ...
- 【转】MaBatis学习---源码分析MyBatis缓存原理
[原文]https://www.toutiao.com/i6594029178964673027/ 源码分析MyBatis缓存原理 1.简介 在 Web 应用中,缓存是必不可少的组件.通常我们都会用 ...
- 【构建Android缓存模块】(一)吐槽与原理分析
http://my.oschina.net/ryanhoo/blog/93285 摘要:在我翻译的Google官方系列教程中,Bitmap系列由浅入深地介绍了如何正确的解码Bitmap,异步线程操作以 ...
随机推荐
- 12个CSS高级技巧汇总
1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...
- sql server存储过程分页
Create PROCEDURE [dbo].[Table_GetList] ) = '', -- 查询条件(注意: 不要加 WHERE) ) = '', -- 设置排序 , -- 页尺寸 , -- ...
- applicationContext.xml 配置文件的存放位置
eb.xml中classpath:和classpath*: 有什么区别? classpath:只会到你的class路径中查找找文件; classpath*:不仅包含class路径,还包括jar文件中 ...
- Windows vista以上模拟Alt Ctrl Delete
之前客户要求我们能够在windows登陆界面能够用指定账户批量控制机器登陆,然后用windows credentials provider(vista以上,xp需要用Gina)实现了这个功能,这期间遇 ...
- 关于函数strtok和strtok_r的使用要点和实现原理(二)
http://www.cnblogs.com/stemon/p/4013264.html已经介绍了使用strtok函数的一些注意事项,本篇将介绍strtok的一个应用并引出strtok_r函数. 1. ...
- Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)上
下载安装软件 下载 Opencv for Windows 最新版本,本文是 Opencv 2.4.8.双击后会出现解压提示,实际上就是“安装”了,路径填写为 D:/Program Files,然后确定 ...
- [置顶] woff格式字体怎么打开和编辑?
如题! woff百度百科:http://baike.baidu.com/link?url=toS7yqpN9VlEcO2GOEp5JEA9-TeaZgIdVqTOv7iHshsNvk-V8HtxEY0 ...
- css负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...
- 纯css3实现tab选项卡
<!doctype html> <html> <head> <title>Welcome</title> <meta http-equ ...
- 比callback更简洁的链式执行promise
promise自己理解的也不够深刻,具体知识点不在这里细说了 直接上个例子,清晰明了,自己去悟吧 <script type="text/javascript"> //模 ...