乐趣区

关于前端:边缘渲染是如何提升前端性能的

jiezi

原文链接 : 边缘渲染是如何晋升前端性能的？

前端渲染的倒退

在讲 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 节点上持续发动动态数据申请，并拼接在动态局部之后，持续流式返回。因而，其劣势也是不言而喻：

  1. TTFB(Time To First Byte) 很短：
    因为动态内容在 CDN 缓存住了，会很快的返回给用户。
  2. FP(First Paint) 很短：
    因为在动态内容返回后，曾经能够开始 HTML 的解析以及 JS, CSS 的下载和执行。
  3. 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 方向进行更多的摸索，有趣味的同学敬请期待
退出移动版