我们使用React Native开发APP,在列表中显示图片时,列表框经常出现长时间的空白。经过稍微研究和参考其他人的经验,我们知道React Native的ListView以及后来改进版的FlatList在安卓系统上都有内存使用方面的问题,很多团队在开发时都需要自己去优化这个控件,大体优化思路无非也就是将滚出显示区域外的图片占用的内存释放掉,具体实现起来会复杂一些。
以上主要是背景介绍,不过有点跑题。那我们在优化之后,仍然还是有些问题,这和网络状况也有关系,网速慢的时候图片加载的时间比较长,会出现卡顿和渲染完成前的空白现象。我们图片全部存储在阿里云OSS服务中,数据库中只保存图片链接,那图片的加载速度问题,可以使用阿里云CDN来协助解决。
CDN+OSS能解决图片加速的问题,那具体是怎样配置的呢?这里我们先把两个名词了解清楚,有些名词因为向来没有被很好地解释,导致使用者对概念理解不正确,从而对加速的流程理解有错误,即使按照文档提示可以配置了,也无法正确理解为什么要那样去配置。
加速域名
比如我的网站域名是www.mydomain.com,CDN是用来加速这个网站的图片,那么有人就以为加速域名是:www.mydomain.com,即把加速域名理解为被加速的网站的域名。而实际上,我们应该添加一个二级域名来作为加速域名,加速域名的意思是,你访问这个域名的时候,所访问的资源是通过CDN来加速了的,需要注意的是,在这里,加速域名不是:www.mydomain.com。
源站域名
对于我们这个场景来说,源站域名就是OSS的域名。如果我