Fatal编程技术网
  • css/
  • 将CSS与缓存控制连接起来

将CSS与缓存控制连接起来

css .htaccess typo3

将CSS与缓存控制连接起来,css,.htaccess,cache-control,typo3,Css,.htaccess,Cache Control,Typo3,好吧，这里有一个棘手的问题： 我有几个CSS文件，使用缓存破坏这些网站，它工作得很好。我收到的403不是每个电话都修改的 但是现在我在htaccess中使用这个规则来连接我的所有文件 <FilesMatch "\.combined\.css$"> Options +Includes AddOutputFilterByType INCLUDES text/css SetOutputFilter INCLUDES </FilesMatch> …这些是另一个简单

好吧，这里有一个棘手的问题：

我有几个CSS文件，使用缓存破坏这些网站，它工作得很好。我收到的403不是每个电话都修改的

但是现在我在htaccess中使用这个规则来连接我的所有文件


<FilesMatch "\.combined\.css$">
  Options +Includes
  AddOutputFilterByType INCLUDES text/css
  SetOutputFilter INCLUDES
</FilesMatch>
…这些是另一个简单css文件的标题：


Request URL:http://XXX/css/style.css
Request Method:GET
Status Code:304 Not Modified

Request Headers

Accept:text/css,*/*;q=0.1
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:typo3-login-cookiecheck=true; PHPSESSID=2evc53ngjjobateti38gpahtt7; tx_phpmyadmin=quf4sgevagubd1snd9eoq4g4d0; be_typo_user=0f4c7e291b6d7673310d6f15da687910; Typo3InstallTool=62erpih8fmqbbl3pe75pcenuu0; fe_typo_user=a7e5de71521603161fa598ed523b024b
Host:XXX
If-Modified-Since:Wed, 17 Aug 2011 11:45:17 GMT
Referer:http://XXX/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.30 (KHTML, like Gecko) Ubuntu/11.04 Chromium/12.0.742.112 Chrome/12.0.742.112 Safari/534.30

Response Headers

Cache-Control:max-age=31536000, public
Connection:Keep-Alive
Date:Wed, 17 Aug 2011 13:56:42 GMT
Expires:Thu, 16 Aug 2012 13:56:42 GMT
Keep-Alive:timeout=5, max=97
Server:HTTPD
我使用了一个扩展来测量谷歌的页面速度，我得到了以下信息：

指定缓存验证程序

以下资源缺少缓存验证程序。资源 不要指定无法高效刷新的缓存验证程序。 指定上次修改的头或ETag头以启用缓存验证 下列资源：

我该怎么办？

我建议你看看这个项目的出色工作，它为你在新项目中开始打下了良好的基础。但更重要的是，它包含一个带有良好注释规则的pimped out.htaccess文件

以下代码段可能对您特别有用：

# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# These are pretty far-future expires headers.
# They assume you control versioning with cachebusting query params like
#   <script src="application.js?20100608">
# Additionally, consider that outdated proxies may miscache 
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# If you don't use filenames to version, lower the CSS  and JS to something like
#   "access plus 1 week" or so.

<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"

# Your document html 
  ExpiresByType text/html                 "access plus 0 seconds"

# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# Feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>

</IfModule>



# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------

# FileETag None is not enough for every server.
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>

# Since we're sending far-future expires, we don't need ETags for
# static content.
#   developer.yahoo.com/performance/rules.html#etags
FileETag None

#----------------------------------------------------------------------
#Expires标头（用于更好的缓存控制）
# ----------------------------------------------------------------------
#这些都是相当遥远的未来过期标题。
#他们假设您可以通过缓存破坏查询参数来控制版本控制，如
#   
另外，考虑过时的代理可能会误入歧途。
#www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
#如果不使用文件名来设置版本，请将CSS和JS降低到类似的级别
#“访问加1周”左右。
过期于
#也许最好将过期规则列入白名单？也许。
ExpiresDefault“访问加1个月”
#cache.appcache需要在FF 3.6中重新请求（感谢Remy~引入HTML5）
ExpiresByType文本/缓存清单“访问加0秒”
#您的文档是html
ExpiresByType text/html“访问加0秒”
#资料
ExpiresByType text/xml“访问加0秒”
ExpiresByType应用程序/xml“访问加0秒”
ExpiresByType应用程序/json“访问加0秒”
#喂
ExpiresByType应用程序/rss+xml“访问加1小时”
ExpiresByType应用程序/atom+xml“访问加1小时”
#Favicon（无法重命名）
ExpiresByType图像/x图标“访问加1周”
#媒体：图像、视频、音频
ExpiresByType image/gif“访问加1个月”
ExpiresByType图像/png“访问加1个月”
ExpiresByType图像/jpg“访问加1个月”
过期按类型图像/jpeg“访问加1个月”
按类型视频/ogg“访问加1个月”过期
ExpiresByType音频/ogg“访问加1个月”
按类型视频/mp4“访问加1个月”过期
过期按类型视频/webm“访问加1个月”
#HTC文件（css3pie）
ExpiresByType文本/x组件“访问加1个月”
#网络字体
ExpiresByType字体/truetype“访问加1个月”
ExpiresByType字体/opentype“访问加1个月”
过期按类型应用程序/x-font-woff“访问加1个月”
ExpiresByType图像/svg+xml“访问加1个月”
ExpiresByType应用程序/vnd.ms-fontobject“访问加1个月”
#CSS和JavaScript
ExpiresByType文本/css“访问加1年”
ExpiresByType应用程序/javascript“访问加1年”
标头附加缓存控制“公共”
# ----------------------------------------------------------------------
#ETag去除
# ----------------------------------------------------------------------
#FileTag None对于每台服务器都是不够的。
标题未设置ETag
#因为我们发送的是远期到期，所以我们不需要ETag
#静态内容。
#developer.yahoo.com/performance/rules.html#etags
FileTag无
根据Apache的服务器端文档，包括：

在默认配置中，Apache不会在SSI页面上发送上次修改的日期或内容长度HTTP头，因为动态内容很难计算这些值

因此，在浏览器中直接请求
style.combined.css
将永远不会返回未修改状态

但是，如果您正在设置expires headers，浏览器只需从本地缓存中提取资源。检查上次修改日期的请求是不必要的，不会被发送。

HTML5样板正是我使用的！它不起作用：（你写的那个片段，我已经在使用它了。是你正在提供的css文件（script.combined.css）由服务器端代码生成或通过脚本/mod_重写并路由到脚本？我怀疑您使用的是php，如果组合脚本是用php制作的，然后提供给您，您将需要用php来代替…我在帖子中编辑了script.combiend.css的内容。有了它和.htaccess中的规则，这就是我用来生成的全部内容我没有明确使用任何PHP（据我所知）不，那应该没问题。就目前情况而言，这听起来像是页面速度问题，你可能想用chrome检查你对该文件的请求，看看服务器到底发送了什么…但除此之外，我不知所措。标题正好是我看到代码200的地方。我在帖子中写了标题，所以你可以看看是否有错误我从这个问题开始研究，然后问 

Request URL:http://XXX/css/style.css
Request Method:GET
Status Code:304 Not Modified

Request Headers

Accept:text/css,*/*;q=0.1
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:typo3-login-cookiecheck=true; PHPSESSID=2evc53ngjjobateti38gpahtt7; tx_phpmyadmin=quf4sgevagubd1snd9eoq4g4d0; be_typo_user=0f4c7e291b6d7673310d6f15da687910; Typo3InstallTool=62erpih8fmqbbl3pe75pcenuu0; fe_typo_user=a7e5de71521603161fa598ed523b024b
Host:XXX
If-Modified-Since:Wed, 17 Aug 2011 11:45:17 GMT
Referer:http://XXX/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.30 (KHTML, like Gecko) Ubuntu/11.04 Chromium/12.0.742.112 Chrome/12.0.742.112 Safari/534.30

Response Headers

Cache-Control:max-age=31536000, public
Connection:Keep-Alive
Date:Wed, 17 Aug 2011 13:56:42 GMT
Expires:Thu, 16 Aug 2012 13:56:42 GMT
Keep-Alive:timeout=5, max=97
Server:HTTPD

# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# These are pretty far-future expires headers.
# They assume you control versioning with cachebusting query params like
#   <script src="application.js?20100608">
# Additionally, consider that outdated proxies may miscache 
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# If you don't use filenames to version, lower the CSS  and JS to something like
#   "access plus 1 week" or so.

<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"

# Your document html 
  ExpiresByType text/html                 "access plus 0 seconds"

# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# Feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>

</IfModule>



# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------

# FileETag None is not enough for every server.
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>

# Since we're sending far-future expires, we don't need ETags for
# static content.
#   developer.yahoo.com/performance/rules.html#etags
FileETag None