Jex’s Note

Apache 減少瀏覽器向server請求次數

當瀏覽器第一次讀取圖檔

status : 200 OK

request header:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Host:jex.com
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

response header:

Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:45860
Content-Type:image/jpeg
Date:Thu, 11 Jul 2013 08:09:03 GMT
ETag:"bc003e-b324-4e136f4c01a37"
Keep-Alive:timeout=5, max=100
Last-Modified:Thu, 11 Jul 2013 07:00:57 GMT
Server:Apache/2.2.22 (Ubuntu)

內容會有圖檔

第二次讀取讀檔會跟cache要所以

status : 304 Not Modified

request header:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Host:jex.com
If-Modified-Since:Thu, 11 Jul 2013 07:00:57 GMT
If-None-Match:"bc003e-b324-4e136f4c01a37"
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

response header:

Connection:Keep-Alive
Date:Thu, 11 Jul 2013 08:09:51 GMT
ETag:"bc003e-b324-4e136f4c01a37"
Keep-Alive:timeout=5, max=100
Server:Apache/2.2.22 (Ubuntu)

內容不會有圖檔,只會送出request然候apache比對ETag及Last-Modified,如果檔案有被修改才是status:200

調整apache設定,當網址一樣時讓瀏覽器連304都不送直接取cache

[1] 打開模組

  1. /etc/apache2/mods-available
  2. ls | grep expire 及 ls | grep header 確定有沒有這兩個模組,如果沒有就開啟
  3. Once you install the module, the module will be available in the /etc/apache2/mods-available directory. You can use the a2enmod command to enable a module. You can use the a2dismod command to disable a module. Once you enable the module, the module will be available in the the /etc/apache2/mods-enabled directory.

[2] 在 /etc/apache2/sites-available/default 加上

ExpiresActive On
ExpiresByType image/jpg "access plus 10 years"
ExpiresByType image/jpeg "access plus 10 years"

[3] sudo service apache2 restart

設定後的測試:

[1] 第一次load圖

status : 200 OK

request header:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Host:jex.com
Pragma:no-cache
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

response header:

Accept-Ranges:bytes
Cache-Control:max-age=315360000
Connection:Keep-Alive
Content-Length:45860
Content-Type:image/jpeg
Date:Thu, 11 Jul 2013 08:11:46 GMT
ETag:"bc003e-b324-4e136f4c01a37"
Expires:Sun, 09 Jul 2023 08:11:46 GMT
Keep-Alive:timeout=5, max=99
Last-Modified:Thu, 11 Jul 2013 07:00:57 GMT
Server:Apache/2.2.22 (Ubuntu)

有加上expire了

[2] 第二次load圖

status : 304 Not Modified

request header:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Host:jex.com
If-Modified-Since:Thu, 11 Jul 2013 07:00:57 GMT
If-None-Match:"bc003e-b324-4e136f4c01a37"
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

response header:

Cache-Control:max-age=315360000
Connection:Keep-Alive
Date:Thu, 11 Jul 2013 08:25:53 GMT
ETag:"bc003e-b324-4e136f4c01a37"
Expires:Sun, 09 Jul 2023 08:25:53 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.2.22 (Ubuntu)

[3] 當從外面直接連進來後會直接從cache拿了

Request URL:http://jex.com/static/a/ce/ce9600a437486fbfd9b13856f2e1c55f.jpg?1373516123
Request Method:GET
Status Code:200 OK (from cache)
Query String Parametersview sourceview URL encoded
1373516123:

並不會有request header及response header,因為根本沒送request chrome也會顯示是 (from cache)

結語:

快取機制還是要看瀏覽器自已的實作, 如果到已造訪過的網站, chrome第一次可能拿快取的圖片, 但reload後chrome還是會去問一次得到304才去拿cache的檔案, 所以快取機制沒有一定, 或許chrome 再下一版又換方法了

註:

大頭貼檔名後加上從DB取的timestamp(ex: avatar.jpg?1373530721),當更新大頭貼時要更新DB的欄位(紀錄修改時間),才能讓瀏覽器判斷是否是修改過的圖

ref : 夯哥

Comments