CDN边缘节点
CDN可以将源站上的资源缓存到距离客户端最近的CDN节点上。当用户访问该静态资源时,直接从缓存中获取,避免通过较长的链路回源,提高访问效率。这个过程被称为「CDN加速」。
除了资源加速之外,阿里云的CDN节点还提供了基于Serverless的边缘计算能力,简单来说,就是除了缓存静态文件,CDN还可以作为JavaScript脚本的运行环境。这让Node服务的稳定性还没有达到业务的要求时,前端工程师可以通过在CDN节点上部署JavaScript代码,让CDN节点完成一定的功能。CDN边缘程序、边缘缓存和源站的链路如下图。
对于SSR来说,CDN边缘程序实现的功能非常简单:当获取SSR页面成功时(status 200),将直出的页面返回给用户,否则访问降级页面CSR的地址,保证用户永远能够看到正确的页面。我们将CDN缓存周期设置为5分钟。缓存生效时,用户访问链路为上图紫色部分所示,缓存失效时,为红色链路。
自此,我们就解释了开始时3个问题的前2个:怎么保障Node应用稳定性,以及怎么进行页面降级。
CSR链路
CSR降级链路虽然不经常被用户覆盖到,但对于整个方案来说仍然很重要。用户访问CSR页面时,首先从air源站获取到html页面(此时页面中没有任何首屏内容),然后执行html页面中引入的JS脚本,调用获取首屏数据的mtop接口(阿里弹外异步请求数据获取接口)进行页面渲染。因而对于CSR链路的实现,我们只需要关心两件事情:
静态资源文件需要构建并推送到air。
需要有在Web端可以被调用的Ajax接口(在阿里一般被称为mtop接口)。
对于第一点,我们可以在应用构建和发布的时候,直接将只有layout内容的HTML模板发布。对于第二点,我们可以复用SSR链路时开发的首屏数据接口,直接将其对接集团对外的网关,无需二次开发,如下图所示。
由此可以让整个链路全部由前端同学完成,无需像传统CSR页面开发那样由服务端同学提供mtop接口。
实现SSR链路和CSR链路之后,我们已经满足了3个关键要素中的前2个:
FMP时间缩短:
SSR链路中,用户访问到首屏有效内容的时间为:
•CDN缓存命中时:HTML页面 RT。
•CDN缓存未命中时:Node服务直出页面执行时间 HTML页面RT
CSR链路中,用户访问到首屏内容的时间为:
•HTML页面RT JS文件下载