1、导读
淘宝的图片拜访，有98%的流量都走了CDN缓存，只有2%会回源到源站，节俭了大量的服务器资源。
然而，如果在用户拜访高峰期，图片内容大批量发生变化，大量用户的拜访就会穿透cdn，对源站造成微小的压力。
往年双11，淘宝鹿班的主图价格表白降级我的项目，就面临了这种挑战，让咱们看看是如何解决的吧。
(更多干货请关注【淘系技术】公众号）
2、CDN工作原理
内容散发网络（Content Delivery Network，简称CDN）是建设并笼罩在承载网之上，由散布在不同区域的边缘节点服务器群组成的分布式网络。
CDN利用宽泛，反对多种行业、多种场景内容减速，例如：图片小文件、大文件下载、视音频点播、直播流媒体、全站减速、平安减速。
借用阿里云官网的例子，来简略介绍CDN的工作原理。
假如通过CDN减速的域名为www.a.com，接入CDN网络，开始应用减速服务后，当终端用户（北京）发动HTTP申请时，解决流程如下：
- 当终端用户（北京）向
www.a.com下的指定资源发动申请时，首先向LDNS（本地DNS）发动域名解析申请。 - LDNS查看缓存中是否有
www.a.com的IP地址记录。如果有，则间接返回给终端用户；如果没有，则向受权DNS查问。 - 当受权DNS解析
www.a.com时，返回域名CNAMEwww.a.tbcdn.com对应IP地址。 - 域名解析申请发送至阿里云DNS调度零碎，并为申请调配最佳节点IP地址。
- LDNS获取DNS返回的解析IP地址。
- 用户获取解析IP地址。
- 用户向获取的IP地址发动对该资源的拜访申请。
- 如果该IP地址对应的节点已缓存该资源，则会将数据间接返回给用户，例如，图中步骤7和8，申请完结。
- 如果该IP地址对应的节点未缓存该资源，则节点向源站发动对该资源的申请。获取资源后，联合用户自定义配置的缓存策略，将资源缓存至节点，例如，图中的北京节点，并返回给用户，申请完结。
从这个例子能够理解到：
（1）CDN的减速资源是跟域名绑定的。
（2）通过域名拜访资源，首先是通过DNS分查找离用户最近的CDN节点（边缘服务器）的IP
（3）通过IP拜访理论资源时，如果CDN上并没有缓存资源，则会到源站申请资源，并缓存到CDN节点上，这样，用户下一次拜访时，该CDN节点就会有对应资源的缓存了。
3、淘宝鹿班图片业务背景
商品的主图贯通整个导购和交易链路，相比文字，图片更能吸引眼球，主图对消费者的购物决策有很大的影响。主图上表白的内容各式各样，但其中肯定少不了的肯定是价格的表白。
长期以来，主图上的价格表白都是商家本人保护，商品价格发生变化后，手动去换图。这样做，会带来3个问题：
（1）价格的准确性：商家手动填写的图片价格，跟理论的购买价可能不统一，造成不好的用户体验。
（2）价格更新的及时性：有时候，因为优惠券/品类券的失效生效，会导致商品的价格变动会很频繁，商家基本来不及换图。
（3）商家的操作老本：手动批改图片的价格，老本还是很高的，须要通过ps等软件批改图片，从新上传，编辑商品。
往年双11，咱们淘宝鹿班团队，试图通过技术手段来解决这些问题。当商品价格发生变化后，零碎主动计算新的价格，自动合成图片，而后更新商品主图。
咱们晓得，淘宝网有上亿的商品，光大促商品就有几千万，因而，价格变动导致的图片变动频率十分高。最高的就是在双11的0点，全副大促商品的价格都会由日常价格变成大促价格。
这就意味着，大促高峰期，有上千万的图片刚生成就会被用户拜访。那这个状况会产生什么问题呢，让咱们先理解下淘宝的图片空间和CDN的架构，就分明了。
4、淘宝图片空间和CDN的架构
================
淘宝整个图片的拜访链路有三级缓存（客户端本地、CDN L1、CDN L2），所有图片都长久化的存储到OSS中。真正解决图片的是img-picasso零碎，它的性能比较复杂，包含从OSS读取文件，对图片尺寸进行缩放，编解码，所以机器老本比拟高。
CDN的缓存分成2级，正当的调配L1和L2的比例，一方面，能够通过一致性hash的伎俩，在等同资源的状况下，缓存更多内容，晋升整体缓存命中率；另一方面，能够均衡计算和IO，充分利用不同配置的机器的能力。
用户拜访图片的过程如下：
（1）用户通过手机淘宝来搜寻商品或者查看宝贝详情。
（2）详情/搜寻/举荐通过调用商品核心返回商品的图片URL。
（3）客户端本地如果有该图片的缓存，则间接渲染图片，否则执行下一步。
（4）从CDN L1回源图片，如果L1有该图片的缓存，则客户端渲染图片，同时缓存到本地，如果L1没有缓存，则执行下一步。
（5）从CDN L2回源图片，如果L2有该图片的缓存，则客户端渲染图片，同时CDN L1及客户端缓存图片内容，如果CDN L2没有缓存该图片，则执行下一步。
（6）从图片空间回源图片，图片空间会从OSS拉取图片源文件，按要求进行尺寸缩放，而后执行编解码，返回客户端可能反对的图片内容，之后客户端就能够渲染图片，同时CDN的L1、L2以及客户端都会缓存图片内容。
5、频繁换图带来的技术挑战
当商品的价格发生变化时，咱们会应用新的价格从新合成图片，更新商品核心中存储的图片URL。这样会带来2个问题：
（1）CDN及手机淘宝本来缓存的图片内容生效了，用户拜访图片会全副回源到img-picasso。
（2）因为更改了商品的字段，交易的外围利用（购物车和商品核心）的缓存也生效了，用户浏览及购物时，对商品的拜访会走到db。
源站img-picasso解决图片，以及查问商品DB，都是十分耗费资源的。CDN及商品的缓存命中率升高后，对源站img-picsasso以及db会产生微小的压力。
拿CDN缓存为例，简略计算一下，CDN平时的命中率是98%，假如命中率升高1个点，对源站的压力就会减少1/3（本来承当2%的流量，当初须要承当3%的流量），意味着img-picasso须要扩容1/3。如果全网一半的图片都同时变动，cdn的命中率降到50%，对img-picasso的访问量就会减少25倍，这个扩容老本必定没法承受。
解决这2个问题，对应的有2个方法：
（1）改图放弃图片URL不变，能够防止商品链路的缓存生效。
（2）在拜访顶峰到来之前，提前预热图片到CDN，能够防止CDN缓存生效对源站的压力。
上面，介绍下咱们具体是怎么做到这2点的。
6、频繁换图的应答计划
6.1、改图放弃图片URL不变
图片内容发生变化时，执行上面2个操作：
（1）更新OSS内容：应用新的图片内容替换OSS中老的图片内容
（2）刷新CDN缓存：革除CDN之前缓存的图片内容
这样，用户再次拜访图片时，发现CDN没有缓存，就会回源到img-picasso，从OSS拉取新的图片内容。
因为图片URL没有变动，就不用去更新商品核心的图片链接，这样商品链路的缓存能够放弃不变。
在真正施行这个计划的过程中，遇到了几个问题，简略跟大家分享下：
6.1.1、OSS三地同步
淘宝的图片空间，承载了淘系所有图片的上下行稳定性保障，为了保障高可用，一份资源会存储到三地OSS。图片上传时，默认只上传一地，利用OSS的能力，主动同步到另外两地。
然而应用URL不变计划，CDN缓存曾经革除实现后，如果另外2地的OSS还未同步实现，用户拜访后，就会回源到旧的图片内容，发现图片内容没有变动。
针对该问题，咱们将异步同步OSS软链的模式，改成三地同步建软链，三地都返回胜利后，再去革除CDN缓存，这就保障了用户拜访的图片肯定是最新的内容。
6.1.2、图片尺寸收敛
同一张商品图片会用于不同的场景坑位展示，不同的坑位对图片的尺寸有不同的要求。为此，图片空间提供了一项性能，能够不便的生成不同尺寸的缩率图。只须要拜访图片时，给图片减少不同的后缀，img-picasso源站就能够按要求进行图片进行缩放。
因为历史起因，之前对缩放的尺寸品种没有限度，导致CDN上的图片后缀格局多达2400种+，TOP6格局覆盖率46%，TOP15格局覆盖率64%。这意味着，一张图片，在cdn上最多可能有2400+个不同的url，当图片内容变动后，要把这些缓存全副清掉，能力保障所有用户看到的图片都是新内容。
为了解决这个问题，咱们对域名格局进行了收敛。
图片空间对于图片品质压缩参数的规定如下：
- 图片品质参数常见有一下8种模式：Q90、Q75、Q50、Q30、q90、q75、q50、q30
- 图片锐化参数常见有一下3种模式：s100，s150，s200
咱们从新将图片品质定义为高质量图片和低质量图片，收敛格局为 q90 和 p50s150
这样，就能够把2000多种格局收敛到6种次要格局，CDN革除缓存才变得可行。
6.1.3、多正本革除CDN缓存
通过图片尺寸收敛，每张图片只须要革除6个不同的url就能够了，那能不能进一步晋升刷新效率呢？
为此，阿里云CDN为咱们提供了多正本刷新的解决方案：每种不同后缀的图片，作为图片的一个正本，在CDN的swift层减少一层KV构造，存储url和不同正本的映射关系，革除缓存时，能够通过该构造找到所有正本，实现疾速革除所有正本。这样，每张图片，咱们只须要调用一次CDN革除缓存接口就能够了，极大晋升了CDN缓存刷新效率。
6.1.4、图片域名收敛
淘系的图片域名有300多种，次要有上面2个起因：
（1）图片残缺的链接太长，所以存储时常常只存最初一段，业务本人来拼域名，很多业务就本人申请了一个图片域名来拼。
（2）PC时代，浏览器对同一域名下的并发申请数是有限度的，不同浏览器不一样，个别6个左右。为了冲破该限度，一些业务就会申请多个域名，随机的拼不同的域名。
后面咱们讲过，CDN的缓存是跟域名绑定的，不论是缓存命中还是缓存革除，都只能针对一个域名。
咱们显然不可能改一张图，就去对300个域名调用CDN刷新。于是咱们思考对图片域名进行收敛，使得用户对图片的拜访都路由到同一个域名，咱们心愿将所有的图片拜访对立收敛到picasso.alicdn.com，具体实现形式如下：
（1）对于手淘和猫客客户端，图片拜访都收口在图片库，咱们推动图片库进行革新，合乎肯定规定的url，对立收敛到picasso.alicdn.com，实现了域名的一刀切。
（2）对于PC浏览器端，就比拟麻烦了，没有对立收口的中央。咱们只能退而求其次，针对拜访最多的6大域名，在cdn上配置域名转发规定，重定向到picasso域名。
通过这种形式，咱们实现了全网99%以上的图片拜访流量都路由到picasso域名，图片内容发生变化时，通过革除picasso域名的cdn缓存，就能保障根本所有的场景都能看到新的图片内容。
6.1.5、客户端及浏览器缓存
通过多正本和图片域名收敛，cdn的缓存问题失去了解决。但在cdn之上，用户图片拜访首先是来自客户端或者浏览器，这里也会有一层缓存。
大家晓得，浏览器的缓存都遵循规范的http max-age协定，指定该header后，到了工夫图片就会生效，拜访到新的图片。所以咱们能够在源站img-picasso回源给cdn时，增加max-age协定头，值为1分钟，cdn会一成不变的透给浏览器，这样浏览器就能够实现1分钟内图片缓存生效，从新到cdn拉新的图片资源。
对于手机淘宝客户端，咱们在原有的LRU缓存机制之上，另外反对规范的http协定。这样，手机淘宝也实现了1分钟内图片缓存生效。
6.2、提前预热CDN图片
通过改图放弃图片URL不变，咱们解决了改图对商品链路缓存的影响。然而，图片变动时，尽管URL没有变，但咱们革除了CDN缓存，导致用户拜访时还是会回源到img-picasso源站，所以对图片源站的压力仍然存在。
咱们发现，商品的价格变动大部分产生在大促节奏变动的时刻，基于这个特点，咱们通过提前合成图片，提前预热到CDN，能够实现图片切换霎时失效，同时对源站没有压力。具体计划如下：
（1）提前合成多波段图片：咱们晓得大促期间商家集中换图的工夫点后，按这些工夫点把图片的展现分成多个波段，每个波段图片提前合成，并提前将图片URL写入到商品核心扩大构造中。
（2）图片拜访路由：营销零碎依据配置的大促气氛切换打算，通知鹿班图片二方包，以后是哪个波段，鹿班依据以后波段及场景，返回正确的图片URL给各个场景。
（3）图片渲染：各个场景拿到图片URL后，联合本身的业务逻辑，决定是否要展示该图片。
（4）CDN图片预热：为了防止图片集中切换时，把源站击垮，咱们会在集中切换前把这些冷图片内容预热到CDN。
（5）波段内图片变动：提前合成各个波段图片后，商家可能会长期发券/改价，导致商品价格再次变动，对于这类换图需要，为了防止更新商品核心的图片URL，咱们通过本文上一章节刷CDN缓存的形式实现。
7、总结和瞻望
CDN技术广泛应用于互联网的各个场景，现在的CDN服务商，都提供了非常简单的业务接入形式，而且CDN的费用每年都在升高，这所有使得CDN的接入和应用老本越来越低。
本文通过淘宝图片业务的例子，为大家论述了应用CDN过程中可能遇到的问题和解决思路。
淘宝的图片业务除了访问量大，还会面临更新频繁的问题。图片的频繁更新，一方面会因为商品上的图片url变动，导致商品缓存生效，另一方面会大幅升高CDN的图片拜访缓存命中率。
针对图片url变动导致商品缓存生效的问题，咱们通过刷新cdn缓存，用户拜访时从新回源的形式，实现了改图放弃图片url不变，这个过程中了，咱们解决了一些列的问题，包含：OSS三地同步更新、图片尺寸收敛、图片域名收敛、客户端及浏览器本地缓存。
针对改图升高CDN图片缓存命中率的问题，咱们依据业务的特点，提前合成不同波段的图片，并预热到CDN，保障了源站的平安。
目前，淘宝上用户看到的图片，都是提前合成好的。将来，咱们思考在用户拜访图片时，实时合成图片。通过这项技术，能够实时感知业务更多的实时信息，能够依据这些信息，在图片上合成以后用户或者环境更匹配的文案/元素等内容，给用户带来更多的惊喜。
当然，实时合图也会面临更多的挑战，如：计算能力、合图性能。此外，对于CDN而言，因为每次用户拜访的内容是长期合成的，CDN的缓存策略也是一个很大的挑战。
技术来驱动业务！！！淘宝鹿班团队，长期聚焦在图片及视频畛域，通过技术创新，晋升商家的经营效率及用户的体验，如果你对图片或者视频技术感兴趣，或者心愿接触到高并发的工程零碎，心愿通过code扭转世界，欢送退出咱们！！！ zhaoming.ywt@taobao.com
（更多干货请关注【淘系技术】公众号）
（更多干货请关注【淘系技术】公众号）
（更多干货请关注【淘系技术】公众号）