js、css版本控制,解决文件缓存问题

首先,介绍几个常用的 HTTP 响应的状态码:

200 - 服务器已成功处理了请求,并返回所请求的内容。

304 - 自从上次请求后,请求的内容未修改过,浏览器直接从本地缓存中取得,服务器则不会返回。

404 - 服务器找不到请求的内容,通常,对于服务器上不存在的网页经常会返回此状态码。

回到本文主题,一般浏览器打开网页时都会对 JS、CSS 文件进行缓存,以便在下次打开时可以直接从缓存中取出,而不用费劲地向服

务器再次请求。可是如果 JS、CSS 文件在服务器那边被修改过,浏览器从本地缓存中取得的文件就不是最新的了。

这个问题怎么解决?其中一个方法就是为 JS、CSS 文件加上版本号,如:

<link rel="stylesheet" href="/Public/css/index.css?version=20160223" />

<script src="/Public/js/search.js?version=20160223" type="text/javascript"></script>

每当 JS、CSS 文件被修改时,就在调用它的路径后面把版本号也给改了,这样一来,浏览器检测到版本号发生变化,就会向服务器重新请求相应的 JS、CSS 文件了。

在 Google 浏览器的调试工具中,Network 选项卡可以查看文件的请求/响应情况,状态码为 200 表示文件从服务器传来的,304 

表示文件是取自浏览器缓存的。

但是我改变版本号之后,第一次刷新(F5,非 Ctrl+F5)还是 304,要刷新两到三次才变成 200。这个问题还需进一步研究......

这个方法的缺点就是:每次修改文件,都要改写版本号,而且如果在多个地方调用了这个文件,还要改多个地方。

所以有必要寻找更好地版本控制的方法。

猜你喜欢

转载自blog.csdn.net/qq_26346941/article/details/81302344