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)#1I (1)

(2)#1I (2)

(3)web server响应资源,并设定

Cache-control:max-age=300

Last-Modified: Mon, 06 Jul 2009 09:21:48 GMT

(4)#1I (4)

---5分钟内---

(#1II)

---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)#1I (1)

(2)#1I (2)

(3)web server响应资源,并设定

Cache-control:max-age=300

ETag: "abcdefg"

(4)#1I (4)

---5分钟内---

(#1II)

---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发来的串与我们的自有值比对,根据我们自己的任何策略算法,可以自由决定如何返回浏览器,304200

 

              这里有一个使用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-age300

 

              这样我们实现了一个基于HTTP cache的容错,如果我们的资源还能实现一套时间戳存储的话

那么我们可以在正常情况下也实现校验后的304,从而节省流量

这里还有一个比较惨的教训,国内www上都没有文献记载,全球业界也只有一点文献可以找到:

 

IE6 在资源有gzip压缩同时有ETag头时,cache后再次发请求不会带If-None-Match头!!!

这个教训导致我们试图通过304减少u.qzone.qq.com流量的一次尝试失败(当然我们能换一种方式实现)

非常诡异,不中招是不知道的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一些可能会出现在Web前端开发中级考试中的理论题以及对应的答案: 1. 请简要解释一下什么是 MVC 架构? MVC 架构是一种软件设计模式,它将一个应用程序分为三个部分:模型(Model)、视图(View)和控制器(Controller)。模型负责处理数据和业务逻辑,视图负责将数据呈现给用户,控制器负责协调模型和视图之间的交互。 2. 请简单介绍一下HTML5新特性。 HTML5是HTML的最新版本,它引入了很多新的特性,例如:语义化标签、视频和音频支持、地理定位、Web存储、Web Workers等。 3. 请列举一些CSS3中新增的特性。 CSS3引入了很多新的特性,例如:圆角、阴影、渐变、动画、多列布局、媒体查询等。 4. 请简要说明JavaScript中的几种数据类型。 JavaScript中的数据类型包括:基本类型和引用类型。基本类型包括:字符串、数字、布尔值、undefined和null。引用类型包括:对象、数组、函数等。 5. 请简述 Ajax 的工作原理。 Ajax的工作原理是通过XMLHttpRequest对象向服务器异步发送请求,获取服务器返回的数据,然后通过JavaScript动态更新页面内容,从而实现局部刷新,提高用户体验。 6. 请简单介绍一下 HTTP 协议的几个常见方法。 HTTP协议定义了很多请求方法,其中常见的有:GET、POST、PUT、DELETE、HEAD等。GET用于获取资源,POST用于提交数据,PUT用于更新资源,DELETE用于删除资源,HEAD用于获取资源的元数据。 7. 请简述一下浏览器缓存的工作原理。 浏览器缓存是指浏览器将已经获取的资源存储在本地,下次访问同一资源时直接从本地获取,从而提高访问速度和用户体验。浏览器缓存的工作原理是通过HTTP协议中的响应头来控制缓存行为,例如:Cache-Control、Expires、Last-Modified、ETag等。 8. 请简单介绍一下 Web 安全相关的知识。 Web安全涉及到很多方面,包括:XSS攻击、CSRF攻击、SQL注入、文件上传漏洞、密码安全等。开发者需要采取一系列措施来保障Web应用的安全,例如:输入验证、输出转义、密码加密、HTTPS协议等。 9. 请简述一下前端性能优化的几个方面。 前端性能优化可以从多个方面入手,例如:减少HTTP请求、压缩和合并JavaScript和CSS文件、优化图片、使用CDN、减少DOM操作、使用缓存等。 10. 请简述一下现代前端框架的特点和优势。 现代前端框架的特点和优势包括:提供了一整套解决方案,可以快速构建Web应用;采用组件化的开发方式,可以提高代码的可重用性和可维护性;提供了丰富的工具和插件,可以提高开发效率和代码质量;支持自动化构建和测试,可以提高开发效率和代码质量。常见的现代前端框架包括:React、Vue、Angular等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值