Web前端-HTTP Cache-control
HTTP协议分别在 1.0 / 1.1 两个时代推出了 Expires / Cache-control 两种cache策略,这里我们无需了解全部的细节,无需记住整个RFC内容
但是当我们需要使用HTTP cache策略时,我们需要注意以下细节:
Expires 是HTTP 1.0 那个时代的东西了,目前来看,可以不使用了,因为HTTP 1.0 的user agent占有率在 0.1% 以下(我们主要面向的web浏览器均默认使用HTTP 1.1)
Cache-control 是 HTTP 1.1 的新特性,也是我们主要做文章使用cache策略的工具
Cache策略:
#1 保鲜期only
这个是最最基础的一种策略,只需要在响应头中设定:
Cache-control: max-age=[secs]
[secs]是cache在客户端存活的秒数,例如 Cache-control: max-age=1800 表明cache的时间是半小时
只使用这样一个声明就可以使浏览器能够将这个HTTP响应的内容写入临时目录做cache
这里是简要过程:
I
(1)浏览器第一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现无cache存储,遂发出请求到web server
(3)web server响应资源,并设定Cache-control:max-age=300
(4)浏览器收到响应将资源呈献给用户的同时,在临时文件目录以”http://test.qq.com/test.cgi”为key缓存这个响应
---5分钟内---
II
(1)浏览器再一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现存在cache存储,检查保鲜期max-age,还未过期,则直接读取之,响应给用户
---5分钟后---
III
(1)浏览器再一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现存在cache存储,检查保鲜期max-age,已经过期,则发请求到web server
#2 保鲜期 + 最后修改时间验证
这里的要素是,在给出保鲜期的同时,给出一个资源的验证方式:
Last-Modified: [UTC time]
[UTC time]标示这个响应资源的最后修改时间,例如 Last-Modified: Mon, 06 Jul 2009 09:21:48 GMT
这个响应头只有配合Cache-control的时候才有实际价值,只是声明校验资源的方式,并不能影响资源的保鲜期时长
利用资源的可校验性,我们可以实现在cache的资源超过保鲜期浏览器再次请求时的304响应,令浏览器再次使用之前的cache
这里是简要过程:
I
(1)同#1中I (1)
(2)同#1中I (2)
(3)web server响应资源,并设定
Cache-control:max-age=300
Last-Modified: Mon, 06 Jul 2009 09:21:48 GMT
(4)同#1中I (4)
---5分钟内---
(同#1中II)
---5分钟后---
III
(1)浏览器再一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现存在cache存储,检查保鲜期max-age,已经过期
发现资源具有Last-Modified声明,则为请求带上头 If-Modified-Since: Mon, 06 Jul 2009 09:21:48 GMT
发送请求到web server
(3)web server收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对
若最后修改时间较新,说明资源又被改动过,则响应整片资源内容,HTTP 200 (需要整块内容写为包体)
若最后修改时间较旧,说明资源无新修改,则响应HTTP 304 (无需包体),告知浏览器继续使用所保存的cache
(这里当然也可以根据自己的需要决定是200还是304,我们的CGI毕竟是一种原始的实现)
#3 保鲜期 + 自定义标识验证
这里的要素是,在给出保鲜期的同时,给出另一种资源的验证方式:
ETag: [custom flag]
[custom flag]标示这个响应资源的由开发者自己确定的签名验证标识,例如 ETag: "abcdefg"
这个响应头只有配合Cache-control的时候才有实际价值,是声明校验资源的方式
ETag的使用为我们实现304响应提供了更多的灵活性,我们可以抛开必须将验证转化成时间格式的限制
这里是简要过程:
I
(1)同#1中I (1)
(2)同#1中I (2)
(3)web server响应资源,并设定
Cache-control:max-age=300
ETag: "abcdefg"
(4)同#1中I (4)
---5分钟内---
(同#1中II)
---5分钟后---
III
(1)浏览器再一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现存在cache存储,检查保鲜期max-age,已经过期
发现资源具有ETag声明,则为请求带上头 If-None-Match: "abcdefg"
发送请求到web server
(3)web server收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对
可以是一个版本号,可以是短时间戳,可以是资源校验和(强烈不推荐使用),或者干脆是一个常量(可以干脆拿来做容错)
If-None-Match发来的串与我们的自有值比对,根据我们自己的任何策略算法,可以自由决定如何返回浏览器,304或200
这里有一个使用ETag来做容错的例子(应用列表目前在使用):
(1)我们的每次正常返回都是
200
Cache-control: max-age=1800
ETag: "anything"
这里anything是个常量,我们只用来告诉浏览器,cache过期要发带If-None-Match的请求过来
(2)这样来自客户端的一大部分请求基本上都会带上If-None-Match头,我们的CGI据此可以知道这个请求的客户端是否有cache
此时如果CGI联系server失败,那么可以直接返回304,驱使客户端使用上一次cache的正确结果,且更新保鲜期max-age为300秒
这样我们实现了一个基于HTTP cache的容错,如果我们的资源还能实现一套时间戳存储的话
那么我们可以在正常情况下也实现校验后的304,从而节省流量
这里还有一个比较惨的教训,国内www上都没有文献记载,全球业界也只有一点文献可以找到:
IE6 在资源有gzip压缩同时有ETag头时,cache后再次发请求不会带If-None-Match头!!!
这个教训导致我们试图通过304减少u.qzone.qq.com流量的一次尝试失败(当然我们能换一种方式实现)
非常诡异,不中招是不知道的…
Web前端-HTTP Cache-control相关推荐
- web前端 网页加载 性能优化大全
web前端 性能优化 - - 如何提高网页加载速度 文章目录 web前端 性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求 浏览器 ...
- 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题...
##2017.10.30收集 面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
- 从零学web前端_从零到前端英雄(第2部分)
从零学web前端 This article is part two of the "From Zero to Front-end Hero" series. In part one ...
- 创建 Web 前端开发环境(node和npm)
Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...
- [转] Web前端优化之 内容篇
原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...
- web前端技术分享:详解模块化require 和 import的区别
在前端开发中,我们可以使用很多模块化的库来帮助我们更好的实现效果,有一些库的功能类似很多同学就不知道该如何选择,比如require和import,今天小千就给大家介绍一下两者的区别. 一.区别 1.r ...
- JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
- WEB前端 基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
- Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
- 8条关于Web前端性能的优化建议
转载自 8条关于Web前端性能的优化建议 一般网站优化都是优化后台,如接口的响应时间.SQL优化.后台代码性能优化.服务器优化等.高并发情况下,对前端web优化也是非常重要的. 下面说说几种常见的优化 ...
最新文章
- 下一步,该怎么做空中国概念股?
- Powershell交互式
- java 类方法应用题,java方法使用
- 计算机基础access数据库操作题,2021年3月全国计算机等级考试二级Access数据库程序设计题库及答案讲解...
- scrollTop 用法说明
- 想学习Python,这套教程再适合你不过了!
- 循序渐进!java开发手册阿里巴巴泰山版
- python课程典范选优_python学生选课系统
- python没基础能自学吗-没有基础先要自学python,有什么比较好的书推荐?
- fiddler限制网速
- JavaEE实现图书管理系统
- android exoplayer 直播流,android – Exoplayer自适应hls流媒体
- 数据包络分析法(DEA)_1
- 【测试】使用xtts V4迁移数据
- Unity小地图中点击角色移动功能 (附上demo)
- 最近很火的爱心网页(html+css+js),表白必备
- 2020工商银行信息技术岗校招笔试经历
- ios中达到Android中九妹图的效果
- 一个人在家简单吃点小火锅,搭配点小海鲜
- maven管理冲突jar包
热门文章
- 【数学建模】基于matlab细胞传输模型实现交通流【含Matlab源码 376期】
- 【语音合成】基于matlab GUI语音合成【含Matlab源码 293期】
- SPSS 偏相关分析【SPSS 024期】
- python坐标系教程_python Shapely使用指南详解
- 怎样理解电脑评分_电脑可以理解我们的情绪吗?
- 线段中点到另一直线距离最短_圆弧与线段的最短距离
- php js获取session,原创:PHP与纯JS交互在当前页面读取SESSION不用AJAX等
- mysql数据库远程安装,Linux_15:解决远程安装数据库
- 在Windows下搭建RocketMQ
- [转载]年末致富有新招,写个程序抓红包