2016-07-14 135 views
21

我已到期的我的httpd.conf槓桿瀏覽器緩存JS

ExpiresActive On 
ExpiresDefault "access plus 1 month" 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType text/css "access plus 1 month" 
ExpiresByType text/javascript "access plus 1 month" 
ExpiresByType application/x-javascript "access plus 1 month" 

這有助於瀏覽器緩存的圖片,字體文件,網站自己的CSS和JS文件。但我也有包括在我的網站外部JS:

http://connect.facebook.net/en_US/sdk.js (20 minutes) 
http://apis.google.com/js/client.js (30 minutes) 
https://apis.google.com/js/rpc:shindig_random.js?onload=init (30 minutes) 
https://platform.twitter.com/widgets.js (30 minutes) 
https://www.google-analytics.com/analytics.js (2 hours) 

谷歌PageSpeed Insights的說,對上文件: 設置中爲靜態資源的HTTP標頭的到期日或最高年齡指示瀏覽器之前加載從本地磁盤下載資源而不是通過網絡。

如何利用瀏覽器緩存這個外部JS文件?任何幫助?

回答

30

確實令人討厭的問題。沒有一個像很容易 fixable恐怕。但你可以做的是使用cron

首先,請記住,谷歌不太可能因爲他們自己的工具而懲罰你(如分析)。但是,如前所述,可以使用cron來修復它,這意味着您可以在本地加載JavaScript並提取更新後的腳本。

如何做到這一點:

首先,你需要下載你正在運行的腳本。我將以Google Analytics爲例(這似乎是人們抱怨的問題最多的腳本,但您可以將其複製到任何外部腳本中)。

查看你的代碼並找到腳本的名稱,在我們的例子中是:google-analytics.com/ga.js。將此URL彈出到您的Web瀏覽器中,它將顯示源代碼。只需複製一份並保存爲ga.js即可。

保存這個新建的JavaScript文件到你的Web服務器,在我的情況:

- JS 
    - ga.js 

接下來,您將需要在被調用腳本的頁面更新的代碼,只需要改變正在調用該目錄JavaScript文件。再一次在我們的例子中,我們將改變這行:

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.yoursite.com/js/ga.js'; 

在這一點上,您的網站將現在從您的網站本地運行該腳本!但是,這意味着腳本永遠不會更新。除非你每週都重新運行這個簡短的過程。這取決於你..但我對此太懶惰了。

這就是科雷發揮作用:

幾乎每一個單一的託管服務將有一個選項,供您設置cron工作。在Hostinger上,它位於您的主機面板上,在GoDaddy上您可以在Content選項下找到它。

將以下腳本放到您的cron中,您需要做的就是將絕對路徑更改爲變量$localfile。該腳本的功能是從Google獲取ga.js文件的更新腳本。您可以根據您希望運行此過程的頻率設置時間範圍。從每小時一次到每月一次。

如果您還要爲Google Analytics以外的其他文件執行此操作,那麼您還需要更改變量$remoteFile。因此,$remoteFile是外部JavaScript文件的URL和變量$localFile,您將把路徑放到新的本地存儲文件中,就這麼簡單!

<? 
// script to update local version of Google analytics script 

// Remote file to download 
$remoteFile = 'http://www.google-analytics.com/ga.js'; 
$localfile = 'ENTER YOUR ABSOLUTE PATH TO THE FILE HERE'; 
//For Cpanel it will be /home/USERNAME/public_html/ga.js 

// Connection time out 
$connTimeout = 10; 
$url = parse_url($remoteFile); 
$host = $url['host']; 
$path = isset($url['path']) ? $url['path'] : '/'; 

if (isset($url['query'])) { 
    $path .= '?' . $url['query']; 
} 

$port = isset($url['port']) ? $url['port'] : '80'; 
$fp = @fsockopen($host, '80', $errno, $errstr, $connTimeout); 
if(!$fp){ 
    // On connection failure return the cached file (if it exist) 
    if(file_exists($localfile)){ 
    readfile($localfile); 
    } 
} else { 
    // Send the header information 
    $header = "GET $path HTTP/1.0\r\n"; 
    $header .= "Host: $host\r\n"; 
    $header .= "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6\r\n"; 
    $header .= "Accept: */*\r\n"; 
    $header .= "Accept-Language: en-us,en;q=0.5\r\n"; 
    $header .= "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n"; 
    $header .= "Keep-Alive: 300\r\n"; 
    $header .= "Connection: keep-alive\r\n"; 
    $header .= "Referer: http://$host\r\n\r\n"; 
    fputs($fp, $header); 
    $response = ''; 

    // Get the response from the remote server 
    while($line = fread($fp, 4096)){ 
    $response .= $line; 
    } 

    // Close the connection 
    fclose($fp); 

    // Remove the headers 
    $pos = strpos($response, "\r\n\r\n"); 
    $response = substr($response, $pos + 4); 

    // Return the processed response 
    echo $response; 

    // Save the response to the local file 
    if(!file_exists($localfile)){ 
    // Try to create the file, if doesn't exist 
    fopen($localfile, 'w'); 
    } 

    if(is_writable($localfile)) { 
    if($fp = fopen($localfile, 'w')){ 
     fwrite($fp, $response); 
     fclose($fp); 
    } 
    } 
} 
?> 

就是這樣,並且應該解決您在利用瀏覽器緩存第三方腳本時遇到的任何問題。

來源:http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

注:

事實上,這些文件不傾向於對您的實際速度有很大的影響。但我可以理解你對谷歌懲罰你的擔憂。但是,只有在運行這些外部腳本時,纔會發生LARGE的數量。正如我前面所述,Google相關的任何內容都不會針對您。

+1

一個真正的supurb答案。榮譽 – Beaniie

+1

Waw ..!真的很好的答案。 –

2

不知道此代碼段是否會幫助某人,但無論如何,這是我如何緩存外部js文件。

<script> 
$.ajax({ 
type: "GET", 
url: "https://www.google-analytics.com/analytics.js", 
success: function(){}, 
dataType: "script", 
cache: true 
}); 
</script>