介绍：互联网进入移动互联网时代后，产品形态经历了几次重大演进。最初，H5网站如雨后春笋般涌现，大量的H5网站迅速占领了PC市场。中期，为了追求极致的用户体验，大量原生安卓和IOS应用出现，为用户提供更好的需求和体验满足。目前，整合体验，研发效率与推广效率相结合的超级APP+小程序的模式成为了人们更青睐的选择。可见每个时代都有自己的主角，我们很容易把注意力放在主角身上而忽略了配角的作用。最近在公司项目的研发中，发现无论是APP还是小程序，都有很多的能力和需求，都是由原主人公H5承担的。H5的跨平台、迭代效率高、丰富的技术和人文生态，让它还在持续发光发热，为互联网做出自己的贡献。但是在H5项目的研发过程中，我们发现我们对H5的要求明显降低了。我们把更多的精力放在了需求满足和交互体验上，却忽略了我们最基本的底线，性能。H5的一些基本的性能优化手段，比如SSR、静态资源加速等，面对积压的需求也被遗忘在了角落。希望通过阅读本文，能够为大家提供一个依托百度智能云和CDN技术加速静态文件的解决方案，为后端RD的H5优化贡献一份力量。全文6160字，预计阅读时间18分钟。1.CDN1.1简介。什么是CDN？CDN的全称是（ContentDeliveryNetwork），即内容分发网络。延迟，提高用户访问网站的响应速度和网站的可用性，解决网络带宽小、用户访问量大、网点分布不均等问题。简单来说，CDN的工作原理就是把你源站的资源缓存在遍布全球的CDN节点上。当用户请求资源时，将返回缓存在最近节点上的资源，而不是每个用户的请求。从源站获取，避免网络拥堵，缓解源站压力，保证用户访问资源的速度和体验。1.2.CDN工作原理CDN主要解决以下问题，保证资源访问速度和体验：1、解决服务器端“第一公里”问题2、缓解甚至消除不同运营商之间互联瓶颈带来的影响3、缓解各省出口带宽压力4.缓解骨干网压力5.优化互联网热点内容分发那么，CDN是如何解决上述问题的呢？下面简单介绍一下CDN加速原理：如上图所示，CDN加速的详细步骤如下：1、网站用户请求LocalDNS查询my.com的地址；2、本地DNS请求权威DNS；3、权威DNS返回配置的CNAME：my.com.a.bdydns.com；4、本地DNS请求my.com.a.bdydns.com对应的IP；5、百度智能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.第五步智能调度：通过CNAME域名访问百度DNS，并根据用户网络和地域解析最优接入IP节点。并将其缓存在LocalDNS中，减少用户访问后续IP的时间。因为不是所有的客户都能做到多地域多网络访问，使用CDN可以屏蔽这些多地域多网络的部署细节，消除不同运营商、不同地域的网络瓶颈，让客户的静态资源即使是仅部署在华北联通机房，全国各网用户同样可以享受到接入速度差别不大；2.Step11边缘节点找到缓存数据响应返回请求返回数据：这里直接返回命中缓存的数据，避免返回源站点，减轻源站点的带宽压力，大大提高了资源加载速度。1.3.名词解释域名，互联网上一台计算机或计算机组的名称，由一串以点分隔的名称组成，用于在数据传输过程中识别计算机的电子位置（有时也指地理位置、地理域名称，指具有行政自治权的地方）。域名是IP地址之上的“掩码”。域名的作用是方便一组服务器地址（网站、邮箱、FTP等）的记忆和交流。CNAMECNAME的全称是CanonicalName，即别名，可以用来将一个域名解析为另一个域名。当DNS系统查询CNAME左边的名字时，会转向CNAME右边的名字再进行查询，一直到最后的PTR或者AName，之后才会响应查询成功，否则查询失败。CNAME域名接入百度智能云CDN中的加速域名后，系统会为对应的域名分配一个“CNAME域名”，然后在域名服务处完成加速域名的CNAME配置provider指向此CNAME域名。配置生效后，域名解析工作将正式转移到百度智能云，所有对域名的请求都会转移到百度智能云CDN的节点。CNAME记录是：域名解析中的别名记录。用于将一个域名解析为另一个域名，然后由另一个域名提供IP地址。CNAME记录允许您将多个名称映射到同一服务器。例如，您有一个名为“host.mydomain.com”（A记录）的服务器，您希望用它同时提供WWW和MAIL服务。然后你可以在你的DNS解析服务商中为这台服务器设置两个别名（CNAME）：WWW和MAIL，将这两个别名的全名指向“www.mydomain.com”和“mail.mydomain.com”“host.我的域名.com”。??添加这个CNAME后，所有访问这两个CNAME的请求都会被转发到host.mydomain.com。DNSDomainNameSystem，域名系统，是互联网上的一个分布式数据库，将域名和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...)2、项目背景矩阵中H5产品的加载速度给用户更好的浏览体验。友家H5服务于友家M站（https://m.yoojia.com）、友家运营活动、友家APP、友家小程序中的H5产品，应用广泛。游家成立以来，一直处于业务快速发展阶段，在短时间内完成了小程序、APP、M站、PC站全矩阵产品的研发。前期为了业务逻辑复用、敏捷开发、快速上线，后端代码和前端业务没有很好的隔离，接口逻辑、模板逻辑、静态文件部署在同一台机器上。20年中间，随着业务越来越复杂，我们逐步优化和升级了后端系统架构，利用BFF、微服务、DDD的思想，实现了后台更加合理的分层-端大单应用。目前我们已经将整个架构拆解为接入层、BFF层、微服务层、基础设施层。在完成业务抽象的同时，也很好的完成了前后端隔离。将整个架构合理划分之后，我们可以在性能方面更好的分工。FE同学负责显示层面的性能优化，RD同学负责界面性能优化。分工明确，效果显着。但是在整理静态文件的优化方案时，发现分工不是很明确，不知道该由谁来负责。笔者作为项目负责人，利用业余时间在FE的配合下完成了静态文件的CDN加速工作。好处是显而易见的，但是在这个过程中他遇到了一些问题。希望记录下来，分享给有需要的同学，帮助大家成为全栈工程师，越来越好。三、问题分析代驾业务严重依赖H5能力，H5的极速体验逐渐成为影响用户体验的核心问题。静态文件主要包括css、js、fonts等，每次页面加载都会请求大量的静态文件，所以在我们使用了一些技术手段优化渲染能力后，静态文件的加载就成为了我们一个可能的优化点.静态文件的CDN加速是业界比较简单粗暴的优化方式。因此希望对静态文件进行CDN加速，利用CDN能力提升静态文件的访问速度，同时在CDN上对数据进行gzip压缩，进一步提升加载速度。.作为后端同学，笔者了解到静态文件CDN加速有两种方式：1）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流量进行重定向（主要是为了简单起步阶段，整个站点的一次301跳转是在接入层做的，适应PC接入M站，M站接入PC的情况，后来这个能力更细粒度，改到路由层，这个标记可以使用过，但它可以作为特殊情况下的解决方案）；8)全站仪功能回归验证。5.详细操作以下是百度智能云CDN操作过程中的一些关键步骤，供大家参考（PS：CDN配置，不懂的一定要弄明白再配置，否则使用默认配置，本文未提及的部分最好不要修改，如有需要请详细阅读相关配置文档或咨询客服，确认后再修改）5.1、域名申请可以通过以下方式申请域名自己5.2、CNAME域名绑定参考百度智能云CDN访问域名：(https://cloud.baidu.com/doc/C...)5.3、CDN域名配置1)配置回源address，如下图所示：2）设置自己的缓存有效时间3）添加http头，这里添加cdnfrom:xxx，接入层和后端可以通过这个标记来识别CDN流量并采取相应的动作。4）在访问控制选项卡下，为baidu.com和yoojia.com域名添加跨域白名单（如果需要离线验证，也可以在离线机器上添加白名单）5）修改访问层重定向cdn的逻辑对于传入流量，不要重定向301。5.4。离线&在线验证修改静态文件的域名，完成验证。如有必要，您可以执行全功能回归测试。六、注意事项本节非常重要，请务必仔细阅读。1）CDN回源加速：适用于部署时可以单独部署的场景，先上传静态文件，再上传模板文件，否则静态文件会有在线流量损失，必须尊重客观存在的文件。对于不存在的文件，http码必须返回404，不能使用底线逻辑路由到其他非404页面（比如统一定位一个404错误页面，但是http码是200）。静态文件有任何形式的适配跳转，否则可能导致CDN缓存错误的数据PS：一句话，要保证CDN缓存的数据是正确的数据。如果有可能缓存错误的数据，那么就不要使用方案一，或者修改后端来保证CDN缓存的正确性（为了解决这个问题本文做了很多工作）2）静态文件直接部署CDN加速：在模板上传前，对应的静态文件已经成功推送到远程对象存储服务器。收益总结推荐阅读：｜百度搜索海量数据管理的云原生与智能化实践｜如何依靠AI解决百度搜索“鱼龙混杂”的加盟信息？｜快剪辑-助力杜卡智能剪辑提升效率实践------------END------------百度极客说百度官方技术公众号上线啦！技术干货·行业资讯·在线沙龙·行业会议招聘信息·介绍资料·技术书籍·百度周边欢迎各位同学关注
