防止相同的CSS文件被反覆下載

從我注意到的情況來看，如果我有1個CSS文件和10個使用這個CSS文件的網頁，每次我去到一個新頁面，它都會重新下載CSS文件。防止相同的CSS文件被反覆下載

無論如何我可以防止這種情況發生？所以如果客戶端下載了一次，那麼不要再費心去做了嗎？

來源

2011-12-09 D. Rattansingh

在Web服務器上正確設置緩存。看到這個類似的問題：http://stackoverflow.com/questions/841209/why-isnt-my-javascript-css-caching –

它已經是這樣的原因瀏覽器緩存。別擔心。

來源

2011-12-09 11:34:15

我認爲OP是說他們已經觀察到每次都要重新下載的文件，如果服務器端的設置錯誤，可能會發生這種情況。 – nnnnnn

你有沒有推薦一種測試方法？我所做的是在許多頁面中引用了相同的CSS文件，並更改了CSS文件，當我訪問頁面時，它讀取的是表示它下載文件的更改。我認爲每次頁面加載時都會下載CSS文件：我如何測試您的理論？ –

您可以嘗試下載Firebug for Firefox檢查「Net」面板以查看請求。或者您可以使用Chrome控制檯（Ctrl + Shift + I）執行相同的操作。谷歌它，如果你不知道如何使用這些工具。 –

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

來源

2011-12-09 11:39:45 wintercounter

-1

我認爲你應該使用相同的域爲你的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總是一樣的。

來源

2011-12-09 11:40:31 piotrekkr

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

來源

2011-12-09 11:45:51 aWebDeveloper

您是否可以訪問httpd.conf或.htaccess配置文件？（在ofcourse Apache服務器的情況下）

如果是這樣，請考慮以下設置：

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

前兩個規則禁止的ETag的完全，所以瀏覽器是有點被迫聽Cache-Control頭。最後一條規則告訴瀏覽器緩存文件2678400秒，或1個月。調整最適合你的設置。並且在包含靜態文件的dir上應用此配置（例如，通過在該目錄中放置.htaccess文件）

可選的，如果您使用多個服務器來提供靜態內容和/或不確定最後修改時間的服務器報告，請考慮使用：

Header unset Last-Modified

它告訴Apache將不會提供任何的Last-Modified頭，所以瀏覽器只能聽緩存控制最大年齡頭。

這個設置在很多hightraffic網站上都是我自己使用的，禁用ETag和Last-Modified標頭肯定有助於將流量降低到原來的五分之一。特別是Internet Explorer對這些設置非常敏感。

哦，如果你不確定你的緩存;使用http://www.redbot.org/來測試您的資產，它會快速告訴您您的標題對瀏覽器意味着什麼，以及如何解釋您使用的不同緩存控制設置。

來源

2011-12-13 22:29:32

防止相同的CSS文件被反覆下載

回答

相關問題