当前端渲染遇上边缘计算边缘计算前端渲染

前端渲染方式随着前端技术的演进而不断革新，边缘计算的出现使前端渲染从 SSR（Node）时代开始迈入边缘渲染（ESR）时代。本文主要介绍前端渲染的发展演进，以及边缘渲染的原理、优势及应用场景。主要内容如下：

前端渲染的发展

边缘渲染的原理和优势

应用场景举例

总结和展望

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 的缓存能力，优先返回给用户，随后在边缘计算节点上继续发起动态数据请求，并拼接在静态部分之后，继续流式返回。因此，其优势也是显而易见：

TTFB(Time To First Byte)很短：因为静态内容在 CDN 缓存住了，会很快的返回给用户。
FP(First Paint)很短：因为在静态内容返回后，已经可以开始 HTML 的解析以及 JS、CSS 的下载和执行。
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 部署方向进行更多的探索，感兴趣的同学敬请期待。