我们每时每刻使用的互联网、移动手机APK,都是由各种各样的资源拼成的html(JS、css)页面 。这些资源绝大多数是静态资源,他们大多数都是不需要实时更新的 。比如图片,CSS样式,JS库,这些静态资源构成了互联网的框架 。比如我们用浏览器追踪(F12->网络)某知名互联网网站首页:
![每一个Web开发者需要掌握的HTTP缓存知识](http://img.jiangsulong.com/220409/19260I423-0.jpg)
文章插图
这些资源文件都很小,但是由于往往需要每次刷新页面时候都会重新下载,如果有什么方法可以减少对这些图像、样式等固定文件的下载,只获取必须API实时的数据然后渲染页面则用户访问肯定会更快更流畅 。其实上HTTP协议本身就提供一个强大的机制来解决这个问题,这就是今天虫虫要给大家介绍的HTTP Cache缓存 。作为一个Web开发者必须熟练掌握HTTP的缓存机制,它可以帮我们节省大量的带宽、服务器硬件,极大的优化我们网站和App的性能改善用户体验 。
缓存基础知识我们首先从概述缓存基本概念讲起 。如果我们知道一些资源(图片,CSS样式文件等)在一段时间内会不改变,则可以用缓存保存这些资源 。在设置的时间内,资源被认为是新鲜(fresh),过了这段时间后设置它的状态为过期(stale) 。
缓存允许客户端(例如浏览器)尽可能长时间地保留住资源,然后过期后丢弃它再从服务器获取新版本 。为了使缓存机制能生效,需要一种方法来发送资源的过期时间 。
为了解决这个问题,HTTP提供了两种主要方式 。下面我们首先讨论第一种方法 。
![每一个Web开发者需要掌握的HTTP缓存知识](http://img.jiangsulong.com/220409/19260JE7-1.jpg)
文章插图
缓存过期Expires和HTTP/1.0缓存的源起缓存过期ExpiresExpires是在HTTP/1.0协议中引入的,它与Pragma,Last-Modified和If-Modified-Since共同构成了HTTP缓存体系 。Expires也是我们可以使用的最简单的HTTP缓存标识头,表示给定资源过期的时间 。我们来看一个例子:
![每一个Web开发者需要掌握的HTTP缓存知识](http://img.jiangsulong.com/220409/19260G621-2.jpg)
文章插图
上图中这个logo的过期时间为"Expires: wed, 15 May 2019 88:07:42 GMT" 。如果超过Expires指定的日期,浏览器就会尝试重新获这个资源取 。到期之前浏览器都会缓存这个资源,刷新页面时候并不会再从服务下载 。
使用Last-Modified和If-Modified-Since验证要做到完美的缓存,就要做到仅仅在确定资源更新时候才重新下载它 。实现这个目标的一种方法是允许浏览器根据这个资源去询问服务端 。浏览器怎么确定目前资源的更新版本呢?有一个HTTP请求If-Modified-Since标识 。
假设我们在该资源过期日期5月16日请求该资源,客户端浏览器会发起请求:
![每一个Web开发者需要掌握的HTTP缓存知识](http://img.jiangsulong.com/220409/19260H4I-3.jpg)
文章插图
请求头总包含"If-Modified-Since",它表示浏览器已经下载过服务器18年12月25日修改过的版本 。收到该请求后,服务器会判断,这个日期之后,图像是否已经更新,如果是,则服务器会响应下载新的图像下载 。否则响应"304 Not Modified"
![每一个Web开发者需要掌握的HTTP缓存知识](http://img.jiangsulong.com/220409/19260J5Y-4.jpg)
文章插图
收到此这个响应,浏览器就从浏览器缓存中读取资源,不再从服务器下载 。通过使用Last-Modified和If-Modified-Since可以确保客户端不会重复下载资源,也可以确保服务器端有变化时候,客户端可以及时更新到最新的资源 。
用Pragma更新缓存虽然HTTP/1.0没方法让服务器告诉客户端不缓存特定资源,但通过客户端请求可以设置HTTP请求头,不为该资源请求缓存,这个头方法叫Pragma:
Firefox的调试工具中,有个"禁用缓存"的复选框,选择后,HTTP请求就会自动在请求头中增加"Cache-Control: no-cache"
![每一个Web开发者需要掌握的HTTP缓存知识](http://img.jiangsulong.com/220409/19260I154-5.jpg)
文章插图
该请求就不会使用缓存直接从服务器请求该资源,如下图,HTTP状态码返回为200而非之前的304 。
![每一个Web开发者需要掌握的HTTP缓存知识](http://img.jiangsulong.com/220409/19260M128-6.jpg)
文章插图
Pragma最初设计可能为了抓取标题所用 。后续的HTTP/1.1为兼容也严格支持该选项 。
HTTP/1.1和cache-control为了克服Expires的局限性,HTTP/1.1中引入了cache-control,极大地增强了开发人员管理缓存资源的灵活性 。cache-control不严格依赖日期,而通过一些指令来完成对缓存的管理 。
输入max-age指令我们可以将max-age指令看成是对Expires的简单替代方法 。比如上面对应于5月15号,一个月过期的日期(259200s),对应的cache-control头进行响应:
推荐阅读
- Web应用程序测试的工具selenium用法详解
- Nginx/Lighttpd/Apache三大web服务器对比分析
- 本地Docker Jenkins构建dotcore web应用到Linux服务器 Docker上
- 编写自己的漏扫—Web漏洞扫描技巧篇
- 浅谈Web前端开发技术
- Web前端开发,必须要了解的四种跨域解决方案
- 如何挑选水蜜桃
- 如何挑选白油
- 管理Linux不想用命令行?可以试试Webmin!最新CentOS8上体验一下
- 快速用 Haskell 构建超级简单的 Web 技术栈