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

「爱情、让人受尽委屈。」 2022-10-01 07:52 286阅读 0赞

# 浏览器静态资源缓存策略 #

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

## 强制缓存 ##

*  强制缓存:就是强制使用浏览器缓存下来的资源;
    
     *  在指定的一段时间内用自己缓存的文件就行，不需要再次发出请求。
     *  具体的实现就是在该次请求的返回头部(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;
     *  如果强制缓存和协商缓存的字段同时存在，强制缓存优先。

## 两种缓存策略的优缺点比较： ##

*  强制缓存的缺点：就是可能在强制的这段时间里服务器文件更新了，那浏览器就读不到最新的资源了；
 *  协商缓存的缺点：就是每次都要发个请求去问服务器资源是否更新，可能造成不必要的**时间和流量**浪费；

## Issue:是否有折中的解决方案？ ##

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

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

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

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

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

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

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fbestyjava%2Farticle%2Fdetails%2F82255424
[nginx]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fyu12377%2Farticle%2Fdetails%2F77875045