阿里雲CDN+OSS完成圖片加速

咱們使用React Native開發APP，在列表中顯示圖片時，列表框常常出現長時間的空白。通過稍微研究和參考其餘人的經驗，咱們知道React Native的ListView以及後來改進版的FlatList在安卓系統上都有內存使用方面的問題，不少團隊在開發時都須要本身去優化這個控件，大致優化思路無非也就是將滾出顯示區域外的圖片佔用的內存釋放掉，具體實現起來會複雜一些。

以上主要是背景介紹，不過有點跑題。那咱們在優化以後，仍然仍是有些問題，這和網絡情況也有關係，網速慢的時候圖片加載的時間比較長，會出現卡頓和渲染完成前的空白現象。咱們圖片所有存儲在阿里雲OSS服務中，數據庫中只保存圖片連接，那圖片的加載速度問題，可使用阿里雲CDN來協助解決。

CDN+OSS能解決圖片加速的問題，那具體是怎樣配置的呢？這裏咱們先把兩個名詞瞭解清楚，有些名詞由於向來沒有被很好地解釋，致使使用者對概念理解不正確，從而對加速的流程理解有錯誤，即便按照文檔提示能夠配置了，也沒法正確理解爲何要那樣去配置。

加速域名

好比個人網站域名是www.mydomain.com，CDN是用來加速這個網站的圖片，那麼有人就覺得加速域名是：www.mydomain.com，即把加速域名理解爲被加速的網站的域名。而實際上，咱們應該添加一個二級域名來做爲加速域名，加速域名的意思是，你訪問這個域名的時候，所訪問的資源是經過CDN來加速了的，須要注意的是，在這裏，加速域名不是：www.mydomain.com。

源站域名

對於咱們這個場景來講，源站域名就是OSS的域名。若是咱們經過OSS域名來訪問圖片資源，那麼就直接從OSS服務器獲取圖片，而若是從加速域名訪問圖片，則先試圖從CDN服務器獲取圖片資源，若是CDN服務器沒有緩存圖片資源，則CDN服務器會自動去源站OSS服務器獲取圖片資源並緩存在CDN服務器上。

配置及原理

具體來講，好比我要在網站某個頁面上顯示一張圖片，這張圖片是放OSS中的，地址爲：https://mydomain.com-oss.aliyun.com/test.jpg。如今我想使用CDN來加速這張圖片，那麼我須要在網站頁面代碼裏面修改圖片的地址爲加速域名的地址。我先在阿里雲的域名管理中選擇域名：mydomain.com，而後給它添加一個二級域名，暫且就叫cdn.mydomain.com吧，以後在阿里雲CDN控制檯的域名管理界面上，添加一個加速域名，就是這個：cdn.mydomain.com，源站域名就設置爲：https://mydomain.com-oss.aliyun.com。阿里雲CDN會給這個加速域名分配一個CNAME，好比：cdn.mydomain.com.kunlunar.com，而後你在mydomain.com的域名解析那裏，給二級域名：cdn.mydomain.com添加一個CNAME類型的解析，值爲：cdn.mydomain.com.kunlunar.com。

如今就能夠改下你網站界面裏面的代碼了，好比原來有代碼以下：

<img src=」https://mydomain.com-oss.aliyun.com/test.jpg」 />

就須要改爲：

<img src=」https://cdn.mydomain.com/test.jpg」 />

這樣，當用戶瀏覽你的網站：www.mydomain.com，訪問到咱們原來要加速的那張圖片時，就訪問了：https://cdn.mydomain.com/test.jpg，由於咱們已經給二級域名cdn.mydomain.com添加了一個CNAME解析，這時候DNS會把這個二級域名解析到CNAME的值，也就是前面提到的阿里雲給咱們的CNAME值：cdn.mydomain.com.kunlunar.com，這個值再通過解析獲得的是阿里雲智能DNS服務的IP，因而域名解析流程轉到了阿里雲的智能DNS。這個智能DNS根據用戶訪問的源IP地址，能夠知道用戶離哪一個CDN機房比較近，而後將那個CDN機房服務器的IP返回給用戶，假設爲：111.222.33.44。

用戶獲得這個IP：111.222.33.44後，就近地去獲取圖片了。當用戶第一次訪問CDN機房服務器時，找不到要訪問的圖片，這時候CDN服務器就會去訪問源站，也就是從OSS中獲取要訪問的圖片https://mydomain.com-oss.aliyun.com/test.jpg，並緩存到CDN服務器上，再將圖片內容返回給用戶。下一次若是有和該用戶位於同一區域的用戶訪問該圖片，則會走同樣的流程，只是這時候，CDN服務器上已經緩存好圖片，不須要再次去OSS中獲取原始圖片了。而CDN服務器相比於OSS存儲服務器，通常來講離用戶更近一些，這樣就達到了加速訪問的效果。阿里雲CDN+OSS組合使用時，還提供了自動刷新功能，開啓這個功能後，當OSS中的原始圖片信息改變時，會通知CDN服務器從新拉取並緩存，這樣就下降了訪問CDN服務器獲取資源時緩存未命中的機率。

 

原文發表於：阿里雲CDN+OSS完成圖片加速

歡迎關注微信公衆號：