20081128 http caching_in_php

HTTP Caching in PHP
hunter@rakuya.com.tw
Nov. 2008

Table of Contents
• HTTP Overview
• Rakuya JS Loader

A GET Request
GET /index.php HTTP/1.1
Host: www.rakuya.com.tw
User-Agent:Mozilla/4.0 (...)
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 355
<html>...

Last-Modified Header
HTTP/1.1 200 OK
Content-Length: 355
Last-Modified: Thu, 27 Nov 2008 17:27:48 GMT
<html>...

Last Modified – Request
• Conditional Request
 由 Server 端再判斷一次是否要更新內容
If-Modified-Since: Thu, 27 Nov 2008 17:27:48 GMT
HTTP/1.1 304 Not Modified
Content-Length: 0
Last-Modified: Thu, 27 Nov 2008 17:27:48 GMT

Last Modified - Ctrl-F5
• 清除掉 If-Modified-Since
 當成新的 request
If-Modified-Since: Thu, 27 Nov 2008 17:27:48 GMT
HTTP/1.1 200 OK
Content-Length: 355
<html>...

Expires Header
HTTP/1.1 200 OK
Content-Length: 355
Expires: Wed, 31 Dec 2008 23:59:59 GMT
<html>...

Expires - Before Refresh
• Cached

Expires - Refresh(F5)
• New Request

正解
• 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 OK
Content-Length: 355
Etag: fc5e038d38a57032085441e7fe7010b0
<html>...

ETag Header - Request
• Conditional Request
 一樣由 Server 端判斷是否要更新內容
If-None-Match: fc5e038d38a57032085441e7fe7010b0
HTTP/1.1 304 Not Modified
Content-Length: 0
Etag: fc5e038d38a57032085441e7fe7010b0

ETag Header - Ctrl-F5
• 清除 If-None-Matched
 當成新的 request
If-None-Match: fc5e038d38a57032085441e7fe7010b0
HTTP/1.1 200 OK
Content-Length: 355
<html>...

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.autoc
omplete.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

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

Recommended Links
• Exceptional Performance (YDN)
http://developer.yahoo.com/performance/
• Combine - Another JS/CSS Loader
http://rakaz.nl/extra/code/combine

20081128 http caching_in_php

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a 20081128 http caching_in_php

Semelhante a 20081128 http caching_in_php (20)

20081128 http caching_in_php