前端優化中很重要的一項是設定乙個較長的過期時間，例如yahoo的expires設的是10年，page speed推薦乙個月以上。設expires的目的就是讓沒有更新的資源不應該產生http請求，如果強制產生請求則返回304，減少伺服器壓力和降低頻寬。exprires屬於伺服器優化範疇，需要修改伺服器配置並重啟。
http header相關知識
expires：指定快取到期gmt的絕對時間，如果設了max-age，max-age就會覆蓋expires。如果expires到期需要重新請求。
last-modified：web 伺服器認為物件的最後修改時間，比如檔案的最後修改時間，動態頁面的最後產生時間。
etag：就是乙個物件（比如url）的標誌值，就乙個物件而言，比如乙個 html 檔案，如果被修改了，其 etag 也會別修改， 所以，etag 的作用跟 last-modified 的作用差不多，主要供 web 伺服器 判斷乙個物件是否改變了。如果有多個伺服器需要考慮etag同步問題。
比如前一次請求某個 html 檔案時，獲得了其 etag，當這次又請求這個檔案時， 瀏覽器就會把先前獲得的 etag 值傳送給 web 伺服器，然後 web 伺服器會把這個 etag 跟該檔案的當前 etag 進行對比，然後就知道這個檔案有沒有改變了。
cache-control:
這個是http 1.1中為了彌補 expires 缺陷新加入的，現在不支援http 1.1的瀏覽器已經很少了。
max-age:
指定快取過期的相對時間秒數，max-ag=0或者是負值，瀏覽器會在對應的快取中把expires設定為1970-01-01 08:00:00 。
s-maxage:
類似於max-age，只用在共享快取上，比如proxy.
public:
通常情況下需要http身份驗證的情況，響應是不可cahce的，加上public可以使它被cache。
no-cache:
強制瀏覽器在使用cache拷貝之前先提交乙個http請求到源伺服器進行確認。這對身份驗證來說是非常有用的,能比較好的遵守 (可以結合public進行
考慮)。它對維持乙個資源總是最新的也很有用，與此同時還不完全喪失cache帶來的
好處)，因為它在本地是有拷貝的，但是在用之前都進行了確認，這樣http請求並未減少，但可能會減少乙個響應體。
no-store:
告訴瀏覽器在任何情況下都不要進行cache，不在本地保留拷貝。
must-revalidate:
強制瀏覽器嚴格遵守你設定的cache規則。
proxy-revalidate:
強制proxy嚴格遵守你設定的cache規則。
用法舉例:
cache-control: max-age=3600, must-revalidate
cache:使用本地快取，不發生請求。
304:通過if-modified-since if-match判斷資源是否修改，如未修改則返回304，發生了一次請求，但請求內容長度為0，節省了頻寬。
如果有多台負載均衡的伺服器，不同伺服器計算出的etag可能不同，這樣就會造成資源的重複載入，我看的yahoo首頁就沒設etag，估計有這麼方面的考慮。
下面我的一些分析，不敢說完全正確，只測試了ie6和ff3.5，感興趣的朋友一塊討論，畢竟瀏覽器對我來說是個黑洞。
下面主要說說expires，主要有這四個疑問
1.設定expires後，請求狀態應該是什麼樣的？是304還是cache？
2.如果資源被瀏覽器cache了，怎麼才能保證資源正確更新，尤其是頁面不出錯。
3.瀏覽器是否有差異？
4.過期時間設為多少比較好。
為了解決上面的疑惑，我用apche做了測試，apache的配置如下：
測試還需要考慮訪問頁面的方式，方式不同請求狀態也會有差異。開啟瀏覽器清除快取，然後開啟頁面進行測試，多次測試結果如下：
開啟頁面方式
1. 第一次開啟頁面
200
200
2. 重啟瀏覽器開啟頁面
cache，即時發生資源修改也不會重新請求
cache，即時發生資源修改也不會重新請求
3. f5重新整理
304，發生修改的資源狀態為200
304，發生修改的資源狀態為200
4. ctrl+f5重新整理
200，強制全新請求
200
5. 後退
cache,簡單直接地從快取載入
cache,簡單直接地從快取載入
6. 在已訪問頁面位址列回車
cache
cache
總結：
用yahoo首頁驗證了上面的結論，除yahoo f5重新整理頁面時ie6下有兩個請求狀態為cache外（目前沒分析到原因），二者基本一致。
把expires設為30天、14天結果頁一樣。有了上面的測試結果做expires優化心理就有底了，疑問1和3已解決。
第二種方式開啟頁面，有資源修改也走本地快取，極有可能出錯，問題2最穩妥的辦法是修改的資源啟用新名稱，yahoo的作法是檔名後加版本號，這回增加前端的工作量。目前每次更新指令碼庫，資源位址都不變，主要為避免重新命名後相關應用都需要更新的問題，節省開發的時間。
expires設2，3天，有點短，穩定的應用的js css img更新不是很頻繁，像yahoo設10年可以理解為永不過期，十年中**不知道改版多少次了。最低設30天還比較合適。
楊建：**加速--cache為王篇
效能優化之Angular前端優化總結
1.動靜分離 專案裡面前端比較占用頻寬的一般都是載入靜態資源，請求後台介面一般占用頻寬都是1kb左右，但是在載入靜態資源往往會達到mb級別，占用大量頻寬，明現影響了業務，所以動靜分離是必須而且必要做的，angualr裡面也會有指令來指定載入靜態資源路徑從而動靜分離 ng build deployur...
前端效能優化之 快取
一.http協議頭控制 cache control用於控制檔案在本地快取有效時長。最常見的，比如伺服器回包 cache control max age 600表示檔案在本地應該快取，且有效時長是600秒 從發出請求算起 在接下來600秒內，如果有請求這個資源，瀏覽器不會發出http請求，而是直接使用...
前端開發 之 效能優化
1 多使用記憶體 快取或者其他方法儲存 2 減少 cpu 計算 減少網路請求 1 怎麼讓頁面 靜態資源載入的更快 2 怎麼讓頁面上的一些操作變得更快 1 靜態資源的壓縮合併，預載入檔案 合併在一起 window.addeventlistener domconetentloaded function ...