CDN工做原理及其在淘寶雙11圖片業務中的應用

一、導讀

淘寶的圖片訪問，有98%的流量都走了CDN緩存，只有2%會回源到源站，節省了大量的服務器資源。

可是，若是在用戶訪問高峯期，圖片內容大批量發生變化，大量用戶的訪問就會穿透cdn，對源站形成巨大的壓力。

今年雙11，淘寶鹿班的主圖價格表達升級項目，就面臨了這種挑戰，讓咱們看看是如何解決的吧。

(更多幹貨請關注【淘系技術】公衆號）

二、CDN工做原理

內容分發網絡（Content Delivery Network，簡稱CDN）是創建並覆蓋在承載網之上，由分佈在不一樣區域的邊緣節點服務器羣組成的分佈式網絡。

CDN應用普遍，支持多種行業、多種場景內容加速，例如：圖片小文件、大文件下載、視音頻點播、直播流媒體、全站加速、安全加速。

借用阿里雲官網的例子，來簡單介紹CDN的工做原理。

假設經過CDN加速的域名爲www.a.com，接入CDN網絡，開始使用加速服務後，當終端用戶（北京）發起HTTP請求時，處理流程以下：

1. 當終端用戶（北京）向www.a.com下的指定資源發起請求時，首先向LDNS（本地DNS）發起域名解析請求。
2. LDNS檢查緩存中是否有www.a.com的IP地址記錄。若是有，則直接返回給終端用戶；若是沒有，則向受權DNS查詢。
3. 當受權DNS解析www.a.com時，返回域名CNAME www.a.tbcdn.com對應IP地址。
4. 域名解析請求發送至阿里雲DNS調度系統，併爲請求分配最佳節點IP地址。
5. LDNS獲取DNS返回的解析IP地址。
6. 用戶獲取解析IP地址。
7. 用戶向獲取的IP地址發起對該資源的訪問請求。

• 若是該IP地址對應的節點已緩存該資源，則會將數據直接返回給用戶，例如，圖中步驟7和8，請求結束。
• 若是該IP地址對應的節點未緩存該資源，則節點向源站發起對該資源的請求。獲取資源後，結合用戶自定義配置的緩存策略，將資源緩存至節點，例如，圖中的北京節點，並返回給用戶，請求結束。

從這個例子能夠了解到：

（1）CDN的加速資源是跟域名綁定的。

（2）經過域名訪問資源，首先是經過DNS分查找離用戶最近的CDN節點（邊緣服務器）的IP

（3）經過IP訪問實際資源時，若是CDN上並無緩存資源，則會到源站請求資源，並緩存到CDN節點上，這樣，用戶下一次訪問時，該CDN節點就會有對應資源的緩存了。

三、淘寶鹿班圖片業務背景

商品的主圖貫穿整個導購和交易鏈路，相比文字，圖片更能吸引眼球，主圖對消費者的購物決策有很大的影響。主圖上表達的內容各式各樣，但其中必定少不了的必定是價格的表達。

    長期以來，主圖上的價格表達都是商家本身維護，商品價格發生變化後，手動去換圖。這樣作，會帶來3個問題：

  （1）價格的準確性：商家手動填寫的圖片價格，跟實際的購買價可能不一致，形成很差的用戶體驗。

  （2）價格更新的及時性：有時候，因爲優惠券/品類券的生效失效，會致使商品的價格變化會很頻繁，商家根原本不及換圖。

  （3）商家的操做成本：手動修改圖片的價格，成本仍是很高的，須要經過ps等軟件修改圖片，從新上傳，編輯商品。

今年雙11，咱們淘寶鹿班團隊，試圖經過技術手段來解決這些問題。當商品價格發生變化後，系統自動計算新的價格，自動合成圖片，而後更新商品主圖。

咱們知道，淘寶網有上億的商品，光大促商品就有幾千萬，所以，價格變化致使的圖片變化頻率很是高。最高的就是在雙11的0點，所有大促商品的價格都會由平常價格變成大促價格。

這就意味着，大促高峯期，有上千萬的圖片剛生成就會被用戶訪問。那這個狀況會產生什麼問題呢，讓咱們先了解下淘寶的圖片空間和CDN的架構，就清楚了。

四、淘寶圖片空間和CDN的架構

================

淘寶整個圖片的訪問鏈路有三級緩存（客戶端本地、CDN L一、CDN L2），全部圖片都持久化的存儲到OSS中。真正處理圖片的是img-picasso系統，它的功能比較複雜，包括從OSS讀取文件，對圖片尺寸進行縮放，編解碼，因此機器成本比較高。

CDN的緩存分紅2級，合理的分配L1和L2的比例，一方面，能夠經過一致性hash的手段，在同等資源的狀況下，緩存更多內容，提高總體緩存命中率；另外一方面，能夠平衡計算和IO，充分利用不一樣配置的機器的能力。

用戶訪問圖片的過程以下：

（1）用戶經過手機淘寶來搜索商品或者查看寶貝詳情。

（2）詳情/搜索/推薦經過調用商品中心返回商品的圖片URL。

（3）客戶端本地若是有該圖片的緩存，則直接渲染圖片，不然執行下一步。

（4）從CDN L1回源圖片，若是L1有該圖片的緩存，則客戶端渲染圖片，同時緩存到本地，若是L1沒有緩存，則執行下一步。

（5）從CDN L2回源圖片，若是L2有該圖片的緩存，則客戶端渲染圖片，同時CDN L1及客戶端緩存圖片內容，若是CDN L2沒有緩存該圖片，則執行下一步。

（6）從圖片空間回源圖片，圖片空間會從OSS拉取圖片源文件，按要求進行尺寸縮放，而後執行編解碼，返回客戶端可以支持的圖片內容，以後客戶端就能夠渲染圖片，同時CDN的L一、L2以及客戶端都會緩存圖片內容。

五、頻繁換圖帶來的技術挑戰

當商品的價格發生變化時，咱們會使用新的價格從新合成圖片，更新商品中心中存儲的圖片URL。這樣會帶來2個問題：

（1）CDN及手機淘寶本來緩存的圖片內容失效了，用戶訪問圖片會所有回源到img-picasso。

（2）因爲更改了商品的字段，交易的核心應用（購物車和商品中心）的緩存也失效了，用戶瀏覽及購物時，對商品的訪問會走到db。

源站img-picasso處理圖片，以及查詢商品DB，都是很是消耗資源的。CDN及商品的緩存命中率下降後，對源站img-picsasso以及db會產生巨大的壓力。

拿CDN緩存爲例，簡單計算一下，CDN平時的命中率是98%，假設命中率下降1個點，對源站的壓力就會增長1/3（本來承擔2%的流量，如今須要承擔3%的流量），意味着img-picasso須要擴容1/3。若是全網一半的圖片都同時變化，cdn的命中率降到50%，對img-picasso的訪問量就會增長25倍，這個擴容成本確定無法接受。

解決這2個問題，對應的有2個辦法：

（1）改圖保持圖片URL不變，能夠避免商品鏈路的緩存失效。

（2）在訪問高峯到來以前，提早預熱圖片到CDN，能夠避免CDN緩存失效對源站的壓力。

下面，介紹下咱們具體是怎麼作到這2點的。

六、頻繁換圖的應對方案

6.一、改圖保持圖片URL不變

圖片內容發生變化時，執行下面2個操做：

（1）更新OSS內容：使用新的圖片內容替換OSS中老的圖片內容

（2）刷新CDN緩存：清除CDN以前緩存的圖片內容

這樣，用戶再次訪問圖片時，發現CDN沒有緩存，就會回源到img-picasso，從OSS拉取新的圖片內容。

因爲圖片URL沒有變化，就沒必要去更新商品中心的圖片連接，這樣商品鏈路的緩存能夠保持不變。

在真正實施這個方案的過程當中，遇到了幾個問題，簡單跟你們分享下：

6.1.一、OSS三地同步

淘寶的圖片空間，承載了淘系全部圖片的上下行穩定性保障，爲了保障高可用，一份資源會存儲到三地OSS。圖片上傳時，默認只上傳一地，利用OSS的能力，自動同步到另外兩地。

    可是使用URL不變方案，CDN緩存已經清除完成後，若是另外2地的OSS還未同步完成，用戶訪問後，就會回源到舊的圖片內容，發現圖片內容沒有變化。

     針對該問題，咱們將異步同步OSS軟鏈的模式，改爲三地同步建軟鏈，三地都返回成功後，再去清除CDN緩存，這就保證了用戶訪問的圖片必定是最新的內容。

6.1.二、圖片尺寸收斂

同一張商品圖片會用於不一樣的場景坑位展示，不一樣的坑位對圖片的尺寸有不一樣的要求。爲此，圖片空間提供了一項功能，能夠方便的生成不一樣尺寸的縮率圖。只須要訪問圖片時，給圖片增長不一樣的後綴，img-picasso源站就能夠按要求進行圖片進行縮放。

因爲歷史緣由，以前對縮放的尺寸種類沒有限制，致使CDN上的圖片後綴格式多達2400種+，TOP6格式覆蓋率46%，TOP15格式覆蓋率64%。這意味着，一張圖片，在cdn上最多可能有2400+個不一樣的url，當圖片內容變化後，要把這些緩存所有清掉，才能保證全部用戶看到的圖片都是新內容。

爲了解決這個問題，咱們對域名格式進行了收斂。

圖片空間對於圖片質量壓縮參數的規則以下：

• 圖片質量參數常見有一下8種形式：Q90、Q7五、Q50、Q30、q90、q7五、q50、q30
• 圖片銳化參數常見有一下3種形式：s100，s150，s200

咱們從新將圖片質量定義爲高質量圖片和低質量圖片，收斂格式爲 q90 和 p50s150

這樣，就能夠把2000多種格式收斂到6種主要格式，CDN清除緩存才變得可行。

6.1.三、多副本清除CDN緩存

經過圖片尺寸收斂，每張圖片只須要清除6個不一樣的url就能夠了，那能不能進一步提高刷新效率呢？

爲此，阿里雲CDN爲咱們提供了多副本刷新的解決方案：每種不一樣後綴的圖片，做爲圖片的一個副本，在CDN的swift層增長一層KV結構，存儲url和不一樣副本的映射關係，清除緩存時，能夠經過該結構找到全部副本，實現快速清除全部副本。這樣，每張圖片，咱們只須要調用一次CDN清除緩存接口就能夠了，極大提高了CDN緩存刷新效率。

6.1.四、圖片域名收斂

淘系的圖片域名有300多種，主要有下面2個緣由：

（1）圖片完整的連接太長，因此存儲時常常只存最後一段，業務本身來拼域名，不少業務就本身申請了一個圖片域名來拼。

（2）PC時代，瀏覽器對同一域名下的併發請求數是有限制的，不一樣瀏覽器不同，通常6個左右。爲了突破該限制，一些業務就會申請多個域名，隨機的拼不一樣的域名。

前面咱們講過，CDN的緩存是跟域名綁定的，無論是緩存命中仍是緩存清除，都只能針對一個域名。

咱們顯然不可能改一張圖，就去對300個域名調用CDN刷新。因而咱們考慮對圖片域名進行收斂，使得用戶對圖片的訪問都路由到同一個域名，咱們但願將全部的圖片訪問統一收斂到picasso.alicdn.com，具體實現方式以下：

（1）對於手淘和貓客客戶端，圖片訪問都收口在圖片庫，咱們推動圖片庫進行改造，符合必定規則的url，統一收斂到picasso.alicdn.com，實現了域名的一刀切。

（2）對於PC瀏覽器端，就比較麻煩了，沒有統一收口的地方。咱們只能退而求其次，針對訪問最多的6大域名，在cdn上配置域名轉發規則，重定向到picasso域名。

經過這種方式，咱們實現了全網99%以上的圖片訪問流量都路由到picasso域名，圖片內容發生變化時，經過清除picasso域名的cdn緩存，就能保證基本全部的場景都能看到新的圖片內容。

6.1.五、客戶端及瀏覽器緩存

經過多副本和圖片域名收斂，cdn的緩存問題獲得瞭解決。但在cdn之上，用戶圖片訪問首先是來自客戶端或者瀏覽器，這裏也會有一層緩存。

你們知道，瀏覽器的緩存都遵循標準的http max-age協議，指定該header後，到了時間圖片就會失效，訪問到新的圖片。因此咱們能夠在源站img-picasso回源給cdn時，添加max-age協議頭，值爲1分鐘，cdn會原封不動的透給瀏覽器，這樣瀏覽器就能夠實現1分鐘內圖片緩存失效，從新到cdn拉新的圖片資源。

對於手機淘寶客戶端，咱們在原有的LRU緩存機制之上，另外支持標準的http協議。這樣，手機淘寶也實現了1分鐘內圖片緩存失效。

6.二、提早預熱CDN圖片

經過改圖保持圖片URL不變，咱們解決了改圖對商品鏈路緩存的影響。可是，圖片變化時，雖然URL沒有變，但咱們清除了CDN緩存，致使用戶訪問時仍是會回源到img-picasso源站，因此對圖片源站的壓力依然存在。

咱們發現，商品的價格變化大部分發生在大促節奏變化的時刻，基於這個特色，咱們經過提早合成圖片，提早預熱到CDN，能夠實現圖片切換瞬間生效，同時對源站沒有壓力。具體方案以下：

（1）提早合成多波段圖片：咱們知道大促期間商家集中換圖的時間點後，按這些時間點把圖片的展現分紅多個波段，每一個波段圖片提早合成，並提早將圖片URL寫入到商品中心擴展結構中。

（2）圖片訪問路由：營銷系統根據配置的大促氛圍切換計劃，告訴鹿班圖片二方包，當前是哪一個波段，鹿班根據當前波段及場景，返回正確的圖片URL給各個場景。

（3）圖片渲染：各個場景拿到圖片URL後，結合自身的業務邏輯，決定是否要展示該圖片。

（4）CDN圖片預熱：爲了不圖片集中切換時，把源站擊垮，咱們會在集中切換前把這些冷圖片內容預熱到CDN。

（5）波段內圖片變化：提早合成各個波段圖片後，商家可能會臨時發券/改價，致使商品價格再次變化，對於這類換圖需求，爲了不更新商品中心的圖片URL，咱們經過本文上一章節刷CDN緩存的方式實現。

七、總結和展望

CDN技術普遍應用於互聯網的各個場景，現在的CDN服務商，都提供了很是簡單的業務接入方式，並且CDN的費用每一年都在下降，這一切使得CDN的接入和使用成本愈來愈低。

本文經過淘寶圖片業務的例子，爲你們闡述了使用CDN過程當中可能遇到的問題和解決思路。

淘寶的圖片業務除了訪問量大，還會面臨更新頻繁的問題。圖片的頻繁更新，一方面會因爲商品上的圖片url變化，致使商品緩存失效，另外一方面會大幅下降CDN的圖片訪問緩存命中率。

針對圖片url變化致使商品緩存失效的問題，咱們經過刷新cdn緩存，用戶訪問時從新回源的方式，實現了改圖保持圖片url不變，這個過程當中了，咱們解決了一些列的問題，包括：OSS三地同步更新、圖片尺寸收斂、圖片域名收斂、客戶端及瀏覽器本地緩存。

針對改圖下降CDN圖片緩存命中率的問題，咱們根據業務的特色，提早合成不一樣波段的圖片，並預熱到CDN，保障了源站的安全。

目前，淘寶上用戶看到的圖片，都是提早合成好的。將來，咱們考慮在用戶訪問圖片時，實時合成圖片。經過這項技術，能夠實時感知業務更多的實時信息，能夠根據這些信息，在圖片上合成當前用戶或者環境更匹配的文案/元素等內容，給用戶帶來更多的驚喜。

固然，實時合圖也會面臨更多的挑戰，如：計算能力、合圖性能。此外，對於CDN而言，因爲每次用戶訪問的內容是臨時合成的，CDN的緩存策略也是一個很大的挑戰。

技術來驅動業務！！！淘寶鹿班團隊，長期聚焦在圖片及視頻領域，經過技術創新，提高商家的經營效率及用戶的體驗，若是你對圖片或者視頻技術感興趣，或者但願接觸到高併發的工程系統，但願經過code改變世界，歡迎加入咱們！！！  zhaoming.ywt@taobao.com

（更多幹貨請關注【淘系技術】公衆號）（更多幹貨請關注【淘系技術】公衆號）（更多幹貨請關注【淘系技術】公衆號）