20081128 http caching_in_php

258 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
258
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20081128 http caching_in_php

  1. 1. HTTP Caching in PHPhunter@rakuya.com.twNov. 2008
  2. 2. F5 和 Ctrl-F5 的差別?
  3. 3. Table of Contents• HTTP Overview• Rakuya JS Loader
  4. 4. HTTP Overview
  5. 5. A GET RequestGET /index.php HTTP/1.1Host: www.rakuya.com.twUser-Agent:Mozilla/4.0 (...)HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355<html>...
  6. 6. Last-Modified HeaderHTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355Last-Modified: Thu, 27 Nov 2008 17:27:48 GMT<html>...
  7. 7. 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 GMTHTTP/1.1 304 Not ModifiedContent-Type: text/htmlContent-Length: 0Last-Modified: Thu, 27 Nov 2008 17:27:48 GMT
  8. 8. 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 GMTHTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355<html>...
  9. 9. Expires HeaderHTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355Expires: Wed, 31 Dec 2008 23:59:59 GMT<html>...
  10. 10. Expires - Before Refresh• Cached
  11. 11. Expires - Refresh(F5)• New Request
  12. 12. DEMO
  13. 13. 正解• F5 和 Ctrl-F5 都是重新向 server 發出 request• F5 解除 Expires 造成的 local 端的cache• Ctrl-F5 清除 Last-Modified ( 或 ETag) 造成的conditional request
  14. 14. 但是要小心不是每個瀏覽器的實做方式都一樣
  15. 15. 幸好F5 和 Ctrl-F5 在 Firefox 作用相似
  16. 16. 不幸的是Google Chrome 實做方式不一樣F5 和 Ctrl-F5 分不太出來差別 ...
  17. 17. 補充一點
  18. 18. ETag Header• 與 Last-Modifed 相似,但不限於使用日期,常見的使用方式是給 案的檔 MD5HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355Etag: fc5e038d38a57032085441e7fe7010b0<html>...
  19. 19. ETag Header - Request• Conditional Request 一樣由 Server 端判斷是否要更新內容GET /index.php HTTP/1.1Host: www.rakuya.com.twUser-Agent:Mozilla/4.0 (...)If-None-Match: fc5e038d38a57032085441e7fe7010b0HTTP/1.1 304 Not ModifiedContent-Type: text/htmlContent-Length: 0Etag: fc5e038d38a57032085441e7fe7010b0
  20. 20. ETag Header - Ctrl-F5• 清除 If-None-Matched 當成新的 requestGET /index.php HTTP/1.1Host: www.rakuya.com.twUser-Agent:Mozilla/4.0 (...)If-None-Match: fc5e038d38a57032085441e7fe7010b0HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 355<html>...
  21. 21. Rakuya JS Loader
  22. 22. Objective• 使用 php 實做• 多 合併檔 ( 第一次 Request 速度加快 )• Cache ( 減少 Request)• Conditional Request ( 第二次Request 時速度加快 )• 任一 案被修改時能即時送出正確的結果檔• pack ( 減少 案大小檔 )
  23. 23. Flow• 送出 Expires Header• 判斷並處理 If-Modified-Since 若無更新,則送出 HTTP 304• 讀取並處理所有 案檔 (Disk IO)• 判斷並處理 If-None-Match 若無更新,則送出 HTTP 304• 完整 Output
  24. 24. 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.jsPHP:header(Etag: . md5($file_contents));
  25. 25. Options• &ver=20081105• &ver=20081105112233 透過 Last-Modifed 產生 ConditionalRequest ,可減少 Disk IOPHP:header(Last-Modified: . gmdate(DATE_RFC1123));
  26. 26. Options - cont.• &opt=packall 全部 案一起做檔 pack ( 事實上我也沒用過 )• &opt=plaintext 不做壓縮,方便除錯
  27. 27. 建議使用方式• DEV 開發時 把 js 加到 loader 的白名單內 (pack用 ) 先不使用 &ver= 的參數• 正式機上 加上 &ver= 的參數,減少 Disk IO
  28. 28. 請注意
  29. 29. 每個 statement 都要加上 ;var foo = 1;var bar = function() {alert(foo);};function bar2() {bar();}
  30. 30. TODO• Remove BOM From UTF-8• Minify Option• Server-Side File Caching• URL Rewrite• Gzip Encoding• CSS Loader Enhancement
  31. 31. Frond-End 的成果 ( 首頁 )
  32. 32. 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 CSSExternal• Rule 10: Minify JavaScript• Rule 13: Configure ETags
  33. 33. Further Study
  34. 34. Recommended Links• Exceptional Performance (YDN)http://developer.yahoo.com/performance/• Combine - Another JS/CSS Loaderhttp://rakaz.nl/extra/code/combine
  35. 35. Any Questions?
  36. 36. 好康分享

×