防止同一个CSS文件被反复下载


Preventing the same CSS file to be downloaded over and over

从我一直注意到的,如果我有一个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总是相同的