前端渲染方式随着前端技术的演进而不断创新。边缘计算的出现，让前端渲染从SSR（Node）时代进入了边缘渲染（ESR）时代。本文主要介绍前端渲染的发展演变，以及边缘渲染的原理、优势和应用场景。主要内容如下：前端渲染的发展边缘渲染的原理和优势应用场景示例总结与展望01前端渲染的发展是如何提上日程的，回头再看在边缘渲染（ESR）的出现，发现它也是水到渠成的事情。其实整个前端的渲染方式是随着前端技术的演进而不断创新的，大致可以分为以下几个过程。SSR（ServerSideRendering）时代最早的前端渲染（2005年Ajax推出之前）（JSP、PHP）是和后端混合的，比如JSP、PHP等，但是混合写法前后端方式不同导致开发效率低下。比如改了个样式，又要重新编译，页面就会写得很重。经过Ajax技术的CSR（ClientSideRendering）时代，以及通过CDN缓存静态资源后，前端SPA+CSR渲染得到了突飞猛进的发展。在这种模式下，前端处理所有逻辑、内容填充和路由。数据加载部分是通过Ajax从后端获取的，解决了前后端分工开发的问题。具体的请求时间线可以看下图。但是由于请求是全异步的，一是不利于SEO，二是需要HTML+JS处理数据拼接才能在前端完成渲染，首屏白屏时间会比较长，尤其是在一些低端机型上。更令人担忧。在SSR（Node）时代以及后来随着以Node为首的全栈技术的发展，前端又回到了原来的SSR道路，但这次的回归是螺旋上升的。首先是前后端都是JS语法，大部分代码是可复用的。第二个是SEO场景友好。服务端渲染后直接返回最终的HTML，减少了白屏的等待时间和异步请求过多导致的性能。可以通过委托给服务端来解决问题，也可以有效避免多次数据获取和内容填充。浏览器只需要绑定相关的JS逻辑和事件即可。具体的请求时间线可以看下图。随着ESR（EdgeSideRendering）时代后边缘计算的发展，由于边缘计算节点距离用户更近，网络延迟更短的优势，我们可以将页面拆分为静态页面和动态页面，将静态内容缓存在CDN中第一的。返回给用户，然后在边缘计算节点发起对动态内容的请求，然后将动态内容和静态部分以流的形式进行拼接，从而进一步提升用户首屏的加载时间，尤其是在边缘区域或弱网络环境。可以有很好的用户体验，也可以减轻原有SSR服务器的压力。02边缘渲染的原理和优势刚才提到，边缘渲染就是利用边缘计算能力，将返回的内容拆分成静态+动态的部分，以流的形式返回，最终实现渲染提速。其中，依托于CDN的缓存能力，先将静态部分返回给用户，然后在边缘计算节点上不断发起动态数据请求，并在静态部分之后进行拼接，继续进行流回。因此，它的优势也很明显：TTFB（TimeToFirstByte）很短：因为静态内容缓存在CDN中，很快就会返回给用户。FP（FirstPaint）很短：因为返回静态内容后，已经可以开始HTML的解析和JS、CSS的下载执行了。FMP（FirstMeaningfulPaint）非常短：由于动态内容的请求是在边缘计算节点发起的，与客户端和服务器直接连接相比，请求减少了TCP连接建立和网络传输的开销，并且因为动态部分是chunked形式流回来的，FMP会很短，比如搜索站点的第一个搜索结果会先画出来。总的来说，相比传统的中心渲染，边缘渲染具有节点分布更广、距离用户更近的优势，可以让用户在更短的时间内获取网站资源进行渲染，同时减轻中心服务的请求压力，从而达到加速渲染+分散算力的效果。03应用场景示例场景一：将SSR服务直接部署在边缘节点上，中心服务提供数据接口直接将SSR服务移到边缘进行部署。具体过程如下图所示。场景二：边缘服务读取HTML缓存的静态部分，中心服务提供动态HTML。中心部署SSR服务，边缘流返回HTML内容（使用HTTPTransfer-Encoding:chunked传输机制）。有必要将静态和动态部分分开。具体过程如下图所示。边缘服务：请求静态HTML并返回，同时请求中心SSR服务，获取动态内容并返回SSR服务：去除静态HTML，将动态部分返回给边缘服务Example以一个演示网站为例，顶部导航可以看作是静态部分的缓存在边缘CDN中，下面的卡片是回源从中心服务获取数据的动态部分。通过demo对比，可以发现边缘渲染（ESR）相比SSR有明显的优势。它的静态topguide是先绘制出来的，后面的动态数据也比SSR更快的返回。另外，结合下面的埋点统计，进一步印证了边缘渲染（ESR）的优势。04总结与展望技术实现：边缘渲染（ESR）适用于页面渲染性能要求高的场景。在SSR的基础上借助边缘计算，进一步优化首屏绘制时间，减少用户页面白屏等待时间；部署方式：目前实现主要采用边缘FaaS部署边缘渲染（ESR）服务，具有接入速度快、弹性伸缩、运维成本低等优点；后续会提供边缘功能（边缘JS运行时）部署，用户无需关心边缘节点，只需要关注代码本身，修改代码并上传发布即可。与节点服务相比，JS运行时可以提供更高的运行效率；技术展望：边缘渲染（ESR）目前是基于SSR并结合边缘计算。未来，火山引擎前端团队将结合功能和边缘计算能力，在前端Serverless部署方向进行更多探索。欢迎有兴趣的同学期待。
