我们使用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完成图片加速
欢迎关注微信公众号:
阿里云CDN+OSS完成图片加速的更多相关文章
-
云计算之路-阿里云上:访问阿里云CDN上的图片,自动跳转到百度首页
昨天有用户向我们反馈一篇博文(一条语句导致CPU持续100%)中的部分图片不能显示,我们的图片访问用的是阿里云CDN,原以为是某个CDN节点不稳定的问题,但在排查时发现这些图片不能显示竟然是因为请求时 ...
-
阿里云 CDN 业务基于边缘容器的云原生转型实践
导读:本文基于边缘容器的阿里云 CDN 云原生实践, 涵盖了边缘容器的背景和趋势,边缘托管集群 ACK Managed Edge K8s(文中简称“Edge@ACK”) 的能力.架构,以及基于边缘容器 ...
-
突破!阿里云CDN实现毫秒级全网刷新
通常在某网站使用了CDN节点来实现内容分发加速后,当源站内容更新的时候,CDN刷新系统会通过提交刷新请求将CDN节点上的指定缓存内容强制过期.当用户访问的时候,CDN节点将回源获取最新内容返回给用户, ...
-
阿里云存储OSS之九大使用技巧
http://www.biphp.com/cloud-computing/%E9%98%BF%E9%87%8C%E4%BA%91%E5%AD%98%E5%82%A8oss%E4%B9%8B%E4%B9 ...
-
阿里云-CDN
1.什么是CDN 内容分发网络,意思是将内容(静态资源,如文件等)缓存到全球加速节点,用户请求这些内容时,请求将调度到最近的CDN节点,加快了访问速度. 2.CDN原理 1.用户(北京)向www.a. ...
-
博客中新浪图床 迁移至 阿里云的OSS
前言 因为之前有个新浪的图床,还挺好用,而且免费,自己博客的图片上传到其上面也挺方便的,但是,前几周吧,突然图片就不能访问了,之前本来是想通过添加 meta 头来解决的,但是发现没有效果.于是就自己搞 ...
-
什么是阿里云CDN
阿里云内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络.阿里云CDN分担源站压力,避免网络拥塞, ...
-
阿里云CDN上线 WAF,一站式提供分发+安全能力
CDN是业界公认的加速网站访问效率.提升用户体验的内容分发加速产品.Gartner预测2019年超过50%的互联网流量将通过CDN内容分发网络进行加速. 然而,越来越多企业也意识到恶意网络攻击对非凡用 ...
-
阿里云CDN技术掌舵人文景:相爱相杀一路狂奔的这十年
导读:提到阿里云CDN,不得不提技术掌舵人姚伟斌(文景),虽然他不是团队中最“老”的同学,但他却历经了淘宝业务发展最为飞速的几年,见证了从最初服务淘宝和集团内部的CDN,到如今国内服务客户最多的云CD ...
随机推荐
-
使用HTML5新支持的搭建WebRtc环境来作为视频通讯
发现如果再重新设计这块的话,又会有不同的思路.对于可定位能力,我们可以全息日志采集,将每个用户在整个系统的走向异步的抓取下来,再同步到专门的日志分析系统,在这个系统中可以根据用户号码.订单号进行过滤分 ...
-
CentOs5.2中PHP的升级
最近一个项目中需要使用到PHP5.2的版本,而服务器上使用了官方的yum源进行安装,默认的版本是5.1.6,需要升级.但是因为不是一个非常 正式的服务器环境,所以想通过简单的yum update一下了 ...
-
Linux下nice/renice命令小结
1. nice命令 内核根据进程的nice值决定进程需要多少处理器时间. nice值的取值范围是是: -20到20. 一个具有-20 的 nice 值的进程有很高的优先级. 一个 nice 值为 20 ...
-
Linux如何查找文件安装路径?
Linux中查看某 个软件的安装路径(地址)有时显得非常重要.比如某个文件的快速启动项被删除,或者你要建立快速启动项,或者想删除. 添加安装文件等等,很多地方都要用到查案文件安装路径的命令. 这里给大 ...
-
linux 文件系统解析及相关命令(转)
简介 文件系统就是分区或磁盘上的所有文件的逻辑集合. 文件系统不仅包含着文件中的数据而且还有文件系统的结构,所有Linux 用户和程序看到的文件.目录.软连接及文件保护信息等都存储在其中. 不同Lin ...
-
NYOJ--513--A+B Problem IV(大数)
A+B Problem IV 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 acmj最近发现在使用计算器计算高精度的大数加法时很不方便,于是他想着能不能写个程序把这 ...
-
《转》优化UITableViewCell高度计算的那些事
我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化的一个总结.我们也在维护一个开源的扩展,UITabl ...
-
js 实现异步上传图片+预览
两种js实现方式,一种用原生的ajax:另一种用JQuery,例子比较简单,直接上代码. <!DOCTYPE html> <html> <head> <tit ...
-
记忆化搜索 P1464 Function
题目描述 对于一个递归函数w(a,b,c) 如果a≤0 or b≤0 or c≤0就返回值1. 如果a>20 or b>20 or c>20就返回w(20,20,20) 如果a< ...
-
CentOS 7.4下使用yum安装MySQL5.7.20 最简单的
CentOS7默认数据库是mariadb, 但是 好多用的都是mysql ,但是CentOS7的yum源中默认好像是没有mysql的. 上一篇安装的是5.6的但是我想安装5.7的 yum安装是最简单 ...