Javascript .js 文件是否被缓存？

Are the .js files being cached?

提问by Mark Kramer

I recently made a website and I made a change to a .js file, but when I delete the .js file from the FTP server and upload the new one, the new file doesn't show up on the website. I checked the source code behind the .js file on the website and it's not right, it's showing the source for the old file, not the new one even though the old one is gone. Is that because my browser cached the .js file?

我最近做了一个网站，我对 .js 文件进行了更改，但是当我从 FTP 服务器中删除 .js 文件并上传新文件时，新文件没有显示在网站上。我检查了网站上 .js 文件背后的源代码，这是不对的，它显示的是旧文件的源代码，而不是新文件的源代码，即使旧文件已经消失。那是因为我的浏览器缓存了 .js 文件吗？

Note: I have this source

注意：我有这个来源

<meta http-equiv="cache-control" content="no-cache" />

on my page to stop the browser from caching my page, and I know that works on the HTML, but with that source there, do the resource files still get cached?

在我的页面上阻止浏览器缓存我的页面，我知道这适用于 HTML，但是有了那个源，资源文件是否仍然被缓存？

I don't have that line of code on my other pages, just my home page, but the .js file is still referenced on the other pages so perhaps that is how it is getting cached?

我的其他页面上没有那行代码，只有我的主页，但是 .js 文件仍然在其他页面上被引用，所以也许这就是它被缓存的方式？

Furthermore, is there a way to check your browsers cache? I use chrome.

此外，有没有办法检查浏览器缓存？我用铬。

Edit: I just cleared my browsers cache and reloaded the website and the file worked as it should now, so that means the file did get cached. So now my question becomes how to I prevent a resource file from being cached?

编辑：我刚刚清除了浏览器缓存并重新加载了网站，该文件现在可以正常工作，因此这意味着该文件确实被缓存了。所以现在我的问题变成了如何防止资源文件被缓存？

回答by ZenMaster

I am not positive that no-cache metatag is the way to go. It negates allcaching and kind defeats the purpose of quickly accessible pages.

我并不肯定 no-cachemeta标签是要走的路。它否定了所有缓存，并且种类违背了快速访问页面的目的。

Also, AFAIK, metatag works per page, so if you have a page without it that references your JS - it will be cached.

此外，AFAIK，meta标签每页工作，所以如果你有一个没有它的页面引用你的 JS - 它会被缓存。

The widely acceptable way of preventing JS files (and, again, CSS) from being cached is to differentiate the requests for them:

防止 JS 文件（以及 CSS）被缓存的广泛接受的方法是区分对它们的请求：

Say, you have:

说，你有：

<script type=”text/JavaScript” src=”somescript.js″></script>

this one will cache it (unless the above meta-tag is present.

这将缓存它（除非存在上述元标记。

What you want to have is that on each page load the above line looks different (URL-wise) like so:

您想要的是，在每个页面加载上，上面的行看起来不同（URL 方式），如下所示：

<script type=”text/JavaScript” src=”somescript.js?some-randomly-generated-string″></script>

Same goes for CSS.

CSS 也是如此。

If you were using some sort of JS network - it would take care of that for you had you given it some sort of "no-cache" configuration option.

如果您正在使用某种 JS 网络 - 它会为您提供某种“无缓存”配置选项。

You, of course, can do it in pure JS too. Some sort of Daterelated string is an option.

当然，您也可以在纯 JS 中做到这一点。某种Date相关的字符串是一种选择。

---

---

Now, normally, you would not want to negate all the caching, so the way to do so is to add a version parameter to your URL:

现在，通常情况下，您不想取消所有缓存，因此这样做的方法是向您的 URL 添加一个版本参数：

<script type=”text/JavaScript” src=”somescript.js?version=1.0.0″></script>

and manage your scripts from there.

并从那里管理您的脚本。

EDIT

编辑

There is no need for any additional extension. Unless I am sorely mistaken, "Chrome Developer Tools" is built in in all Chrome versions (in beta and dev, for sure) and is accessible by pressing Ctrl-Shift-I. There, in "Network" tab, you can see all your requests, there content and headers.

不需要任何额外的扩展。除非我大错特错，“Chrome 开发者工具”内置于所有 Chrome 版本（在测试版和开发版中，当然），并且可以通过按Ctrl-Shift-I 访问。在那里，在“网络”选项卡中，您可以看到所有请求、内容和标题。

回答by Cristi

Yes. The resources are still cached. In my opinion a good practice to avoid this is to version your resources files in a url?parameter=value way.

是的。资源仍被缓存。在我看来，避免这种情况的一个好做法是以 url?parameter=value 方式对资源文件进行版本控制。

For example you should set the ulr to your js or css file like this: < ... src="script.js?v=1" .../> < ... href="style.css?v=1 .. /> and when any changes occured just change v=1 to v=2 ...

例如，您应该将 ulr 设置为您的 js 或 css 文件，如下所示： < ... src="script.js?v=1" .../> < ... href="style.css?v=1 .. /> 并且当发生任何更改时，只需将 v=1 更改为 v=2 ...

that will not affect your code but will make your browser/proxy etc to redownload the resource

这不会影响您的代码，但会使您的浏览器/代理等重新下载资源

回答by thwd

Use an incognito instance of chrome (ctrl+shift+n) to check the source, this mode won't use any cached files. With this you can check if your file is being cached on the client side.

使用 chrome 的隐身实例 (ctrl+shift+n) 检查源，此模式不会使用任何缓存文件。有了这个，您可以检查您的文件是否正在客户端缓存。

If it's on the client side make sure your server is not sending cache-control headers along with the JS file.

如果它在客户端，请确保您的服务器没有与 JS 文件一起发送缓存控制标头。

If it's on the server then there's a ton of possibilities, maybe you have a reverse proxy, a physical load-balancer or some other type of caching mechanism.

如果它在服务器上，那么有很多可能性，也许你有一个反向代理、一个物理负载平衡器或一些其他类型的缓存机制。

Edit(question changed):

编辑（问题已更改）：

Use this chrome extensionto check the headers being sent along with your .js files. There's probably a cache-control header set that instructs chrome to cache the resource.

使用此 chrome 扩展程序检查与 .js 文件一起发送的标头。可能有一个缓存控制标头集指示 chrome 缓存资源。

If you're on apache you can override this behaviour using an .htaccess file.

如果您使用 apache，您可以使用 .htaccess 文件覆盖此行为。