20081128 http caching_in_php
DESCRIPTION
TRANSCRIPT
F5 和 Ctrl-F5 的差別？
Table of Contents• HTTP Overview• Rakuya JS Loader
HTTP Overview
A GET Request
GET /index.php HTTP/1.1Host: www.rakuya.com.twUser-Agent:Mozilla/4.0 (...)
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355
<html>...
Last-Modified Header
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355Last-Modified: Thu, 27 Nov 2008 17:27:48 GMT
<html>...
Last Modified – Request• Conditional Request
由 Server 端再判斷一次是否要更新內容GET /index.php HTTP/1.1Host: www.rakuya.com.twUser-Agent:Mozilla/4.0 (...)If-Modified-Since: Thu, 27 Nov 2008 17:27:48 GMT
HTTP/1.1 304 Not ModifiedContent-Type: text/htmlContent-Length: 0Last-Modified: Thu, 27 Nov 2008 17:27:48 GMT
Last Modified - Ctrl-F5• 清除掉 If-Modified-Since
當成新的 requestGET /index.php HTTP/1.1Host: www.rakuya.com.twUser-Agent:Mozilla/4.0 (...)If-Modified-Since: Thu, 27 Nov 2008 17:27:48 GMT
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355
<html>...
Expires Header
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355Expires: Wed, 31 Dec 2008 23:59:59 GMT
<html>...
Expires - Before Refresh
• Cached
Expires - Refresh(F5) • New Request
DEMO
正解• F5 和 Ctrl-F5
都是重新向 server 發出 request• F5
解除 Expires 造成的 local 端的 cache• Ctrl-F5
清除 Last-Modified ( 或 ETag) 造成的 conditional request
但是要小心不是每個瀏覽器的實做方式都一樣
幸好F5 和 Ctrl-F5 在 Firefox 作用相似
不幸的是Google Chrome 實做方式不一樣
F5 和 Ctrl-F5 分不太出來差別 ...
補充一點
ETag Header• 與 Last-Modifed 相似，但不限於使用日期，常見的使用方式是給檔案的 MD5
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355Etag: fc5e038d38a57032085441e7fe7010b0
<html>...
ETag Header - Request• Conditional Request
一樣由 Server 端判斷是否要更新內容 GET /index.php HTTP/1.1Host: www.rakuya.com.twUser-Agent:Mozilla/4.0 (...)If-None-Match: fc5e038d38a57032085441e7fe7010b0
HTTP/1.1 304 Not ModifiedContent-Type: text/htmlContent-Length: 0Etag: fc5e038d38a57032085441e7fe7010b0
ETag Header - Ctrl-F5• 清除 If-None-Matched
當成新的 requestGET /index.php HTTP/1.1Host: www.rakuya.com.twUser-Agent:Mozilla/4.0 (...)If-None-Match: fc5e038d38a57032085441e7fe7010b0
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355
<html>...
Rakuya JS Loader
Objective• 使用 php 實做• 多檔合併 ( 第一次 Request 速度加快 )• Cache ( 減少 Request)• Conditional Request ( 第二次 Request 時速度加快 )
• 任一檔案被修改時能即時送出正確的結果• pack ( 減少檔案大小 )
Flow• 送出 Expires Header• 判斷並處理 If-Modified-Since
若無更新，則送出 HTTP 304• 讀取並處理所有檔案 (Disk IO)• 判斷並處理 If-None-Match
若無更新，則送出 HTTP 304• 完整 Output
Usage• loader.php?a.js&b.js&c.js&...
透過 ETag 來處理檔案的 md5 ，檔案一更新，就會立即更新 Ex:
http://www.rakuya.com.tw/js/loader.php?json2.pack.js&jquery-1.2.6.pack.js&jquery.blockUI.pack.js&jquery.mousewheel.pack.js&jquery.scrollTo-min.js&ui.core.pack.js&ui.slider.pack.js&item.js&fl.js&ad.js&map_libs_stable/mapstation.js&map_libs_stable/RA_hintwindow.js&map_libs_stable/RA_infowindow_2.js&map_libs_stable/RakuyaMapExt.js&RAKUYA.js&RAKUYA.search.js&RAKUYA.searchHistory.js&jquery.autocomplete.pack.js&RAKUYA.data.cityarea.js&jquery.scrollbox.js&RAKUYA.excel.menu.js
PHP:header('Etag: '. md5($file_contents));
Options• &ver=20081105• &ver=20081105112233
透過 Last-Modifed 產生 Conditional Request ，可減少 Disk IO
PHP:header('Last-Modified: '. gmdate(DATE_RFC1123));
Options - cont.• &opt=packall
全部檔案一起做 pack ( 事實上我也沒用過 )
• &opt=plaintext 不做壓縮，方便除錯
建議使用方式• DEV 開發時
把 js 加到 loader 的白名單內 (pack用 ) 先不使用 &ver= 的參數
• 正式機上 加上 &ver= 的參數，減少 Disk IO
請注意
每個 statement 都要加上 ;var foo = 1;var bar = function() { alert(foo);};
function bar2() { bar();}
TODO• Remove BOM From UTF-8• Minify Option• Server-Side File Caching• URL Rewrite• Gzip Encoding• CSS Loader Enhancement
Frond-End 的成果 ( 首頁 )
Achieved• Rule 1: Make Fewer HTTP Requests• Rule 3: Add an Expires Header• Rule 5: Put Stylesheets at the Top• Rule 6: Put Scripts at the Bottom• Rule 7: Avoid CSS Expressions• Rule 8: Make JavaScript and CSS External
• Rule 10: Minify JavaScript• Rule 13: Configure ETags
Further Study
Recommended Links• Exceptional Performance (YDN)http://developer.yahoo.com/performance/
• Combine - Another JS/CSS Loaderhttp://rakaz.nl/extra/code/combine
Any Questions?
好康分享