从我一直注意到的,如果我有一个CSS文件和10个网页使用相同的CSS文件,每次我去一个新的页面,它重新下载的CSS文件。
有什么方法可以防止这种情况发生吗?所以如果客户端已经下载了一次,那么就不用再下载了吗?
由于浏览器缓存,它已经是这样了。别担心。
在css文件中添加expires头,这样浏览器就不会尝试下载新版本。即使你的css文件被缓存了,如果文件被修改了,你的浏览器也会向服务器发送一个请求。
Threre are two ways
1. use .htacess in that folder and set something like this
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>
2. Use PHP
function __read($files)
{
$data = '';
foreach ($files as $file)
{
$FileName =WEBROOT . $file;
if (file_exists($FileName))
{
$fileHandle = fopen($FileName, 'r');
$data .= "/*--#--".$file."--#--*/".fread($fileHandle, filesize($FileName));
fclose($fileHandle);
}
}
return $data;
}
$files[] = "css/frontend/registration.css";
$files[] = "css/frontend/default.css";
$data = $this->__read($files);
// Tell the browser that we have a CSS file and send the data.
if (isset($data))
{
header("Content-type: text/css");
header("Cache-Control: public");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 3600 * 24 * 7) . " GMT");
header("Etag: ".md5_file(__FILE__));
echo $data;
}
您是否有权访问httpd.conf或.htaccess配置文件?(当然是在Apache服务器的情况下)
如果是,请考虑以下设置:
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对这些设置非常敏感。
哦,如果你不确定你的缓存;使用http://www.redbot.org/来测试你的资产,它会快速告诉你你的标题对浏览器意味着什么,以及如何解释你使用的不同缓存控制设置。
我认为你应该为你的css使用相同的域名,例如,如果你有3个网页:
http://example.com
http://example2.com
http://example3.com
所以在每个主机上你都应该使用例如这个CSS url:
<link href="http://static.example.com/css/style.css" rel="stylesheet" type="text/css" />
那么浏览器应该缓存这个文件,而不是每次都下载它,因为url总是相同的