阿里云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完成图片加速

欢迎关注微信公众号：