防止重復下載同一CSS文件

Question

從我一直注意到的情況來看，如果我有1個CSS文件和使用同一CSS文件的10個網頁，那么每次我轉到新頁面時，它都會重新下載CSS文件。

無論如何，我可以防止這種情況發生嗎？ 因此，如果客戶端下載了一次，那么就不用再做一次了嗎？

Answer 1

就像“瀏覽器緩存的原因”一樣。 不用擔心

Answer 2

將過期標頭添加到您的css文件，因此瀏覽器不會嘗試下載更新的版本。 即使您的css文件被緩存，如果文件已更改，瀏覽器也會向服務器發送請求。

Answer 3

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;
    }

Answer 4

您可以訪問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/測試您的資產，它可以快速告訴您標題對瀏覽器的含義，以及如何解釋您使用的不同緩存控制設置。

Answer 5

我認為您應該為CSS使用相同的域，例如，如果您擁有3個網頁：

http://example.com
http://example2.com
http://example3.com

因此，在每台主機上都應使用以下CSS網址：

<link href="http://static.example.com/css/style.css" rel="stylesheet" type="text/css" />

然后瀏覽器應該緩存該文件，而不是每次都下載它，因為url總是相同的。