概述
cdn的核心原理並將靜態頁面部署到cdn上，之後使用了phantomjs的無頭瀏覽器方案實現了將靜態請求和動態請求合併一同部署到cdn上，更進一步的將商品詳情頁的流量能力提升到極致；
頁面靜態化，其實就是將動態生成的jsp頁面，變成靜態的HTML頁面，讓用戶直接訪問。這樣的好處就是：
- 大大提升訪問速度，不需要去訪問數據庫，或者緩存來獲取哪些數據，瀏覽器直接加載渲染html頁即可；
- 搜索引擎更喜歡靜的，更便於抓取，搜索引擎SEO排名更容易提高；
- 從安全角度講，靜態網頁不宜遭到黑客攻擊，如果黑客不知道你網站的後臺、網站採用程序、數據庫的地址，靜態網頁， 更不容易受到黑客的攻擊；
- 從網站穩定性來講，如果程序、數據庫出了問題，會直接影響網站的訪問，而靜態網頁就避免瞭如此情況，不會因爲程序等，而損失網站數據，影響正常打開，損失用戶體驗，影響網站信任度；
一、靜態請求CDN
用戶將靜態數據請求到ECS服務器，ECS服務器解析到阿里雲的CDN中,CDN可以理解爲一個無限大的內容磁盤緩存，本身沒有文件存儲的，當用戶要訪問getItem一個靜態資源文件的時候，只需要根據路由規則查看本地是否有這樣的文件，有就直接返回，沒有就回源到原站；回源到上圖中的OSS中去獲取靜態資源文件。如果取得了getItem的html靜態資源文件，CDN就可以一邊返回對應的文件，一邊把文件按照http指示的生命週期緩存起來，以便於下一次用戶在訪問時，不用在回源到OSS中，直接返回即可。
1.1 回源緩存設置
cache control響應頭
cache control是服務端用來告訴客戶端說，我這個http的response你可不可以緩存，以什麼樣的策略去緩存；
-
private:客戶端可以緩存/默認設置；
-
public：客戶端和代理服務器都可以緩存；
客戶端往服務端發送http請求，中間可能會經過ngixn反向代理，也可能會經過正向代理的出口服務器，也可能會經過CDN網絡。因此中間層的節點看到對應的cache control是private的時候認定只有請求發起的客戶端/瀏覽器纔可以進行緩存； -
max-age = xxx：緩存的內容將在xxx秒後失效；
-
no-cache:強制向服務端再驗證一次；
會將對象的緩存存儲在客戶端，但是下一次用的時候需要向服務端驗證一次這個緩存還能不能用，再去決定是否要去用之前用過的緩存； -
no-store:不緩存請求的任何返回內容；
1.2 有效性判斷
在驗證一次，就是對緩存的有效性判斷；
-
ETag:資源唯一標識
一般是將請求的資源內容做一個MD5處理，在第一次返回的內容中加上Etag標識一起返回給瀏覽器，瀏覽器存儲下對應的Etag,下一次緩存時，所謂的有效性判斷就是將之前的Etag一起帶到服務器中，用來驗證不發送對應的響應而是發送對應的http請求並且帶上Etag的值，服務端會將Etag的值和本地文件的Etag內容做比較，若一致，就返回一個304 not modify,告訴其服務端內容有效； -
If-None-Match：客戶端發送的匹配Etag標識符；
-
Last-modified:資源最後被修改的時間；
-
If-Modified-Since:客戶端發送的匹配資源最後修改時間的標識符；
若這個時間早於Last-modified，說明資源是無效的，反之即有效
1.3 瀏覽器的三種刷新方式
- 回車刷新或a連接：看cache-control對應的max-age是否仍然有效，有效則直接from cache,若cache-control中位no-cache,則進入緩存協商邏輯；
- F5刷新或者command+R刷新：去掉cache-control中的max-age或者直接設置max-age爲0，然後進入緩存協商邏輯；
- 強制刷新ctril+F5或者command+shift+R刷新：去掉cache-control和協商頭，強制刷新；
- 協商機制，比較Last-modified和Etag到服務端，若服務端判斷沒變化則304不返回數據，否則200返回數據；
1.4 CDN自定義緩存策略
- 可自定義目錄過期時間；
- 可自定義後綴名過期時間；
- 可自定義對應權重；
- 可通過界面或API強制cdn對應目錄刷新(非保成功)；
阿里雲CDN緩存策略，這篇文章講了CDN的自定義緩存策略，可以看一下細節；
二、靜態資源部署策略
-
css,js,img等元素使用帶版本號部署，例如a.js?v=1.0不便利，且維護困難
html一般採取強推的概念，對應的html文件可以設置max-age,更新的時候，強推掉，讓所有 CDN都失效調，全部回源。但對應的max-age設置爲較短的時間； -
css,js,img等元素使用帶摘要部署：例如a.js?v=45edw存在先部署html還是先部署資源的覆蓋問題；
-
css,js,imh等元素使用摘要做文件名部署，例如45edw.js,新老版本並存，且可回滾，資源部署完成後再部署html；
對應部署策略
- 對應靜態資源保持生命週期內不會變，max-age可設置的很長，無視失效更新週期；
- html文件設置no-cache或較短max age，以便於更新；
- html文件仍然可以設置較長的max age，依靠動態的獲取版本號請求發送到後端，異步下載最新的版本號的html後展示渲染在前端；
- 動態請求也可以靜態化成json資源推送到cdn上；
- 依靠異步請求獲取後端節點對應資源狀態做緊急下架處理；
- 可通過跑批僅僅推送cdn內容使其下架等操作；
三、全頁面靜態化
- html css js靜態資源cdn化
- js ajax動態請求cdn化
- 全頁面靜態化
在服務端完成html,cdd，甚至js的load渲染成純html文件後直接以靜態資源的方式部署到CDN上。
phantomjs
-
無頭瀏覽器，可以藉助其模擬webkit js的執行;
應用： -
修改需要全頁面靜態化的實現，採用initView和hasInit方式防止多次初始化；
-
編寫對應輪詢生成內容方式；
-
將全靜態化頁面生成後推送到cdn；