浏览器缓存问题处理

最新推荐文章于 2022-04-20 18:05:46 发布

明豆

最新推荐文章于 2022-04-20 18:05:46 发布

阅读量1.3k

点赞数 2

文章标签：后端 http https 服务器 javascript

本文链接：https://blog.csdn.net/u012690202/article/details/104617307

版权

最近在项目发布的过程中，我经常会遇到这种情况。发布的静态文件（包括图片、js文件、css文件等等）在浏览器中未生效。针对此种情况，我在网上找了很多资料，终于让我有所了解。

在说解决方案之前，我们要先了解一下http请求文件的过程。通常情况下，经过三次握手建立TCP连接之后，客户端就开始发送http请求，服务器接收到请求后，会根据自身的设置来判断是否将最新的文件返回给客户端。根据以上的请求过程，我们来分析一下，为什么浏览器会有缓存。有两种可能：客户端没有向服务器发送文件请求；服务器接收到请求后，没有向客户端返回最新文件。

一、针对第一种可能性，主要涉及到的是http请求及响应中头部的Cache-Control和Expired字段。

1、Cache-Control字段

请求头中Cache-Control的取值为no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached。

响应头中Cache-Control的取值为public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。

下面是常用的Cache-Control组合：

no-cache: 数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age, 则缓存期间不访问服务器。
no-store: 不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)。
private(默认): 只能在浏览器中缓存, 只有在第一次请求的时候才访问服务器, 若有max-age, 则缓存期间不访问服务器。
public: 可以被任何缓存区缓存, 如: 浏览器、服务器、代理服务器等。
max-age: 相对过期时间, 即以秒为单位的缓存时间。
no-cache, private: 打开新窗口时候重新访问服务器, 若设置max-age, 则缓存期间不访问服务器。
- private, 正数的max-age: 后退时候不会访问服务器。
- no-cache, 正数的max-age: 后退时会访问服务器。

2、Expired字段

设置绝对过期时间，在此时间之前，均使用浏览器缓存。但是相比于Cache-Control，优先级较低，所以若同时设置了Cache-Control和Expired字段，以Cache-Control为准。

二、针对第二种可能性，主要涉及的是http请求头中的If-Modified-Since字段

当http向服务器请求文件时，服务器会根据自身设置，决定是否比较请求头中的If-Modified-Since字段和服务器本地文件的修改时间，从而决定是否返回最新文件。

三、解决办法

1、设置版本号

这是常用的解决办法。在引用静态文件的代码中，在静态文件的url路径后添加版本号变量，此变量一般为随机数或与当前日期相关的时间戳，不做特殊要求，只要唯一即可。如https://baidu.com/test/test.js改为https://baidu.com/test/test.js?ver=随机数。这样做的目的，是让浏览器和服务器认为，此文件为新引入的文件路径，从而获取到最新的文件。

此方法适用于新建项目。因为老的项目代码框架已固定，若要对所有静态文件设置统一的版本号，代码改动量太大。

2、设置页面的请求缓存机制

针对某些需要实时获取的文件，我们可以在相应的请求头中设置Cache-Control和Expired字段

3、设置服务器的缓存响应机制

（1）iis服务器

通过对静态文件所在文件夹设置web内容过期时间。具体操作如下：

第一步，在iis管理器上找到对应的文件夹并点击，然后双击右侧的HTTP响应标头。