序

瀏覽器緩存只是為了提升頁面再次被訪問的速度，而對于提升首次訪問的響應能力，通常是采用CDN進行加速。CDN在前端優化過程中起著關鍵性的作用，理解CDN的工作原理對前端開發人員提升網站性能有著很大的幫助，本文從CDN工作原理、CDN緩存相關、前端優化三個角度對CDN常見問題進行基礎介紹。

CDN工作原理

CDN是什么？

CDN（Content delivery networks，內容分發網絡），其目的是通過在源服務器和用戶之間增加一層新的網絡架構，將網站的內容分發到最接近用戶的網絡“邊緣”，使用戶可以就近取得所需的內容，提高用戶訪問網站的響應速度。我們的日常生活中，無論是在網站上看新聞，網上購物，觀看視頻，還是聊天，都和CDN息息相關。

使用CDN好處？

• 提升網頁加載速度

• 處理高流量負載

• 無需?本完成本地化覆蓋

• 減少帶寬消耗

• 在多臺服務器間均衡負載

• 使你的網站免于DDoS（拒絕服務）的攻擊

• ……

CDN是如何工作的？

為了使用戶和網站源服務器之間的“距離”最短，CDN需要在不同的地理位置（PoPs，接入點）存儲網站內容的緩存。一般來說，每個PoP都包含多個緩存服務器，它們的主要作用是使用戶訪問到最近的緩存服務器，?此減少信息的往返時間，達到減少響應時間的目的。緩存服務器負責存儲和分發緩存文件，主要功能是提升網站相應速度和減少帶寬消耗。這些緩存文件會被存儲在固態硬盤或者RAM中。

CDN緩存相關

CDN緩存？

用戶在瀏覽網站的時候，瀏覽器在硬盤上保存網站中的圖片或者其他文件的副本，用戶再次訪問該網站的時候，瀏覽器就不用再下載全部的文件，減少了HTTP請求數量。與服務器在硬盤上存儲緩存文件類似，CDN將網站的內容移動到更為強大的代理服務器上，通過動態域名解析，用戶的請求被分到離自己最快的服務器，CDN服務器直接返回緩存文件或通過專線代理原站的內容，進而提升內容分發的速度。此時，瀏覽器和服務器的交互可以用下圖表示：

CDN緩存內容的更新？

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

CDN緩存靜態資源，常用的有：圖片、視頻、音樂、css、js文件等。

CDN緩存內容的有效期?

1. 原站apache吐出的靜態文件：由apache的expire和header模塊控制

主要兩項：last-modified，cache-control：max-age

apache缺省配置，所有靜態文件在cdn只緩存3600s（需要我們按需求調整被加速服務器的apache設置），3600s后CDN失效，用戶訪問時會重新請求原站，如果沒有變化，緩存失效周期自動延長10%。

2. 原站jsp或php吐出的動態內容（url形式必須是靜態的）

由程序控制last-modified，cache-control：max-age public ，apache的設置將不起作用，CDN根據這兩項判斷是否需要到原站更新內容。

CDN和應用的結合策略？

1. 變?不頻繁的頁面，在原站生成靜態頁面，原站apache上定義過期時間，例如1天。原站上靜態文件更新后，可以等待CDN過期。或者主動通知CDN更新（隨著CDN節點越來越多，代價會非常高）。

2. 變化頻繁的頁面，不生成靜態頁面，由jsp或php定義過期時間，例如5s或60s。CDN過期后，如果有用戶訪問就從原站上抓取。

優點：相關頁面內容更新后，不需要主動通知100個原站都來抓取，有效降低原站的壓力。

如果頁面內容沒有變化，返回last-modified不變，這樣原站會直接返回304給CDN，CDN也會返回304給用戶。減少網絡傳輸和速度。

3. 特靜態資源，或者頻繁訪問、頻繁更新的頁面，通過apache no-cache告訴IE不緩存，html中就不需要使用pinglun.js?123456這樣的代碼形式，然后用max-age告訴CDN緩存1s，這樣避免每次用戶請求都轉到原站。

CDN緩存策略？

開發人員采用HTTP緩存頭來標記可緩存的內容以及設置緩存過期時間，采用緩存策略來確保內容的新鮮度。如“Cache-Control: max-age=600”表示該文件在用戶瀏覽器緩存的副本將在10分鐘后過期，Fiddler可以方便地查看緩存的header。瀏覽器緩存相關內容在此不做介紹。

CDN有兩種方式可以檢測瀏覽器中緩存和源服務器上文件是否匹配：比較最新修改日期Last-Modified和比較ETag。

如果每個文件都進行標記，會導致效率非常低下。如果發現緩存頭指令不再適合，開發人員可以對緩存頭進行重寫。現有的很多智能緩存控制算法都可以通過機器學習，識別動態生成對象的緩存。

前端優化

HTTP請求數？

我們都知道減少HTTP請求可以提升網站的響應能力，雖然CDN本身不能減少請求的數量，但是CDN可以通過預池連接（pre-pooling connection）來減少關閉和重新打開TCP連接引起的時間延遲。

緩存控制？

很多CDN都提供緩存控制選項，允許我們根據文件類型或者位置對單個文件甚至整個文件組設置緩存規則。CDN通過機器學習可以緩存動態內容，這就減輕了幾乎所有的緩存管理任務。

Gzip和Minify？

CDN在前端優化的過程中起著關鍵性作用，經常被用來簡化很多耗時的優化任務。例如CDN會提供自動壓縮文件功能，避免了手動壓縮。

圖片優化？

CDN往往是圖片緩存的首選項，并且需要購買才能使用這項服務。很多先進的CDN在原來無損壓縮的概念上提出一種漸進渲染的方法，先加載像素化版本的圖片，隨后用一系列更“清晰”的版本代替該圖片，直到實際的圖片做好了加載的準備。漸進渲染可以在不犧牲圖片質量的條件下縮短加載時間。

總結

本文對CDN的工作原理和CDN緩存進行了基礎介紹，了解CDN緩存和瀏覽器緩存將對前端工作人員的優化之路提供很大的幫助，更多前端優化的技術將在后續陸續為大家呈現。

若有理解不對的地方歡迎大家批評指正。