导读：互联网进入移动互联网时代后，产品形态有几次大的演进。最初，H5站点如雨后春笋般的出现，大量H5站点迅速占领PC市场，中期，为了追求极致用户体验，大量原生Android、IOS应用出现，为用户提供更好的需求和体验满足，当前，集体验、研发效率、推广效率于一身的超级APP+小程序的模式，变成了人们更青睐的选择。可以看到，每个时代都有自己的主角，我们很容易将自己的重心放到主角身上，而忽略了配角的作用。
最近在公司项目研发中，发现不管是APP还是小程序中，都有大量能力和需求，是由曾经的主角H5来承接，H5的跨平台、迭代效率高、丰富的技术和人力生态，使它还在持续的发光发热，为互联网做出自己的贡献。但是，在H5项目研发过程中，发现我们明显降低了H5的要求。我们将更多的精力投入到需求满足，交互体验上，却忽略了我们的基本底线，性能。H5的一些基本性能优化方式，如SSR、静态资源加速，在积压的需求面前，也被大家遗忘在角落。希望通过本文的阅读，能给大家提供一个依托百度智能云和CDN技术进行静态文件加速的方案，为H5优化做出一名后端RD的贡献。
CDN的全称是(Content Delivery Network)，即内容分发网络，将源站内容分发至遍布全国的加速节点，缩短用户查看内容的延迟，提高用户访问网站的响应速度与网站的可用性，解决网络带宽小、用户访问量大、网点分布不均等问题。
简单的说，CDN的工作原理就是将您源站的资源缓存到位于全球各地的CDN节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都回您的源站获取，避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验。
CDN主要通过解决以下几个问题来保证资源访问速度和体验：
2、缓解甚至消除了不同运营商之间互联的瓶颈造成的影响
那么，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边缘节点发现缓存数据，响应返回请求返回数据：这里直接将命中缓存的数据返回，避免了回源站点，减少了源站的带宽压力，大大提升了资源加载速度。
Domain Name，由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）。域名是一个IP地址上有“面具” 。一个域名的目的是便于记忆和沟通的一组服务器的地址（网站，电子邮件，FTP等）。
CNAME全称Canonical Name，即别名，可以用来把一个域名解析到另一个域名，当 DNS 系统在查询 CNAME 左面的名称的时候，都会转向 CNAME 右面的名称再进行查询，一直追踪到最后的 PTR 或 A 名称，成功查询后才会做出回应，否则失败。
在百度智能云CDN接入加速域名后，系统给对应域名分配一个”CNAME域名”，用将加速域名在域名服务提供商处完成CNAME配置指向这个CNAME域名。配置生效后，域名解析的工作就正式转向百度智能云，该域名所有的请求都将转向百度智能云CDN的节点。
即：域名解析中的别名记录。用来把一个域名解析到另一个域名，再由另一个域名提供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。
Domain Name System，域名系统，因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。
是百度智能云CDN用于缓存客户源站内容以便快速响应不同地域用户请求的网络节点。边缘节点指网络结构中靠近用户的网络节点，对接入用户有相对于源站而言更好的响应能力和连接速度。CDN边缘节点将访问量较大的内容缓存到边缘节点的服务器上，以此来提高网终端用户访问网站内容的速度和质量。
指用户多次访问某一资源，不同请求中访问到的数据都是相同的内容。例如：html、css 和 js 文件、图片、视频、软件安装包、apk 文件、压缩包文件等。
指用户多次访问某一资源，响应返回的数据是不相同的内容。
例如：API 接口、.jsp、.asp、.php、.perl 和 .cgi 文件等。
即回源域名， CDN节点在回源时，在源站访问的站点域名，详情请参见回源配置。当服务器源站存在多个不同站点时，CDN将根据您的回源HOST域名，决定CDN将从哪一个站点中获取资源。
源站指用户运行业务的网站服务器，是CDN加速分发数据的来源。百度智能云CDN 的源站可以选择自有源站或对象存储（BOS）。
详见：百度智能云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)部署加速：
1）CDN回源加速：适用于部署时可分开部署，先上静态文件，再上模板文件的场景，否则会有线上流量损失。
2）对象存储服务(https://cloud.baidu.com/product/bos.html)部署加速：
理论上适用于所有场景，但是需要额外开发上传脚本，并要保证脚本的可靠性和文件的存在性。
本次有驾静态文件加速项目，选择了更低成本的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的情况，后续这个能力更精细化控制，改到了路由层实现，这个标记可以不用了，但是可以作为一种特殊情况下的解决方案）；
下面是百度智能云CDN操作过程的一些关键步骤，供大家参考（PS：CDN配置，不懂的一定搞清楚再配置，否则就是用默认配置，本文中未提及的部分最好不修改，如有需求详细阅读相关配置文档或者咨询客服，确认后再修改）
(https://cloud.baidu.com/doc/CDN/s/Qjwvyea10)
3）增加http头，这里增加了cdnfrom:xxx，接入层和后端可以通过这个标记识别cdn流量，做相应操作。
4）在访问控制tab下，为baidu.com和yoojia.com域名增加跨域白名单（如果需要线下验证，也可以给线下机器加白名单）
5）修改接入层 redirect逻辑，针对cdn来的流量，不要301跳转
修改静态文件域名，并完成验证，必要时候可以提测进行全功能回归测试。
适用于部署时可分开部署，先上静态文件，再上模板文件的场景，否则会有线上流量损失
针对静态文件，要尊重文件的客观存在性，不存在的文件，http code一定返回404，不能做兜底逻辑，路由到其他非404的页面（比如统一定位到一个404错误页面，但是http code是200）
不能对静态文件有任何形式的适配跳转，否则可能会导致CDN缓存错误的数据
PS：一句话概括，就是一定要保证CDN缓存的数据是正确的数据，如果有可能缓存到错误的数据，那就不应该采用方案一，或者应该修改后端保证CDN缓存的正确性（本文中就做了大量的工作来解决这一问题）
PS：CDN开启gzip压缩，静态文件大小下降60%左右。
---------- END ----------
技术干货 · 行业资讯 · 线上沙龙 · 行业大会
招聘信息 · 内推信息 · 技术书籍 · 百度周边
