原文链接 : 边缘渲染是如何晋升前端性能的？
前端渲染的倒退
在讲ESR（Edge Side Rendering，边缘渲染）如何提速渲染之前，咱们有必要先理解一下前端渲染的倒退历史以及前端各项性能指标优化是如何被提上议程的，之后咱们再反观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节点间隔用户更近，有更短网络延时的劣势，咱们能够将页面进行动静拆分，将动态内容缓存在CDN先疾速返回给用户，而后在CDN节点上发动动静内容的申请，之后将动静内容与动态局部以流的模式进行拼接，从而进一步提高了用户的首屏加载工夫，尤其在边缘地区或者弱网环境也有能领有很好的用户体验，此外还缩小原先SSR服务器压力。
原理和劣势
方才也提到了，ESR就是借助边缘计算能力，将返回的内容进行动态+动静局部拆分并以流的模式返回。动态局部依靠CDN的缓存能力，优先返回给用户，随后在CDN节点上持续发动动态数据申请，并拼接在动态局部之后，持续流式返回。因而，其劣势也是不言而喻：
- TTFB(Time To First Byte)很短：
因为动态内容在CDN缓存住了，会很快的返回给用户。 - FP(First Paint)很短：
因为在动态内容返回后，曾经能够开始HTML的解析以及 JS, CSS的下载和执行。 - FMP(First Meaningful Paint)很短：
因为动静内容的申请是在CDN发动，相比于客户端与服务端直连，申请缩小了TCP建连和网络传输开销，而且因为动静局部是以chunked模式流式返回，FMP就会很短，比方搜寻网站的第一个搜寻后果就会首先绘制进去。
利用场景举例
场景一：将SSR服务间接部署在边缘节点，核心服务提供数据接口
间接将SSR服务搬到边缘部署，具体流程如下图。
场景二：边缘服务读取缓存的动态局部HTML，核心服务提供动静HTML
SSR服务部署在核心，边缘流式返回HTML内容（利用HTTP Transfer-Encoding: chunked 分块传输机制），须要拆散动态与动静局部，具体流程如下图。
- 边缘服务：
申请动态HTML并返回，同时申请核心SSR服务，获取动静内容并返回 SSR服务：
去除动态HTML，把动静局部返回给边缘服务举例
以一个Demo网站为例，顶部导航能够视为动态局部缓存在边缘CDN，上面的卡片是动静局部回源到核心服务获取数据。
通过Demo比照，可发现ESR比SSR的有着显著劣势，其动态顶导首先绘出，前面动态数据也比SSR的返回要快。
此外，联合如下的埋点统计，ESR的劣势更加得以印证。
结语和瞻望
- 技术实现： ESR适应于对页面渲染性能较高的场景，借助边缘计算在SSR的根底上进一步优化首屏绘制的工夫，升高用户页面的白屏等待时间；
- 部署形式： 目前实现形式次要借助于边缘faas部署ESR服务，具备快速访问、弹性扩缩容、低运维老本等长处；
前期提供ER（边缘js运行时）部署，用户无需关怀边缘节点，只需专一于代码自身，批改代码上传公布即可，绝对于node服务，js运行时可能提供更高的运行效率 - 技术瞻望： ESR目前是在SSR根底上，联合边缘计算进行的性能晋升，未来咱们将联合ER与CDN能力，在Jamstack方向进行更多的摸索，有趣味的同学敬请期待