静态资源使用时间戳控制浏览器缓存

2024-05-20 11:07:06

前言：

我们访问一些网站的是时候，经常看到静态资源后面都有一个时间戳或日期之类的，其实是为了控制缓存，如图左：

Http响应码304

这里我们先谈下http响应码304，首先304状态码表示浏览器数据未发生改变，直接使用本地缓存。

请求过程：

浏览器向服务端请求资源，服务器会看是否携带Last Modified头，即上次修改时间，若没有则响应200；
若有则比较 Last Modified和服务端资源修改时间，若客户端资源修改时间小于服务器资源修改时间，则响应200；若大于则响应304，直接使用客户端缓存。

为什么静态资源要加时间戳

上面讲到Http 304状态码其实已经帮我们实现了控制缓存功能 (其实缓存功能本质是浏览器帮我们实现的，这点要分清)，为什么还要再静态资源后面加时间戳呢？

其实，在生产环境中，我们会存在资源频繁的修改和上线的情况，有时会存在这样的情况：

服务器在2019-10-01上线

用户在2019-10-05访问，浏览器记录下修改时间

2019-10-05上线新css/js等文件，最后一次修改时间还是保留上次上线的时间（极端情况）

2019-10-06 用户再次访问，发现客户端最后修改时间 > 服务器文件修改时间，因此不会刷新缓存

为了避免浏览器一直使用旧的缓存资源，所以上线时，一般都会给静态资源加上一个时间戳(一般为上线日期)，如 index.js?v=2019-5-15 ，实现强制刷新浏览器缓存。

温馨提示: 作为用户来说当发生缓存不更新时，我们可以清除浏览器缓存，或使用Ctrl+F5强制刷新。

静态资源使用时间戳控制浏览器缓存相关推荐

2.11 Nginx控制浏览器缓存
浏览器缓存: 加速用户访问,提升单个用户(浏览器访问者)体验,缓存在本地 Nginx缓存缓存在nginx端,提升所有访问到nginx这一端的用户提升访问上游(upstream)服务器的速度用户访 ...
Nginx静态资源优化、压缩、缓存
这一篇记录一下Nginx压缩缓存相关的指令,各位看到此博客的小伙伴,如有不对的地方请及时通过私信我或者评论此博客的方式指出,以免误人子弟.多谢! 目录优化 sendﬁle tcp_nopush tc ...
引用js/css时，加入时间戳解决浏览器缓存问题
解决思路:在引入的url后面加上时间戳,每次请求获取最新的js/css var timestamp=new Date().getTime():<script type="text/ja ...
解决加载静态文件无法被浏览器缓存问题
开发环境是:nginx+spring boot + thymeleaf. 遇到的问题:js/css等静态资源文件不被浏览器缓存:如果是本地开发环境不会有这个问题. 解决方法是:nginx设置gzip和 ...
前端工程与性能优化：静态资源版本更新与缓存
2019独角兽企业重金招聘Python工程师标准>>> 每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎14条性能优化原则,还有两本很经典的 ...
浏览器缓存导致FLASH资源更新问题的解决方案
在网上搜浏览器缓存问题时,遇上了很多问题.一是不知道应该用何种关键字搜索,二是一搜出来,就全是讲的是如何禁用浏览器缓存的方案. 作为大型点的FLASH WEBGAME来说,不缓存显然是不行的.总体上来 ...
ngnix mysql 缓存清除_利用Proxy Cache使Nginx对静态资源进行缓存
前言 Nginx是高性能的HTTP服务器,通过Proxy Cache可以使其对静态资源进行缓存.其原理就是把静态资源按照一定的规则存在本地硬盘,并且会在内存中缓存常用的资源,从而加快静态资源的响应. ...
版本更新带来的缓存问题_浏览器缓存原理总结
作者: Poetry 来源:http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识分为强缓存和协商缓存 1.浏览器在加载资源时, ...
里面怎么缓存图片_浏览器缓存原理总结
一.浏览器缓存基本认识分为强缓存和协商缓存 1.浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务 ...

最新文章

热门文章