我們使用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完成圖檔加速
歡迎關注微信公衆号：
