导读：互联网进入移动互联网时代后，产品形态有几次大的演进。最初，H5站点如雨后春笋般的出现，大量H5站点迅速占领PC市场，中期，为了追求极致用户体验，大量原生Android、IOS应用出现，为用户提供更好的需求和体验满足，当前，集体验、研发效率、推广效率于一身的超级APP+小程序的模式，变成了人们更青睐的选择。可以看到，每个时代都有自己的主角，我们很容易将自己的重心放到主角身上，而忽略了配角的作用。

最近在公司项目研发中，发现不管是APP还是小程序中，都有大量能力和需求，是由曾经的主角H5来承接，H5的跨平台、迭代效率高、丰富的技术和人力生态，使它还在持续的发光发热，为互联网做出自己的贡献。但是，在H5项目研发过程中，发现我们明显降低了H5的要求。我们将更多的精力投入到需求满足，交互体验上，却忽略了我们的基本底线，性能。H5的一些基本性能优化方式，如SSR、静态资源加速，在积压的需求面前，也被大家遗忘在角落。希望通过本文的阅读，能给大家提供一个依托百度智能云和CDN技术进行静态文件加速的方案，为H5优化做出一名后端RD的贡献。

全文6160字，预计阅读时间18分钟

一、CDN简介

1.1、CDN是什么

CDN的全称是(Content Delivery Network)，即内容分发网络，将源站内容分发至遍布全国的加速节点，缩短用户查看内容的延迟，提高用户访问网站的响应速度与网站的可用性，解决网络带宽小、用户访问量大、网点分布不均等问题。

简单的说，CDN的工作原理就是将您源站的资源缓存到位于全球各地的CDN节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都回您的源站获取，避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验。

1.2、CDN工作原理

CDN主要通过解决以下几个问题来保证资源访问速度和体验：

1、解决服务器端的“第一公里”问题

2、缓解甚至消除了不同运营商之间互联的瓶颈造成的影响

3、减轻了各省的出口带宽压力

4、缓解了骨干网的压力

5、优化了网上热点内容的分布

那么，CDN是如何工作来解决上述问题的呢？下面简单介绍一下CDN的加速原理：

如上图所示，CDN加速详细步骤如下：

1、网站用户请求Local DNS查询 my.com 的地址；
2、Local DNS请求权威DNS；
3、权威DNS返回配置的CNAME:

my.com.a.bdydns.com；
4、Local DNS请求 my.com.a.bdydns.com 对应的IP；
5、Baidu 智能DNS根据智能调度返回离用户最近的接入点IP；
6、LocalDNS返回 my.com 的IP地址并缓存到浏览器；
7、用户向CDN节点发起HTTP/HTTPS请求，访问 my.com 的内容；
8、CDN 通过百度智能云加速链路，将请求转发至多线中心节点；
9、中心节点向源站发起回源请求；
10、源站向中心节点返回响应；
11、中心节点、边缘节点将响应返回用户，并缓存响应内容。

以上是用户首次访问资源的详细步骤，如果之前已经有其他用户访问过相同的资源，则这个详细步骤会简化为：

1、网站用户查询 my.com 的地址；
6、LocalDNS返回已缓存的 my.com 的IP地址；
7、向CDN节点发起HTTP/HTTPS请求，访问 my.com 的内容；
11、边缘节点发现缓存数据，响应返回请求返回数据；

通过对比分析可以发现，CDN主要针对已访问过的数据或者静态文件进行加速，可加速的原因主要在以下两个关键节点：

1、步骤5智能调度：会通过CNAME域名，访问百度DNS，根据用户网络和地域解析到最优的接入IP节点，并缓存到LocalDNS中，减少用户后续IP接入的时间。因为不是所有的客户都可能做到多地域多网络接入，使用CDN可以屏蔽这些多地域多网络部署细节，消除不同运营商、不同地域的网络瓶颈，使客户的静态资源即使只部署在北方联通机房，全国各地各网络的用户也都可以享受到差距不大的访问速度；
2、步骤11边缘节点发现缓存数据，响应返回请求返回数据：这里直接将命中缓存的数据返回，避免了回源站点，减少了源站的带宽压力，大大提升了资源加载速度。

1.3、名词解释

域名

Domain Name，由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）。域名是一个IP地址上有“面具” 。一个域名的目的是便于记忆和沟通的一组服务器的地址（网站，电子邮件，FTP等）。

CNAME

CNAME全称Canonical Name，即别名，可以用来把一个域名解析到另一个域名，当 DNS 系统在查询 CNAME 左面的名称的时候，都会转向 CNAME 右面的名称再进行查询，一直追踪到最后的 PTR 或 A 名称，成功查询后才会做出回应，否则失败。

CNAME域名

在百度智能云CDN接入加速域名后，系统给对应域名分配一个”CNAME域名”，用将加速域名在域名服务提供商处完成CNAME配置指向这个CNAME域名。配置生效后，域名解析的工作就正式转向百度智能云，该域名所有的请求都将转向百度智能云CDN的节点。

CNAME记录

即：域名解析中的别名记录。用来把一个域名解析到另一个域名，再由另一个域名提供IP地址。CNAME记录允许您将多个名字映射到同一台服务器。例如，您有一台服务器名为“host.mydomain.com”（A记录），您希望用它同时提供WWW和MAIL服务。那么您可以在您的DNS解析服务商为该服务器设置两个别名（CNAME）：WWW和MAIL，将这两个别名的全称‍‍“www.mydomain.com”和“mail.mydomain.com”都指向“host.mydomain.com”。‍‍添加该 CNAME 后，所有访问这两个 CNAME 的请求都会被转到host.mydomain.com。

DNS

Domain Name System，域名系统，因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。

边缘节点

是百度智能云CDN用于缓存客户源站内容以便快速响应不同地域用户请求的网络节点。边缘节点指网络结构中靠近用户的网络节点，对接入用户有相对于源站而言更好的响应能力和连接速度。CDN边缘节点将访问量较大的内容缓存到边缘节点的服务器上，以此来提高网终端用户访问网站内容的速度和质量。

静态内容

指用户多次访问某一资源，不同请求中访问到的数据都是相同的内容。例如：html、css 和 js 文件、图片、视频、软件安装包、apk 文件、压缩包文件等。

动态内容

指用户多次访问某一资源，响应返回的数据是不相同的内容。

例如：API 接口、.jsp、.asp、.php、.perl 和 .cgi 文件等。

回源 HOST

即回源域名， CDN节点在回源时，在源站访问的站点域名，详情请参见回源配置。当服务器源站存在多个不同站点时，CDN将根据您的回源HOST域名，决定CDN将从哪一个站点中获取资源。

源站

源站指用户运行业务的网站服务器，是CDN加速分发数据的来源。百度智能云CDN 的源站可以选择自有源站或对象存储（BOS）。

注：以上内容部分摘抄自百度智能云CDN产品介绍。

详见：百度智能云CDN(https://cloud.baidu.com/doc/CDN/s/Zjwvydyev)

二、项目背景

项目来源于百度旗下汽车信息与服务平台：有驾，目标是优化有驾产品全矩阵内H5产品加载速度，给用户更好的浏览体验。

有驾H5服务于有驾M站(https://m.yoojia.com)， 有驾运营活动，有驾APP和有驾小程序内的H5产品，应用非常广泛。自从有驾成立以来，一直处于业务高速发展阶段，短时间内完成了小程序、APP、M站、PC站全矩阵产品的研发上线。初期为了业务逻辑复用、敏捷开发和快速上线，后端代码和前端没有做很好的业务隔离，接口逻辑与模板逻辑、静态文件同机部署。20年年中，随着业务越来越复杂，我们逐渐对后端体系架构进行了优化升级，使用BFF、微服务、DDD的思想，对后端大单体应用进行更合理的分层。目前我们将整个架构拆解为接入层、BFF层、微服务层和基础设施层，完成业务抽象的同时，很好的完成了前后端的隔离。

在对整个架构进行合理划分后，在性能方向，可以更好的进行分工，FE同学负责展示层面的性能优化，RD同学负责接口性能优化，本来分工明确，且效果显著。但是，在整理静态文件的优化方案时，发现分工不是很明确，不知道应该谁来负责。笔者作为项目负责人，利用空余时间，在FE配合下完成了静态文件的CDN加速工作，收益明显，过程中遇到一些问题，希望记录下来，分享给有需求的同学，助力大家在成为全栈工程师的路上越走越好。

三、问题分析

有驾业务大量依赖H5能力，H5的速度体验逐渐成为影响用户体验的一大核心问题。静态文件主要包括css、js、字体等，每个页面加载都会请求大量的静态文件，所以在我们已经使用了一些技术手段去优化渲染能力后，静态文件的加载成了我们的一个可能的优化点。静态文件上CDN加速，是一个业界比较简单和广泛的优化手段，因此，希望对静态文件进行CDN加速，利用CDN能力，提升静态文件访问速度，同时在CDN进行数据的gzip压缩，进一步提升加载速度。

笔者作为后端同学，了解到的静态文件CDN加速方式有两种：

1）CDN回源加速：静态文件和接口文件都可以进行缓存。

• 用户静态文件的域名改为CDN域名，请求静态文件时会请求到CDN节点

• CDN节点查看自身节点有没有该内容的缓存（可以是uri粒度，也可以是url粒度，理论上接口数据也可以被缓存）

• 如果CDN节点有该内容的缓存且没有过期，则直接返回给用户，结束

• 如果CDN节点没有该内容的缓存或者缓存过期，则请求回源的源站地址拉取内容，如果返回的http状态码符合约定（可以是只缓存200，也可以指定301，302也缓存），则CDN将内容进行缓存，否则不缓存

• 不论回源请求结果如何，都会将回源结果返回给用户，结束（这里区别只是回源后何时对数据进行缓存）

2）对象存储服务(https://cloud.baidu.com/product/bos.html)部署加速：

只能缓存静态文件，无法缓存接口数据。

• 静态文件在代码上线环节，不仅仅要部署到模板服务器，还需要通过脚本推送到远端的对象存储服务中

• 静态文件直接使用对象存储服务器提供的CDN域名访问（CDN到对象存储服务器应该也属于回源加速）

个人理解，两种方式的适用场景如下：

1）CDN回源加速：适用于部署时可分开部署，先上静态文件，再上模板文件的场景，否则会有线上流量损失。

2）对象存储服务(https://cloud.baidu.com/product/bos.html)部署加速：

理论上适用于所有场景，但是需要额外开发上传脚本，并要保证脚本的可靠性和文件的存在性。

四、操作步骤

本次有驾静态文件加速项目，选择了更低成本的CDN回源加速的方案，具体操作步骤如下：

1）自行申请用于加速的CDN域名；

2）将申请的域名绑定到百度公有云提供的CNAME域名上，可参考百度智能云CDN接入指引(https://cloud.baidu.com/doc/CDN/s/Jjwvyetym)；

3）将申请的域名的回源地址配置到对应的回源域名，使静态文件访问时可以自动回源和缓存；

4）FE需要在模板中，将所有静态文件域名替换成新申请的域名；

5）设置CDN缓存时间，根据自己的需求设置即可，可参考百度智能云CDN接入指引(https://cloud.baidu.com/doc/CDN/s/Jjwvyetym)中关于缓存设置的介绍；

6）需要设置CDN域名的跨域白名单，允许域名跨域，比如有驾，我们需要在yoojia.com域和baidu.com域访问CDN域名，则需要把http://yoojia.com, https://yoojia.com, http://baidu.com, https://baidu.com 域名设置为可跨域访问；

7）针对CDN流量，需要加一个来源标记，辅助接入层完成流量识别功能，针对CDN流量不进行redirect（主要原因是为了简单起见，初期在接入层做了整站的301跳转适配PC访问M站，M站访问PC的情况，后续这个能力更精细化控制，改到了路由层实现，这个标记可以不用了，但是可以作为一种特殊情况下的解决方案）；

8）全站功能回归验证。

五、操作详解

下面是百度智能云CDN操作过程的一些关键步骤，供大家参考（PS：CDN配置，不懂的一定搞清楚再配置，否则就是用默认配置，本文中未提及的部分最好不修改，如有需求详细阅读相关配置文档或者咨询客服，确认后再修改）

5.1、域名申请

自行申请域名即可

5.2、CNAME域名绑定

参考百度智能云CDN接入域名：

(https://cloud.baidu.com/doc/CDN/s/Qjwvyea10)

5.3、CDN域名配置

1）配置回源地址，如下图：

2）设置自己的缓存生效时间

3）增加http头，这里增加了cdnfrom:xxx，接入层和后端可以通过这个标记识别cdn流量，做相应操作。

4）在访问控制tab下，为baidu.com和yoojia.com域名增加跨域白名单（如果需要线下验证，也可以给线下机器加白名单）

5）修改接入层 redirect逻辑，针对cdn来的流量，不要301跳转

5.4、线下&线上验证

修改静态文件域名，并完成验证，必要时候可以提测进行全功能回归测试。

六、注意事项

本节很重要，一定要认真读一下

1）CDN回源加速：

• 适用于部署时可分开部署，先上静态文件，再上模板文件的场景，否则会有线上流量损失

• 针对静态文件，要尊重文件的客观存在性，不存在的文件，http code一定返回404，不能做兜底逻辑，路由到其他非404的页面（比如统一定位到一个404错误页面，但是http code是200）

• 不能对静态文件有任何形式的适配跳转，否则可能会导致CDN缓存错误的数据

PS：一句话概括，就是一定要保证CDN缓存的数据是正确的数据，如果有可能缓存到错误的数据，那就不应该采用方案一，或者应该修改后端保证CDN缓存的正确性（本文中就做了大量的工作来解决这一问题）

2）静态文件直接部署CDN加速：

• 一定要保证在上模板前，对应的静态文件已经成功推送到远端的对象存储服务器

七、收益总结

推荐阅读：

｜百度搜索中台海量数据管理的云原生和智能化实践

｜百度搜索中“鱼龙混杂”的加盟信息，如何靠AI 解决？

｜快速剪辑-助力度咔智能剪辑提效实践

---------- END ----------

百度 Geek 说

百度官方技术公众号上线啦！

技术干货 · 行业资讯 · 线上沙龙 · 行业大会

招聘信息 · 内推信息 · 技术书籍 · 百度周边

欢迎各位同学关注