导读：互联网进入挪动互联网时代后，产品状态有几次大的演进。最后，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/C…)

二、我的项目背景

我的项目来源于百度旗下汽车信息与服务平台：有驾，指标是优化有驾产品全矩阵内 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/produ…) 部署减速：

只能缓存动态文件，无奈缓存接口数据。

• 动态文件在代码上线环节，不仅仅要部署到模板服务器，还须要通过脚本推送到远端的对象存储服务中
• 动态文件间接应用对象存储服务器提供的 CDN 域名拜访（CDN 到对象存储服务器应该也属于回源减速）

集体了解，两种形式的实用场景如下：

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

2）对象存储服务 (https://cloud.baidu.com/produ…) 部署减速：

实践上实用于所有场景，然而须要额定开发上传脚本，并要保障脚本的可靠性和文件的存在性。

四、操作步骤

本次有驾动态文件减速我的项目，抉择了更低成本的 CDN 回源减速的计划，具体操作步骤如下：

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

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

3）将申请的域名的回源地址配置到对应的回源域名，使动态文件拜访时能够主动回源和缓存；

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

5）设置 CDN 缓存工夫，依据本人的需要设置即可，可参考百度智能云 CDN 接入指引 (https://cloud.baidu.com/doc/C…) 中对于缓存设置的介绍；

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/C…)

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 说

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

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

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

欢送各位同学关注