我們使用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完成圖片加速

歡迎關注微信公眾號：

相關推薦