共计 5940 个字符，预计需要花费 15 分钟才能阅读完成。
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
（更多干货请关注【淘系技术】公众号）
（更多干货请关注【淘系技术】公众号）
（更多干货请关注【淘系技术】公众号）
