为什么我的 javascript & 不是 CSS 缓存？

发布于 2024-07-18 10:39:09 字数 1584 浏览 10 评论 0原文

看来只有 javascript 和 css 没有缓存...但图像正在缓存。

我正在使用 Firebug，当我刷新页面时，我注意到 Firebug 中有很多 js/css 的 200 HTTP 响应，但收到 304 HTTP 代码（内容未修改）对于我所有的图像。看来我的 JS 和 CSS 没有缓存。

另外，当使用 YSlow 帮助确定我的 JS/CSS 内容未缓存的问题时，它通知我：

有 4 个组件的 ETag 配置错误
http://www.example.com/css/basic.css< /里>
http://www.example.com/js/ga.js< /里>
http://www.example.com/js/dojo/dojo.js< /a>

列出下面是我的 .htaccess 文件

Options -Indexes
Options +FollowSymLinks  

# Enable ETag
FileETag MTime Size

# Set expiration header
ExpiresActive on
ExpiresDefault "access plus 1 week"

# Compress some text file types
AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript application/json

# Deactivate compression for buggy browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Set header information for proxies
Header append Vary User-Agent

知道我的 .htaccess 访问文件出了什么问题导致它无法缓存我的 CSS 或 JavaScript 吗？

原文

It's appears ONLY javascript and css are not caching ... but images are caching.

I am using Firebug and when I refresh the page, I notice in Firebug a lot of 200 HTTP responses for js/css but am receiving 304 HTTP codes (content not modified) for all of my images. So it appears that my JS and CSS are not caching.

Also, when using YSlow to help determine the problem with my JS/CSS content not caching, it informs me that:

There are 4 components with misconfigured ETags
http://www.example.com/css/basic.css
http://www.example.com/js/ga.js
http://www.example.com/js/dojo/dojo.js

Listed below is my .htaccess file

Options -Indexes
Options +FollowSymLinks  

# Enable ETag
FileETag MTime Size

# Set expiration header
ExpiresActive on
ExpiresDefault "access plus 1 week"

# Compress some text file types
AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript application/json

# Deactivate compression for buggy browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Set header information for proxies
Header append Vary User-Agent

Any idea what's wrong with my .htaccess access file preventing it from caching my CSS or JavaScript?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

涫野音 2024-07-25 10:39:09

请考虑禁用 ETag！

请考虑以下设置：

Header unset ETag
FileETag None
Header set Cache-Control "max-age=2678400"

前两条规则完全禁用 ETag，因此浏览器在某种程度上被迫监听 Cache-Control 标头。最后一条规则告诉浏览器将文件缓存 2678400 秒，即 1 个月。将设置调整为最适合您的设置。并将此配置应用于包含静态文件的目录（例如，通过在该目录中放置 .htaccess 文件）

可选，如果您使用多个服务器来提供静态内容，和/或不确定最后修改的内容次这些服务器报告，考虑使用：

Header unset Last-Modified

它告诉 Apache 不提供任何 Last-Modified 标头，因此浏览器只能侦听 Cache-Control max-age 标头。

我自己在许多高流量网站上使用了此设置，禁用 ETag 和 Last-Modified 标头确实有助于将流量降低到以前的五分之一。尤其是 Internet Explorer 对这些设置非常敏感。

请注意：禁用 Last-Modified 将阻止浏览器询问 304 Content Not Modified 请求。根据我的经验，这是积极的，因为网络服务器需要处理的请求较少，并且浏览器更多地依赖于您提供的缓存控制设置。但它可能适合也可能不适合你。如果您为某些浏览器提供“Last-Modified”标头，某些浏览器会每隔几分钟尝试验证一次资源，这就是为什么我建议完全禁用它。

哦，如果你不确定你的缓存；使用 http://www.redbot.org/ 来测试您的资产，它可以快速告诉您标题的含义浏览器，以及如何解释您使用的不同缓存控制设置。

Please, consider disabling ETag's!

Consider the following settings:

Header unset ETag
FileETag None
Header set Cache-Control "max-age=2678400"

The first two rules disable ETag's completely, so the browser is somewhat forced to listen to the Cache-Control header. The last rule tells the browser to cache the file 2678400 seconds, or 1 month. Tweak the settings to what suits you the most. And apply this configuration on your dir which contains the static files (by, for example, placing an .htaccess file in that dir)

Optional, if your using multiple servers to serve static content, and/or are not sure about the last-modified times those servers report, consider using:

Header unset Last-Modified

It tells Apache to not serve any Last-Modified headers, so browsers can only listen to the Cache-Control max-age header.

This settings are used by myself on lots of hightraffic websites, and disabling of ETag's and Last-Modified headers sure helped to drive traffic down to one fifth of what it used to be. Especially Internet Explorer is very sensitive to those settings.

Be warned: Disabling Last-Modified will stop browsers from asking 304 Content Not Modified requests. In my experience this is positive, because the webserver has less requests to process, and browsers rely more on the Cache-Control settings you serve. But it may or may not suit you. Some browsers will try to validate assets every few minutes if you serve them a "Last-Modified" header, and that's why I would advice to disable the use of it completly.

Oh, and if you're not sure about your caching; use http://www.redbot.org/ to test your assets, it tells you quickly what your headers mean to a browser, and how to interpret different cache-control settings you use.

回复收藏 0 原文

不爱素颜 2024-07-25 10:39:09

如果 etag 不遵循特定模式，YSlow 会报告配置错误的 etag。由于您正在压缩 css 和 js，因此 etag 的输出如下所示：

Etag "1e10-4889909861a80"-gzip

看到末尾的 -gzip 了吗？它是由 apache 放置在那里的（仅限版本 2）。这就是导致“错误”的原因。 YSlow 期望看到这样的内容：

Etag "xxxx-xxxxxxxxxxxxx"

基本上，你无法修复这个问题，因为它没有损坏。因此，如果您不知道自己在做什么，请不要疯狂地试图获得满分。即使雅虎主页也只得到了 90 分。

YSlow reports misconfigured etags if they don't adhere to a certain pattern. Since you're compressing the css and js, the etags are being output something like this:

Etag "1e10-4889909861a80"-gzip

See the -gzip at the end? It's put there by apache (version 2 only). That is what's causing the "error". YSlow expects to see something like this:

Etag "xxxx-xxxxxxxxxxxxx"

Bascially, you can't fix this because it's not broken. So don't go crazy trying to get a perfect score if you don't know what your doing. Even that yahoo home page only gets a 90.

回复收藏 0 原文