我们使用 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 完成图片加速 https://www.nndev.cn/archives/1940
来源: https://www.cnblogs.com/woshiweige/p/11096079.html