导读:互联网进入移动互联网时代后，产品形态经历了几次大的演变。最初，H5网站如雨后春笋般涌现，大量H5网站迅速占领了PC市场。中期，为了追求极致的用户体验，大量原生Android和IOS应用出现，为用户提供更好的需求和体验满足。目前，集体验、研发效率、推广效率于一体的超级APP+小程序的模式，已经成为人们比较青睐的选择。可见，每个时代都有自己的主角，我们很容易把注意力放在主角身上，而忽略了配角的作用。
最近在公司的项目研发中发现，无论是app还是小程序，都有大量的能力和需求，由曾经的主角H5承担。H5的跨平台、高迭代效率以及丰富的技术和人文生态，让它继续发光发热，为互联网做出自己的贡献。但是，在H5项目的研发过程中，发现我们明显降低了对H5的要求。我们把更多的精力放在需求满足和交互体验上，却忽略了我们最基本的底线，性能。H5的一些基本性能优化方法，如SSR、静态资源加速等，都被遗忘在需求积压前的角落。希望通过阅读这篇文章，为大家提供一个基于智能云和CDN技术的静态文件加速方案，作为后端RD为H5优化做一份贡献。全文6160字，预计阅读时间18分钟。一、CDN简介1.1.什么是CDN？CDN的全称是内容分发网络，将源站的内容分发到全国各地的加速节点，缩短用户观看内容的延迟，提高用户访问网站的响应速度和网站的可用性，解决网络带宽小、用户访问量大、网点分布不均匀的问题。简单来说，CDN的工作原理就是把你源站的资源缓存到遍布全球的CDN节点上。当用户请求资源时，会将缓存在附近节点上的资源返回，而不是需要每个用户的请求都回到你的源站去获取，这样避免了网络拥塞，缓解了源站的压力，保证了用户访问资源的速度和体验。1.2、CDN工作原理CDN主要通过解决以下问题来保证资源的访问速度和体验:1.解决服务器端的“第一公里”问题。2.缓解甚至消除不同运营商之间互联互通瓶颈带来的影响。3.减轻各省出口带宽压力。4.缓解骨干网压力。5.优化互联网上热点内容的分发。那么，CDN是如何解决上述问题的呢？下面简单介绍一下CDN的加速原理:如上图所示，CDN加速的详细步骤如下:1.网站用户请求本地DNS查询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.步骤11:边缘节点找到缓存的数据，响应返回请求返回数据:这里直接返回命中缓存的数据，避免了返回源站，减轻了源站的带宽压力，大大提高了资源加载速度。1.3、名词解释域名域名，互联网上的计算机或计算机组的名称，由一系列用点分隔的名称组成，用于在数据传输过程中识别计算机的电子位置。域名是带有“掩码”的IP地址。域名的目的是记住并传达一组服务器的地址。CNAMECNAME的全称是Cano
nical Name，可以用来将一个域名解析成另一个域名。当DNS系统查询CNAME左边的名字时，会转到CNAME右边的名字再查询。会追踪到最后一个PTR或者一个名字，只有查询成功后才会响应，否则会失败。CNAME域名智能云CDN接入加速域名后，系统给对应的域名分配一个“CNAME域名”，在域名服务商处用加速域名完成的CNAME配置指向这个CNAME域名。配置生效后，域名解析将正式转移到智能云，该域名的所有请求将转移到智能云CDN的节点。CNAME记录即域名解析中的别名记录。用于将一个域名解析为另一个域名，然后由另一个域名提供IP地址。CNAME记录允许您将多个名称映射到同一个服务器。例如，您有一个名为“host.mydomain.com”的服务器，您想用它来提供WWW和邮件服务。然后你可以在你的DNS解析服务提供商中为这个服务器设置两个别名:WWW和MAIL，并将这两个别名的全名“www.mydomain.com”和“mail.mydomain.com”指向“host.mydomain.com”。添加此CNAME后，所有访问这两个cname的请求都将被转发到host.mydomain.com。域名服务器(Domain Name Server)域名系统，域名系统，是互联网上的分布式数据库，将域名和IP地址相互映射。它可以让用户更容易地访问互联网，而不必记住机器可以直接读取的IP字符串。通过主机名获取主机名对应的IP地址的过程称为域名解析。边缘节点它是智能云CDN用来缓存客户源站内容的网络节点，以便快速响应不同地域用户的请求。边缘节点(Edge node)是指网络结构中距离用户较近的网络节点，与源站相比，对接入用户具有更好的响应能力和连接速度。CDN边缘节点将访问量大的内容缓存到边缘节点的服务器上，以提高网络终端用户访问网站内容的速度和质量。静态内容一个用户多次访问一个资源，不同请求中访问的数据都是相同的内容。例如:html、css和js文件、图片、视频、软件安装包、apk文件、压缩包文件等。动态内容用户多次访问一个资源，返回的响应数据是不同的。例如:API接口，。jsp，。asp，。php，。perl和。cgi文件等。返回源主机即回源域名，即CDN节点在源站回源时访问的站点域名。有关详细信息，请参考背对源配置。当服务器源站有很多不同站点时，CDN会根据你的回源主机域名来决定CDN从哪个站点获取资源。源站源是指用户运行业务的网站服务器，是CDN加速分发数据的来源。智能云中CDN的源站可以选择自己的源站或者对象存储。注:以上内容摘自智能云CDN产品介绍。详见智能云中的CDN。二。项目背景该项目来源于其汽车信息与服务平台:DriveCar，目标是优化H5产品在DriveCar产品整个矩阵中的加载速度，给用户更好的浏览体验。开车小程序中有开车H5服务、开车M站、开车运营活动、开车app、H5产品，应用广泛。优加自成立以来，一直处于业务快速发展阶段。短时间内完成了小程序、APP、M站、PC站的全矩阵产品研发。为了复用最初的业务逻辑，快速开发，快速上线，后端代码没有很好的和前端隔离，接口逻辑和模板逻辑、静态文件部署在同一台机器上。20世纪中期，随着业务越来越复杂，我们逐渐对后端架构进行优化升级，利用BFF、微服务和DDD的思想，对后端的macro单体应用进行更合理的分层。目前我们将整个架构分解为接入层、BFF层、微服务层、基础设施层，完成业务抽象，同时很好的隔离了前后台。整个架构合理划分后，可以在性能方向进行更好的分工。学生FE负责显示层面的性能优化，学生RD负责界面性能优化。本来分工明确，效果显著。但是在整理静态文件的优化方案时，发现分工不是很明确，不知道该由谁负责。作为项目负责人，我利用空业余时间，在FE的配合下完成了静态文件的CDN加速。好处显而易见，过程中也遇到了一些问题。希望记录下来，分享给有需要的同学，帮助大家在成为全栈工程师的路上越走越好。
第三，问题分析驾驶服务严重依赖H5能力，H5的速度体验逐渐成为影响用户体验的核心问题。静态文件主要包括css、js、字体等。每个页面都加载了大量的静态文件，所以在我们使用了一些技术手段优化渲染能力之后，静态文件的加载就成为了我们可能的优化点。静态文件上的CDN加速是业内相对简单和广泛的优化方法。所以希望在静态文件上进行CDN加速，可以利用CDN的能力提高静态文件的访问速度，对CDN中的数据进行gzip压缩，可以进一步提高加载速度。作为作者的后端同学，我了解到有两种方法可以加速静态文件的CDN:1)CDN回源加速:静态文件和接口文件都可以缓存。用户静态文件的域名改为CDN域名，请求静态文件时会请求到CDN节点。
CDN节点检查它自己的节点是否具有内容的缓存。
如果CDN节点有该内容的缓存，且未过期，则直接返回给用户，结束。
如果CDN节点没有内容的缓存或缓存过期，它会请求源的源站地址来提取内容。如果返回的http状态码符合协议，CDN缓存内容，否则不缓存。
不管返回请求的结果是什么，返回结果都会返回给用户，结束。
2)加速对象存储服务的部署:
只能缓存静态文件，不能缓存接口数据。静态文件不仅被部署到模板服务器，还通过代码在线过程中的脚本被推送到远程对象存储服务。
静态文件通过对象存储服务器提供的CDN域名直接访问。
个人理解，两种方式的适用场景如下:
1)CDN回源加速:适用于可以单独进行部署的场景，先加载静态文件，再加载模板文件，否则会丢失在线流量。2)加速对象存储服务的部署:理论上适用于所有场景，但需要开发额外的上传脚本，并保证脚本的可靠性和文件的存在。四。操作步骤在这个静态文件加速项目中，选择了一个成本较低的CDN回源加速方案，具体操作步骤如下:1)自行申请CDN域名进行加速；2)将addon域申请到公有云提供的CNAME域名，请参考智能云CDN接入指南；3)将申请域名的返回源地址配置为对应的返回源域名，使得静态文件在访问时可以自动返回并缓存；4)FE需要用模板中新申请的域名替换所有静态文件域名；5)设置CDN缓存时间，根据自己的需求设置即可。请参考《智能云CDN接入指南》中关于缓存设置的介绍；6)需要设置CDN域名跨域白名单，允许域名跨域。比如我们需要访问yoojia.com域和Baidu.com域的CDN域名，就需要设置http://yoojia.com、https://yoojia.com、http://baidu.com、https://baidu.com的域名可以跨域访问；7)对于CDN流量，需要添加源标识，辅助接入层完成流量识别功能，不重定向；CDN流量；8)全站功能回归验证。动词 （verb的缩写）操作的详细说明以下是智能云CDN运营的几个关键步骤，供大家参考。5.1.域名申请可以自己申请域名。5.2.CNAME阿登域参考智能云CDN接入域名:5.3.CDN域名配置1)配置回源地址，如下图所示:2)设置自己的缓存有效时间。3)添加http头。这里添加了cdnfrom:xxx。接入层和后端可以通过这个标签识别cdn流量，并做相应的操作。4)在“访问控制”选项卡下，添加Baidu.com和yoojia.com域名的跨域白名单。5)修改接入层的重定向逻辑，对于来自cdn的流量不要跳301。5.4、离线和在线验证修改静态文件域名，完成验证，必要时进行全功能回归测试。不及物动词预防措施这一部分非常重要。你必须仔细阅读它。1)CDN回源加速:适用于静态文件可以单独部署，然后再上传模板文件的场景，否则会丢失在线流量。
对于静态文件，要尊重文件的客观存在。对于不存在的文件，http代码必须返回404，不能做底层逻辑，路由到其他不是404的页面。
对于静态文件不能有任何形式的适配跳转，否则可能导致CDN缓存错误数据。
PS:总之，一定要保证CDN缓存的数据是正确的。如果有可能缓存错误的数据，那么就不要采用第一种方案，或者修改后端，保证CDN缓存的正确性。
2)针对静态文件的CDN加速的直接部署:在上传模板之前，请确保相应的静态文件已被成功推送到远程对象存储服务器。
七。收入汇总
PS: CDN开启了gzip压缩，静态文件大小下降了60%左右。
-结束-
极客说
官方技术微信官方账号上线！
技术干货，行业资讯，在线沙龙，行业会议
招聘信息、推送信息、技术书籍及周边
欢迎关注。
