前端web：浏览器静态资源缓存策略

最新推荐文章于 2024-05-13 13:41:28 发布

weixin_34009794

最新推荐文章于 2024-05-13 13:41:28 发布

阅读量1.3k

点赞数

文章标签：前端后端运维 ViewUI

原文链接：https://juejin.im/post/5cb9d5086fb9a068a256c005

版权

浏览器静态资源缓存策略

浏览器其实提供了两种控制策略，分别是强制缓存和协商缓存

强制缓存:就是强制使用浏览器缓存下来的资源;
- 在指定的一段时间内用自己缓存的文件就行，不需要再次发出请求。
- 具体的实现就是在该次请求的返回头部(Response Headers)加上一个字段,标识这段不需要请求的时间有多长，这个字段在http1.0是Expires，在http1.1是Cache-Control，俩字段同时存在的话1.1优先级肯定大于1.0;

协商缓存:就是浏览器和服务器需要协商一下才能确定是用浏览器缓存的还是用服务器的。
- 具体的实现就是在该次请求的返回头部(Response Headers)加上一个字段,标识这个文件的版本，这个字段在http1.0是Last-Modified，在http1.1是Etag，俩字段同时存在的话1.1优先级肯定大于1.0;
- 如果强制缓存和协商缓存的字段同时存在，强制缓存优先。

答：添加文件指纹并且进行文件名关联
复制代码

在html中引用添加了文件指纹的文件

一般访问网页的入口文件都是html(后端模板文件也可视为html)，这个策略：
- 是对html永远不进行缓存，始终使用服务端的最新版，
复制代码

浏览器在渲染该html时会去加载里面引用到的资源文件
将每个资源文件的都设置为强制缓存，并且设置成超长过期时间，那文件发生修改浏览器如何获取最新版本的文件呢？
很简单，比如说一张图片发生了修改，那么这张图片的文件指纹就会改变，随之涉及所有资源文件都会发生级联改变，引用了这张图片的样式表css文件也会改变(因为这张图片名字变了)，而引用了该样式表的入口文件html随之也会改变(因为样式表名字变了)，而用户再次访问该入口html文件时，自然就会去加载这些改变了名字的”新文件”。
这样就完美了，实现文件没变动的时候就用本地缓存的，文件发生变动了就用服务器那边最新的，始终保持最新最快。

参考

服务器端静态资源缓存策略：nginx静态资源缓存策略配置

转载于:https://juejin.im/post/5cb9d5086fb9a068a256c005

关注