边缘渲染是如何提高前端性能的？

前端渲染的发展

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

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的嘉峪关网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

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方向进行更多的探索，有兴趣的同学敬请期待！

新闻名称：边缘渲染是如何提高前端性能的？
网站地址：http://www.36103.cn/qtweb/news15/39865.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联