关于边缘计算:当前端渲染遇上边缘计算

前端渲染形式随着前端技术的演进而一直变革，边缘计算的呈现使前端渲染从 SSR（Node）时代开始迈入边缘渲染（ESR）时代。本文次要介绍前端渲染的倒退演进，以及边缘渲染的原理、劣势及利用场景。次要内容如下：

1. 前端渲染的倒退
2. 边缘渲染的原理和劣势
3. 利用场景举例
4. 总结和瞻望

01 前端渲染的倒退

在讲前端边缘渲染之前，咱们有必要先理解一下前端渲染的倒退历史以及前端各项性能指标优化是如何被提上议程的，之后咱们再反观边缘渲染（ESR）的呈现就会发现也是瓜熟蒂落。

其实整个前端渲染形式是随着前端技术的演进而一直变革的，大抵能够分为如下历程。

SSR（Server Side Rendering）时代（JSP、PHP）

最晚期的前端渲染（2005 年 Ajax 推出之前）都是和后端混写的，比方 JSP、PHP 等写法。然而前后端写法杂糅在一起导致开发效率低下，比方改个款式还要从新编译一遍，并且页面也会写的很重。

CSR（Client Side Rendering）时代

前面有了 Ajax 技术之后，再加上通过 CDN 缓存动态资源之后，前端 SPA + CSR 渲染有了飞跃式的倒退，这种模式下前端解决所有逻辑、内容填充和路由，数据加载局部通过 Ajax 从后端获取，因而很好的解决了前后端分工开发的问题。其具体申请工夫线可参见下图。

然而因为申请是全异步的，其一是对 SEO 不利，其二是须要 HTML + JS 解决数据拼接能力在前端实现渲染，其首屏白屏工夫会较长，特地在一些低端机型上体验更是堪忧。

SSR（Node）时代

再起初随着 Node 引领的全栈技术的倒退，前端又回到了当初的 SSR 路上，只不过这次的回归是一次螺旋式的回升。

首先是前后端全是 JS 语法，大部分代码都是可复用的，其次是 SEO 场景敌对，服务端渲染好后间接返回最终的 HTML，缩小了白屏等待时间，过多异步申请导致的性能问题能够下放到服务端解决，也能无效防止屡次的数据获取、内容填充，浏览器只绑定相干的 JS 逻辑、事件即可。其具体申请工夫线可参见下图。

ESR（Edge Side Rendering）时代

前面随着边缘计算的倒退，因为边缘计算节点间隔用户更近，有更短网络延时的劣势，咱们能够将页面进行动静拆分，将动态内容缓存在 CDN 先疾速返回给用户，而后在边缘计算节点上发动动静内容的申请，之后将动静内容与动态局部以流的模式进行拼接，从而进一步提高了用户的首屏加载工夫，尤其在边缘地区或者弱网环境也有能领有很好的用户体验，此外还缩小原先 SSR 服务器压力。

02 边缘渲染原理和劣势

方才也提到了，边缘渲染就是借助边缘计算能力，将返回的内容进行动态 + 动静局部拆分并以流的模式返回，最终实现渲染提速。其中，动态局部依靠 CDN 的缓存能力，优先返回给用户，随后在边缘计算节点上持续发动动态数据申请，并拼接在动态局部之后，持续流式返回。因而，其劣势也是不言而喻：

1. TTFB(Time To First Byte) 很短：因为动态内容在 CDN 缓存住了，会很快的返回给用户。
2. FP(First Paint) 很短：因为在动态内容返回后，曾经能够开始 HTML 的解析以及 JS、CSS 的下载和执行。
3. FMP(First Meaningful Paint) 很短：因为动静内容的申请是在边缘计算节点发动，相比于客户端与服务端直连，申请缩小了 TCP 建连和网络传输开销，而且因为动静局部是以 chunked 模式流式返回，FMP 就会很短，比方搜寻网站的第一个搜寻后果就会首先绘制进去。

总体而言，绝对于传统核心渲染，边缘渲染具备节点散布较广，间隔用户更近等劣势，让用户能够在更短的工夫获取到网站资源进行渲染，同时能够缩小核心服务的申请压力，从而达到渲染提速 + 扩散算力的成果。

03 利用场景举例

场景一：将 SSR 服务间接部署在边缘节点，核心服务提供数据接口

间接将 SSR 服务搬到边缘部署，具体流程如下图。

场景二：边缘服务读取缓存的动态局部 HTML，核心服务提供动静 HTML

SSR 服务部署在核心，边缘流式返回 HTML 内容（利用 HTTP Transfer-Encoding: chunked 分块传输机制），须要拆散动态与动静局部，具体流程如下图。

• 边缘服务：申请动态 HTML 并返回，同时申请核心 SSR 服务，获取动静内容并返回
• SSR 服务：去除动态 HTML，把动静局部返回给边缘服务
  

举例

以一个 Demo 网站为例，顶部导航能够视为动态局部缓存在边缘 CDN，上面的卡片是动静局部回源到核心服务获取数据。

通过 Demo 比照，可发现边缘渲染（ESR）比 SSR 的有着显著劣势，其动态顶导首先绘出，前面动态数据也比 SSR 的返回要快。

此外，联合如下的埋点统计，边缘渲染（ESR）的劣势更加得以印证。

04 总结和瞻望

• 技术实现 ：边缘渲染（ESR）适应于对页面渲染性能较高的场景，借助边缘计算在 SSR 的根底上进一步优化首屏绘制的工夫，升高用户页面的白屏等待时间；
• 部署形式 ：目前实现形式次要借助于边缘 FaaS 部署边缘渲染（ESR）服务，具备快速访问、弹性扩缩容、低运维老本等长处；前期提供边缘函数（边缘 JS 运行时）部署，用户无需关怀边缘节点，只需专一于代码自身，批改代码上传公布即可，绝对于 node 服务，JS 运行时可能提供更高的运行效率；
• 技术瞻望 ：边缘渲染（ESR）目前是在 SSR 根底上，联合边缘计算进行的性能晋升；未来火山引擎前端团队将联合函数与边缘计算能力，在前端 Serverless 部署方向进行更多的摸索，感兴趣的同学敬请期待。