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

但是，如果在用戶訪問高峰期，圖片內(nèi)容大批量發(fā)生變化，大量用戶的訪問就會穿透cdn，對源站造成巨大的壓力。

結(jié)合阿里淘系2020年雙11的淘寶實踐，給大家分享下在圖片業(yè)務(wù)里，我們是如何使用CDN以及如何解決挑戰(zhàn)和困難。

CDN工作原理

內(nèi)容分發(fā)網(wǎng)絡(luò)（Content Delivery Network，簡稱CDN）是建立并覆蓋在承載網(wǎng)之上，由分布在不同區(qū)域的邊緣節(jié)點服務(wù)器群組成的分布式網(wǎng)絡(luò)。#鼻屎#

CDN應(yīng)用廣泛，支持多種行業(yè)、多種場景內(nèi)容加速，例如：圖片小文件、大文件下載、視音頻點播、直播流媒體、全站加速、安全加速。

借用阿里云官網(wǎng)的例子，來簡單介紹CDN的工作原理。

假設(shè)通過CDN加速的域名為www.a.com，接入CDN網(wǎng)絡(luò)，開始使用加速服務(wù)后，當終端用戶（北京）發(fā)起HTTP請求時，處理流程如下：

• 如果該IP地址對應(yīng)的節(jié)點已緩存該資源，則會將數(shù)據(jù)直接返回給用戶，例如，圖中步驟7和8，請求結(jié)束。
• 如果該IP地址對應(yīng)的節(jié)點未緩存該資源，則節(jié)點向源站發(fā)起對該資源的請求。獲取資源后，結(jié)合用戶自定義配置的緩存策略，將資源緩存至節(jié)點，例如，圖中的北京節(jié)點，并返回給用戶，請求結(jié)束。

從這個例子可以了解到：

（1）CDN的加速資源是跟域名綁定的。#濮陽闿是誰？他與東吳大臣濮陽興是什么關(guān)系？#（2）通過域名訪問資源，首先是通過DNS分查找離用戶最近的CDN節(jié)點（邊緣服務(wù)器）的IP（3）通過IP訪問實際資源時，如果CDN上并沒有緩存資源，則會到源站請求資源，并緩存到CDN節(jié)點上，這樣，用戶下一次訪問時，該CDN節(jié)點就會有對應(yīng)資源的緩存了。

淘寶鹿班圖片業(yè)務(wù)背景

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

長期以來，主圖上的價格表達都是商家自己維護，商品價格發(fā)生變化后，手動去換圖。這樣做，會帶來3個問題： （1）價格的準確性：商家手動填寫的圖片價格，跟實際的購買價可能不一致，造成不好的用戶體驗。 （2）價格更新的及時性：有時候，由于優(yōu)惠券/品類券的生效失效，會導(dǎo)致商品的價格變化會很頻繁，商家根本來不及換圖。 （3）商家的操作成本：手動修改圖片的價格，成本還是很高的，需要通過ps等軟件修改圖片，重新上傳，編輯商品。

今年雙11，我們淘寶鹿班團隊，試圖通過技術(shù)手段來解決這些問題。當商品價格發(fā)生變化后，系統(tǒng)自動計算新的價格，自動合成圖片，然后更新商品主圖。

我們知道，淘寶網(wǎng)有上億的商品，光大促商品就有幾千萬，因此，價格變化導(dǎo)致的圖片變化頻率非常高。最高的就是在雙11的0點，全部大促商品的價格都會由日常價格變成大促價格。

這就意味著，大促高峰期，有上千萬的圖片剛生成就會被用戶訪問。那這個情況會產(chǎn)生什么問題呢，讓我們先了解下淘寶的圖片空間和CDN的架構(gòu)，就清楚了。

淘寶圖片空間和CDN的架構(gòu)

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

CDN的緩存分成2級，合理的分配L1和L2的比例，一方面，可以通過一致性hash的手段，在同等資源的情況下，緩存更多內(nèi)容，提升整體緩存命中率；另一方面，可以平衡計算和IO，充分利用不同配置的機器的能力。

用戶訪問圖片的過程如下：（1）用戶通過手機淘寶來搜索商品或者查看寶貝詳情。（2）詳情/搜索/推薦通過調(diào)用商品中心返回商品的圖片URL。（3）客戶端本地如果有該圖片的緩存，則直接渲染圖片，否則執(zhí)行下一步。（4）從CDN L1回源圖片，如果L1有該圖片的緩存，則客戶端渲染圖片，同時緩存到本地，如果L1沒有緩存，則執(zhí)行下一步。（5）從CDN L2回源圖片，如果L2有該圖片的緩存，則客戶端渲染圖片，同時CDN L1及客戶端緩存圖片內(nèi)容，如果CDN L2沒有緩存該圖片，則執(zhí)行下一步。（6）從圖片空間回源圖片，圖片空間會從OSS拉取圖片源文件，按要求進行尺寸縮放，然后執(zhí)行編解碼，返回客戶端能夠支持的圖片內(nèi)容，之后客戶端就可以渲染圖片，同時CDN的L1、L2以及客戶端都會緩存圖片內(nèi)容。

頻繁換圖帶來的技術(shù)挑戰(zhàn)

當商品的價格發(fā)生變化時，我們會使用新的價格重新合成圖片，更新商品中心中存儲的圖片URL。

這樣會帶來2個問題：（1）CDN及手機淘寶原本緩存的圖片內(nèi)容失效了，用戶訪問圖片會全部回源到img-picasso。（2）由于更改了商品的字段，交易的核心應(yīng)用（購物車和商品中心）的緩存也失效了，用戶瀏覽及購物時，對商品的訪問會走到db。

源站img-picasso處理圖片，以及查詢商品DB，都是非常消耗資源的。CDN及商品的緩存命中率降低后，對源站img-picsasso以及db會產(chǎn)生巨大的壓力。

拿CDN緩存為例，簡單計算一下，CDN平時的命中率是98%，假設(shè)命中率降低1個點，對源站的壓力就會增加1/3（原本承擔2%的流量，現(xiàn)在需要承擔3%的流量），意味著img-picasso需要擴容1/3。如果全網(wǎng)一半的圖片都同時變化，cdn的命中率降到50%，對img-picasso的訪問量就會增加25倍，這個擴容成本肯定沒法接受。

解決這2個問題，對應(yīng)的有2個辦法：（1）改圖保持圖片URL不變，可以避免商品鏈路的緩存失效。（2）在訪問高峰到來之前，提前預(yù)熱圖片到CDN，可以避免CDN緩存失效對源站的壓力。

下面，介紹下我們具體是怎么做到這2點的。

頻繁換圖的應(yīng)對方案

改圖保持圖片URL不變

圖片內(nèi)容發(fā)生變化時，執(zhí)行下面2個操作：（1）更新OSS內(nèi)容：使用新的圖片內(nèi)容替換OSS中老的圖片內(nèi)容（2）刷新CDN緩存：清除CDN之前緩存的圖片內(nèi)容

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

由于圖片URL沒有變化，就不必去更新商品中心的圖片鏈接，這樣商品鏈路的緩存可以保持不變。在真正實施這個方案的過程中，遇到了幾個問題，簡單跟大家分享下：

OSS三地同步

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

但是使用URL不變方案，CDN緩存已經(jīng)清除完成后，如果另外2地的OSS還未同步完成，用戶訪問后，就會回源到舊的圖片內(nèi)容，發(fā)現(xiàn)圖片內(nèi)容沒有變化。

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

圖片尺寸收斂

同一張商品圖片會用于不同的場景坑位展現(xiàn)，不同的坑位對圖片的尺寸有不同的要求。為此，圖片空間提供了一項功能，可以方便的生成不同尺寸的縮率圖。只需要訪問圖片時，給圖片增加不同的后綴，img-picasso源站就可以按要求進行圖片進行縮放。

由于歷史原因，之前對縮放的尺寸種類沒有限制，導(dǎo)致CDN上的圖片后綴格式多達2400種+，TOP6格式覆蓋率46%，TOP15格式覆蓋率64%。這意味著，一張圖片，在cdn上最多可能有2400+個不同的url，當圖片內(nèi)容變化后，要把這些緩存全部清掉，才能保證所有用戶看到的圖片都是新內(nèi)容。

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

圖片空間對于圖片質(zhì)量壓縮參數(shù)的規(guī)則如下：* 圖片質(zhì)量參數(shù)常見有一下8種形式：Q90、Q75、Q50、Q30、q90、q75、q50、q30* 圖片銳化參數(shù)常見有一下3種形式：s100，s150，s200

我們重新將圖片質(zhì)量定義為高質(zhì)量圖片和低質(zhì)量圖片，收斂格式為 q90 和 p50s150這樣，就可以把2000多種格式收斂到6種主要格式，CDN清除緩存才變得可行。

多副本清除CDN緩存

通過圖片尺寸收斂，每張圖片只需要清除6個不同的url就可以了，那能不能進一步提升刷新效率呢？

為此，阿里云CDN為我們提供了多副本刷新的解決方案：每種不同后綴的圖片，作為圖片的一個副本，在CDN的swift層增加一層KV結(jié)構(gòu)，存儲url和不同副本的映射關(guān)系，清除緩存時，可以通過該結(jié)構(gòu)找到所有副本，實現(xiàn)快速清除所有副本。這樣，每張圖片，我們只需要調(diào)用一次CDN清除緩存接口就可以了，極大提升了CDN緩存刷新效率。

圖片域名收斂

淘系的圖片域名有300多種，主要有下面2個原因：（1）圖片完整的鏈接太長，所以存儲時經(jīng)常只存最后一段，業(yè)務(wù)自己來拼域名，很多業(yè)務(wù)就自己申請了一個圖片域名來拼。（2）PC時代，瀏覽器對同一域名下的并發(fā)請求數(shù)是有限制的，不同瀏覽器不一樣，一般6個左右。

為了突破該限制，一些業(yè)務(wù)就會申請多個域名，隨機的拼不同的域名。

前面我們講過，CDN的緩存是跟域名綁定的，不管是緩存命中還是緩存清除，都只能針對一個域名。

我們顯然不可能改一張圖，就去對300個域名調(diào)用CDN刷新。于是我們考慮對圖片域名進行收斂，使得用戶對圖片的訪問都路由到同一個域名，我們希望將所有的圖片訪問統(tǒng)一收斂到http://picasso.alicdn.com，具體實現(xiàn)方式如下：

（1）對于手淘和貓客客戶端，圖片訪問都收口在圖片庫，我們推進圖片庫進行改造，符合一定規(guī)則的url，統(tǒng)一收斂到http://picasso.alicdn.com，實現(xiàn)了域名的一刀切。（2）對于PC瀏覽器端，就比較麻煩了，沒有統(tǒng)一收口的地方。我們只能退而求其次，針對訪問最多的6大域名，在cdn上配置域名轉(zhuǎn)發(fā)規(guī)則，重定向到picasso域名。

通過這種方式，我們實現(xiàn)了全網(wǎng)99%以上的圖片訪問流量都路由到picasso域名，圖片內(nèi)容發(fā)生變化時，通過清除picasso域名的cdn緩存，就能保證基本所有的場景都能看到新的圖片內(nèi)容。

客戶端及瀏覽器緩存

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

大家知道，瀏覽器的緩存都遵循標準的http max-age協(xié)議，指定該header后，到了時間圖片就會失效，訪問到新的圖片。所以我們可以在源站img-picasso回源給cdn時，添加max-age協(xié)議頭，值為1分鐘，cdn會原封不動的透給瀏覽器，這樣瀏覽器就可以實現(xiàn)1分鐘內(nèi)圖片緩存失效，重新到cdn拉新的圖片資源。

對于手機淘寶客戶端，我們在原有的LRU緩存機制之上，另外支持標準的http協(xié)議。這樣，手機淘寶也實現(xiàn)了1分鐘內(nèi)圖片緩存失效。

提前預(yù)熱CDN圖片

通過改圖保持圖片URL不變，我們解決了改圖對商品鏈路緩存的影響。但是，圖片變化時，雖然URL沒有變，但我們清除了CDN緩存，導(dǎo)致用戶訪問時還是會回源到img-picasso源站，所以對圖片源站的壓力依然存在。

我們發(fā)現(xiàn)，商品的價格變化大部分發(fā)生在大促節(jié)奏變化的時刻，基于這個特點，我們通過提前合成圖片，提前預(yù)熱到CDN，可以實現(xiàn)圖片切換瞬間生效，同時對源站沒有壓力。

具體方案如下：（1）提前合成多波段圖片：我們知道大促期間商家集中換圖的時間點后，按這些時間點把圖片的展示分成多個波段，每個波段圖片提前合成，并提前將圖片URL寫入到商品中心擴展結(jié)構(gòu)中。（2）圖片訪問路由：營銷系統(tǒng)根據(jù)配置的大促氛圍切換計劃，告訴鹿班圖片二方包，當前是哪個波段，鹿班根據(jù)當前波段及場景，返回正確的圖片URL給各個場景。（3）圖片渲染：各個場景拿到圖片URL后，結(jié)合自身的業(yè)務(wù)邏輯，決定是否要展現(xiàn)該圖片。（4）CDN圖片預(yù)熱：為了避免圖片集中切換時，把源站擊垮，我們會在集中切換前把這些冷圖片內(nèi)容預(yù)熱到CDN。（5）波段內(nèi)圖片變化：提前合成各個波段圖片后，商家可能會臨時發(fā)券/改價，導(dǎo)致商品價格再次變化，對于這類換圖需求，為了避免更新商品中心的圖片URL，我們通過本文上一章節(jié)刷CDN緩存的方式實現(xiàn)。

總結(jié)和展望

CDN技術(shù)廣泛應(yīng)用于互聯(lián)網(wǎng)的各個場景，如今的CDN服務(wù)商，都提供了非常簡單的業(yè)務(wù)接入方式，而且CDN的費用每年都在降低，這一切使得CDN的接入和使用成本越來越低。

本文通過淘寶圖片業(yè)務(wù)的例子，為大家闡述了使用CDN過程中可能遇到的問題和解決思路。

淘寶的圖片業(yè)務(wù)除了訪問量大，還會面臨更新頻繁的問題。圖片的頻繁更新，一方面會由于商品上的圖片url變化，導(dǎo)致商品緩存失效，另一方面會大幅降低CDN的圖片訪問緩存命中率。

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

針對改圖降低CDN圖片緩存命中率的問題，我們根據(jù)業(yè)務(wù)的特點，提前合成不同波段的圖片，并預(yù)熱到CDN，保障了源站的安全。目前，淘寶上用戶看到的圖片，都是提前合成好的。未來，我們考慮在用戶訪問圖片時，實時合成圖片。通過這項技術(shù)，可以實時感知業(yè)務(wù)更多的實時信息，可以根據(jù)這些信息，在圖片上合成當前用戶或者環(huán)境更匹配的文案/元素等內(nèi)容，給用戶帶來更多的驚喜。