`

http协议:Web前端-HTTP Cache-control/浏览器缓存(转)

    博客分类:
  • web
 
阅读更多

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)

<iframe id="aswift_1" style="margin: 0px; padding: 0px; border-width: 0px; vertical-align: baseline; left: 0px; position: absolute; top: 0px;" name="aswift_1" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="468" height="60"></iframe>

---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 则与被请求资源的相应校验串进行比对,Etag可以是一个版本号,可以是短时间戳,可以是资源校验和(强烈不推荐使用),或者干脆是一个常量(可以干脆拿来做容错)
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头!!!

分享到:
评论

相关推荐

    Cache-control使用Cache-control:private学习笔记

    在HTTP协议中,Cache-Control头字段是用于管理缓存行为的关键机制,它允许服务器指示客户端如何缓存响应内容。`Cache-Control`字段可以接受多种指令,以控制网页的缓存策略。在本文中,我们将深入探讨`Cache-Control...

    web项目页面缓存清除,不用每次刷新浏览器

    1. **HTTP缓存机制**:HTTP协议中的Cache-Control、ETag、Last-Modified等头部信息用于控制浏览器如何缓存和验证资源。例如,设置Cache-Control为`no-cache`或`no-store`可以防止浏览器缓存页面,`must-revalidate`...

    前端面经文档-技术要点-面试编程题-资源-html-前端-web-计算机-计算机前端面试题目-校招-大学生-计算机前端求职面经

    浏览器 ★ 了解浏览器,比如渲染过程、缓存;熟悉跨域问题 浏览器渲染过程 ...cache-control &gt; expires 协商缓存 1. 向服务器发送请求,服务器会根据请求头的资源判断是否命中协商缓存 2. 如果命中,则返

    j2EE 缓存 Web前端优化 后台 服务器优化

    1. **浏览器缓存(Web前端优化)** - **减少HTTP请求**:通过合并CSS和JavaScript文件,减少HTTP请求次数,从而加快页面加载速度。 - **减少DNS查找**:DNS查找会消耗时间,通过预加载DNS或使用CDN(内容分发网络...

    让你页面速度飞起来 Web前端性能优化(视频教程+ppt)

    **3.2 浏览器缓存** - **Service Worker**:作为客户端的代理服务器,拦截网络请求并缓存响应数据,提供离线访问能力。 - **IndexedDB**:用于持久化存储大量结构化数据,可以缓存复杂的对象模型。 #### 四、PWA...

    面试题浏览器缓存和数据压缩.pdf

    在web开发领域,浏览器缓存和数据压缩是提高网站性能、优化用户体验的重要技术手段。它们可以帮助减少服务器的负载、加快页面加载速度、节省带宽资源,从而在竞争激烈的互联网市场中提供更加流畅、快捷的服务。 ###...

    前端项目-cache.adderall.zip

    "Cache.adderall.zip" 提供的前端项目专注于 `cache.addall()` 函数,这是一个快速、批量添加资源到浏览器缓存中的工具,可以视为对标准 `Cache.add()` 方法的不耐烦版本。在现代Web应用程序中,Service Worker 和 ...

    网站Cache全分析.doc

    前端Cache主要通过HTTP协议中的头信息进行控制,如: - Last-Modified:指示文件的最后修改时间。 - Date:服务器发送文档的时间。 - Expires:指定文档的过期时间,过期后浏览器不再使用本地缓存。 - Cache-Control...

    存储篇 1:浏览器缓存机制介绍与缓存策略剖析(1).md

    浏览器缓存是前端性能优化的一个重要组成部分,其可以减少网络IO消耗,提高访问速度。浏览器缓存的机制可以分为四个方面:MemoryCache、ServiceWorkerCache、HTTPCache和PushCache。每一部分在性能优化中扮演着不同...

    前端cache 策略 .zip

    总结起来,前端缓存策略是一个多维度的概念,包括了强缓存、协商缓存、Service Worker、Cache API以及Web App Manifest。理解和掌握这些技术,可以帮助开发者优化网站性能,提供更好的用户体验。在实际开发中,应...

    浏览器缓存问题处理

    浏览器缓存是Web开发中一个重要的概念,它能够提高网页加载速度,减少网络带宽消耗,但同时也可能导致用户无法获取到最新的更新,特别是在项目发布时。本文将详细讲解浏览器缓存的工作原理,以及如何处理浏览器缓存...

    跨域请求解决方案

    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token'; // 允许的头部信息 add_...

    第14章 http 面试题【前后端分离的时代,网络请求是前端的生命线】.rar

    在前后端分离的开发模式中,HTTP协议成为了前端与服务器之间通信的重要桥梁。这一章的面试题涵盖了HTTP的基础知识、工作原理以及它在前端开发中的应用。以下是对这些知识点的详细解析: 1. **HTTP(超文本传输协议...

    mlf-cache:对前端文件进行清缓存

    mlf-cache 的工作原理通常是通过设置HTTP响应头中的`Cache-Control`和`ETag`字段来控制浏览器的缓存策略。例如,它可以将`Cache-Control`设置为`no-cache`或`max-age=0`,让浏览器每次都向服务器请求确认文件是否是...

    HTTP协议原理+实践 Web开发工程师必学.txt

    - **强缓存**:通过`Expires`和`Cache-Control`控制。 - **协商缓存**:通过`Last-Modified`和`ETag`控制。 #### 八、HTTPS协议简介 HTTPS(Hypertext Transfer Protocol Secure)是在HTTP的基础上加入了SSL/TLS...

    ajax cache重写

    Ajax Cache主要涉及HTTP协议中的缓存机制,包括`Cache-Control`、`ETag`、`Last-Modified`等头部信息。默认情况下,浏览器会根据这些头部信息判断是否需要重新请求资源。然而,对于动态生成的数据,由于每次请求可能...

    阿里巴巴前端开发线上笔试2015

    阿里巴巴前端开发线上笔试2015的题目涵盖了多个前端开发的核心知识点,包括HTTP缓存机制、前端性能优化、移动Web特性、JavaScript Promise、浏览器识别、Node.js模块开发、CSS布局以及Git版本控制。以下是这些知识点...

    清除AJAX的缓存,清除AJAX的缓存

    例如,可以设置`Pragma`、`Cache-Control`和`Expires`头部来禁止浏览器缓存Ajax请求的数据。 ```html &lt;META HTTP-EQUIV="Pragma" CONTENT="no-cache"&gt; &lt;META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-...

    木易杨的前端面试小书.pdf

    - 强缓存和协商缓存用于优化浏览器的资源加载,强缓存通过Expires或Cache-Control实现,协商缓存则是通过Last-Modified或ETag实现。 - 304状态码表示资源未修改,可使用缓存。 5. 安全性: - CSRF(跨站请求伪造...

    前端工程师-高级WEB网站前端开发减少请求数指南.docx

    - 设置合适的缓存策略,如通过设置响应头中的`Cache-Control`和`Expires`字段,可以让浏览器缓存静态资源,减少重复请求。 8. **减少DNS查找时间**: - 尽量减少域名数量,避免因DNS查找带来的延迟。如果必须使用...

Global site tag (gtag.js) - Google Analytics