避免Javascript / Css缓存 [英] Avoid Javascript/Css caching

问题描述

我一直在搜索很多相关内容，但找不到真正有效的解决方案：我们正在使用大量可随时修改的javascript / css文件构建网络应用。问题是我们需要客户端的浏览器始终获取脚本的最新版本。

I've been searching a lot about this, but I can't find any solution that really works: we're building a web app using lot of javascript/css files, which are modified at anytime. The thing is that we need that the client's browser always gets the last version of the script.

我们尝试添加GET查询（？v = CurrentDate），但是浏览器一直加载旧脚本，直到您单击几次刷新或执行CTRL + F5。

We tried adding the GET query (?v=CurrentDate), but the browser keeps loading the old script until you hit refresh a few times or do CTRL+F5.

我们要避免的一件事是将这些文件存储在/ scripts等不同的文件夹中/v1.0/，然后是/scripts/v2.0 /...

One thing we want to avoid is to store those files in different folders like /scripts/v1.0/, then /scripts/v2.0/...

我们正在使用ASP.NET MVC 5，Bootstrap和JQuery。重要的一件事：我们只想避免某些脚本/ css缓存，而不是全部。

We're using ASP.NET MVC 5, Bootstrap and JQuery. One important thing: we only want to avoid some scripts/css caching, not everything.

我非常感谢您的帮助！
谢谢！

I really appreciate your help! Thanks!

推荐答案

浏览器缓存是浏览器存储远程资源结果的功能。该过程相当简单：它记住从中请求资源的 url 和响应。如果在缓存资源时再次请求资源而不是进行调用，则浏览器将从缓存中提供已保存的副本，因为这样可以节省带宽和时间。

Browser caching is the ability of a browser of storing results from remote resources. The process if fairly simple: it remembers the url the resource was requested from and the response. If, while the resource is cached, the resource is requested again, rather than making the call, the browser serves the saved copy from cache, as it saves bandwidth and time.

如果您向资源调用添加 总是唯一的 的参数，则浏览器将始终重新加载它，因为该参数将被更改，并且浏览器将假定它是不同的资源。

If you add a parameter that is always unique to a resource call, the browser will always reload it, because the parameter will be changed and the browser will assume it's a different resource.

通常，以秒（php时间戳）或毫秒（javascript时间戳）表示的时间戳将确保您的资源将始终重新加载：

Typically, a timestamp in either seconds (php timestamp) or milliseconds (javascript timestamp) will make sure your resource will always be reloaded:

<script src id="myScript"></script>
<script type="text/javascript">
   // change path to match your file:
   let resourcePath = '/js/someScript.js';

   document.getElementById('myScript').src = resourcePath + '?v=' + Date.now();
</script>

PhP：

PhP:

<script src="/js/someScript.js?v=<?=time();?>"></script>

注意：您可以对任何其他资源（ .css 或媒体资源）以禁用缓存。另外请注意，从技术上讲，您并不是禁用缓存-并非那么容易，并且因浏览器而异。您允许缓存，但您始终在请求其他资源，因为它具有不断变化的伪参数（例如，可以将其从 v 重命名为其他任何参数） ，以？no-cache = ）。

Note: you can do the same for any other resource (.css or media resources), to disable caching. Also note you're not, technically, disabling caching - that's not so easy to do and differs from browser to browser. You are allowing caching but you're always requesting a different resource, because it has the bogus parameter which keeps changing (and which could be renamed from v to anything else, for example, to ?no-cache=).

这篇关于避免Javascript / Css缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！