前端緩存分為瀏覽器緩存和cdn緩存

?

關于是否緩存，是瀏覽器緩存還是CDN緩存，緩存保留多長時間，由cache-control控制

請求：

響應：

特別說明：　

Cache-control: public?表示緩存的版本可以被代理服務器或者其他中間服務器識別（瀏覽器，cdn都能緩存）。

Cache-control: private?意味著這個文件對不同的用戶是不同的。只有用戶自己的瀏覽器能夠進行緩存，公共的代理服務器不允許緩存（只能用戶的瀏覽器緩存）。

Cache-control: no-cache?意味著文件的內容不應當被緩存。這在搜索或者翻頁結果中非常有用，因為同樣的URL，對應的內容會發生變化。

?

Cache-control: max-age

max-age 標簽可以讓我們更加容易的處理過期時間。我們只需要說，這份資料你只能用一個星期就可以了。

　　Max-age 使用秒來計量，如：

　　Cache-Control:max-age=645672

　　指定頁面645672秒(7.47天)后過期。

　　Last-Modified

　　服務器為了通知瀏覽器當前文件的版本，會發送一個上次修改時間的標簽，例如：

　　Last-Modified:Tue, 06 Jan 2015 08:26:32 GMT

這樣瀏覽器就知道他收到的這個文件創建時間，在后續的請求中，瀏覽器會按照下面的規則進行驗證：

　　1. 瀏覽器：Hey，我需要jQuery.min.js這個文件，如果是在 Tue, 06 Jan 2015 08:26:32 GMT 之后修改過的，請發給我。

　　2. 服務器：(檢查文件的修改時間)

　　3. 服務器：Hey，這個文件在那個時間之后沒有被修改過，你已經有最新的版本了。

　　4. 瀏覽器：太好了，那我就顯示給用戶了。

　　在這種情況下，服務器僅僅返回了一個304的響應頭，減少了響應的數據量，提高了響應的速度。

　　下圖是按F5刷新頁面后，頁面返回304響應頭。可以看到返回304后其他東西都沒下載，都是緩存直接獲取的

?

?

?

?

cdn緩存就是在瀏覽器和服務器間增加的一層緩存，緩存一些html、圖片、css、xml等靜態資源。

?

無cdn：

　???用戶在瀏覽網站的時候，瀏覽器能夠在本地保存網站中的圖片或者其他文件的副本，這樣用戶再次訪問該網站的時候，瀏覽器就不用再下載全部的文件，減少了下載量意味著提高了頁面加載的速度。

有cdn：

如果中間加上一層CDN，那么用戶瀏覽器與服務器的交互如下：

客戶端瀏覽器先檢查是否有本地緩存是否過期，如果過期，則向CDN邊緣節點發起請求，CDN邊緣節點會檢測用戶請求數據的緩存是否過期，如果沒有過期，則直接響應用戶請求，此時一個完成http請求結束;如果數據已經過期，那么CDN還需要向源站發出回源請求(back to the source request),來拉取最新的數據。

?
1.CDN加速原理
通過動態域名解析，網友的請求被分配到離自己最快的服務器。CDN服務器直接返回緩存文件或通過專線代理原站的內容。
網絡加速+內容緩存，有效提供訪問速度

2.CDN緩存什么內容
緩存html、圖片、css、xml等靜態資源，不緩存含有？的動態地址、jsp、PHP，js文件也不緩存【除非特殊設置】
緩存原站返回HTTP狀態為20*或304，不緩存其他狀態(例如404，500，503)

4.CDN緩存內容的更新
a）用戶首次請求，CDN從原站抓取后緩存，直到文件過期后有用戶請求再次更新
b）程序主動通知CDN抓取

5.CDN緩存內容的有效期
a）原站apache吐出的靜態文件：由apache的expire和header模塊控制
主要兩項：last-modified，cache-control：max-age
apache缺省配置，所有靜態文件在cdn只緩存3600s【需要我們按需求調整被加速服務器的apache設置】
3600s后cdn失效，用戶訪問時會重新請求原站，如果沒有變化，緩存失效周期自動延長10%。
b）原站jsp或php吐出的動態內容（url形式必須是靜態的）
由程序控制last-modified，cache-control：max-age public ，apache的設置將不起作用
cdn根據這兩項判斷是否需要到原站更新內容

?

?頁面緩存優化：http://www.cnblogs.com/futan/archive/2013/04/21/cachehuancun.html

設置優良的網站緩存機制方法

有很多的方法可以讓你的網站緩存更加友好：

• 使用一致的 URLs?— 這是使用緩存的黃金法則.如果你為不同的用戶提供、或是從不同的網站采集相同的內容到不同的網站頁面，請使用一條URL地址。For example,如果你一旦使用了 “/index.html” ，對于其他的 HTML 文件URL也采用相同的命名方式.
• 使用圖片庫?來查閱不同地方使用的圖片.
• 創建緩存保存不常變動的圖片和頁面?，可以把參數?Cache-Control: max-age?報頭參數的值設置得大些.
• 為規律更新的網頁設置定時緩存，?可以設置合適的 max-age or expiration 時間參數.
• 如果一個資源（尤其是可下載文件）改變了，把它的名字也改了.?用這種方式，你可以讓緩存在很長的一段時間之后才過期，并且保證提供的版本是正確的。鏈接到改資源的網頁需要將緩存時間設置得短一些.
• 除非必要，不要隨意修改文件.?如果隨意修改,報頭參數?Last-Modified?將始終使用最新的日期.比如,當你升級網站,不要復制整個站點; 只要移動你修改的文件即可.
• 只在有必要的地方使用cookies?— cookies 非常難緩存, 大多數情況也沒必要緩存.如果你一定需要有cookies,將它們限制在動態頁面中.
• 盡量少地使用 SSL安全協議?— 因為加密的頁面將不會采用共享緩存的方式儲存，盡量在需要的時候使用SSL, 并且在SSL頁面盡量少用圖片.
• 用?REDbot檢測你的網站頁面— 本教程所描述的大多數概念在使用該工具時都很有用.

怎樣寫動態網站的緩存腳本

默認情況下，大多數的腳本語言將不會返回驗證器（Last-Modified?or?ETag?響應頭）或者緩存更新提示（Expires?or?Cache-Control）。同時，一些真正的腳本語言是動態的（意味著他們對每個請求返回不同的響應資源），大多數站點（像搜索引擎和數據庫驅動站點）都能從緩存腳本從受益。

一般來講，如果在間隔的時間段（不管是相差幾天還是幾分鐘），發出相同的請求，能夠復寫一個腳本輸出，那么它就能夠緩存。如果腳本輸出的內容會隨著URL的改變而改變，也是可以進行緩存的；但是如果腳本輸出要依賴cookies，認證等，則不能緩存。

• 寫一個優良的緩存腳本的最好辦法是：不管內容何時更改，都將腳本的內容輸出到普通的文件中，以便網站的服務器能夠想其他網頁一樣對待它，從而生成和使用緩存的驗證器。記住只對那些已經改變的文件進行寫入，這樣可以讓Last-Modified?的值被保護起來.
• 另一個讓腳本可以緩存的方法是，設置一個有關存活時間的響應頭，值設置為腳本能夠使用的時間。雖然?Expires設置可以實現這一點,但是設置Cache-Control: max-age是最簡單的， 它可以在一次請求發生后的一段時間里又發出新的請求。
• 如果你不能做到這些,你將需要讓腳本生成一個驗證器,然后對瀏覽器發出請求中的?If-Modified-Since?和/或?If-None-Match做出響應. 通過分析HTTP 頭你能夠做到這一點，只要在適當的時候返回304(緩存讀取)響應狀態即可。

小技巧：

• 如非必要，盡量不使用 POST方式. 大多數的緩存無法保持對POST方式響應，你過你想通過路徑或請求（GET）發送一些信息，緩存能夠在未來存貯信息。
• 除非整個內容是要呈現給完整的用戶，否則不要用URL來傳遞用戶的身份信息.
• 不要指望來自一個用戶的所有請求都是從同一個主機發出的, 因為緩存經常一起產生作用.
• 設置響應頭中的Content-Length?（用于描述HTTP消息實體的傳輸長度）.?它允許你的腳本可以在長連接通信時仍有響應，并且客戶端可以通過一個TCP/IP連接請求不同的資源,而不是為一次請求的都建立一個通信

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的浏览器与CDN缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。