边缘渲染提速

Posted 2021-09-04 .Der_Rabe

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了边缘渲染提速相关的知识，希望对你有一定的参考价值。

前端渲染的发展

在讲ESR（Edge Side Rendering，边缘渲染）如何提速渲染之前，我们有必要先了解一下前端渲染的发展历史以及前端各项性能指标优化是如何被提上议程的，之后我们再反观ESR的出现就会发现也是水到渠成。

文章转载;乐字节

其实整个前端渲染方式也是随着前端技术的演进而不断革新的，大致可以分为如下历程。

$\'边缘渲染提速_ESR\'$

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

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

$\'边缘渲染提速_ESR_02\'$

CSR（Client Side Rendering）时代

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

$\'边缘渲染提速_ESR_03\'$

但是由于请求是全异步的，其一是对SEO不利，其二是需要html + JS处理数据拼接才能在前端完成渲染，其首屏白屏时间会较长，特别在一些低端机型上体验更是堪忧。

SSR时代（Node）

再后来随着Node引领的全栈技术的发展，前端又回到了当初的SSR路上，只不过这次的回归是一次螺旋式的上升。首先是前后端全是JS语法，大部分代码都是可复用的，其次是SEO场景友好，服务端渲染好后直接返回最终的HTML，减少了白屏等待时间，过多异步请求的导致的性能问题也可下放到服务端解决，也能有效避免多次的数据获取、内容填充，浏览器只绑定相关的JS逻辑、事件即可。其具体请求时间线可参见下图。

$\'边缘渲染提速_ESR_04\'$

ESR（Edge Side Rendering）时代

后面随着边缘计算的发展，由于CDN节点距离用户更近，有更短网络延时的优势，我们可以将页面进行动静拆分，将静态内容缓存在CDN先快速返回给用户，然后在CDN节点上发起动态内容的请求，之后将动态内容与静态部分以流的形式进行拼接，从而进一步提高了用户的首屏加载时间，尤其在边缘地区或者弱网环境也有能拥有很好的用户体验，此外还减少原先SSR服务器压力。

$\'边缘渲染提速_ESR_05\'$

原理和优势

刚才也提到了，ESR就是借助边缘计算能力，将返回的内容进行静态+动态部分拆分并以流的形式返回。静态部分依托CDN的缓存能力，优先返回给用户，随后在CDN节点上继续发起动态数据请求，并拼接在静态部分之后，继续流式返回。因此，其优势也是显而易见：

TTFB(Time To First Byte)很短：因为静态内容在CDN缓存住了，会很快的返回给用户。
FP(First Paint)很短：因为在静态内容返回后，已经可以开始HTML的解析以及 JS, CSS的下载和执行。
FMP(First Meaningful Paint)很短：因为动态内容的请求是在CDN发起，相比于客户端与服务端直连，请求减少了TCP建连和网络传输开销，而且由于动态部分是以chunked形式流式返回，FMP就会很短，比如搜索网站的第一个搜索结果就会首先绘制出来。

应用场景举例