前端渲染方案:边缘渲染

前端渲染的发展历史

整个发展历史大致可以分为:

1. SSR(Server Side Rendering)(JSP、PHP)

2005 年 Ajax 推出之前,前后端是混写的,比如JSP、PHP等写法。如此,开发效率低下,容易前后端耦合,维护成本高。

前端渲染方案:边缘渲染_第1张图片

2. CSR(Client Side Rendering)(Ajax、CDN,SPA)

CSR 前后端分离开发,前端处理所有逻辑、内容填充和路由,数据加载部分通过 Ajax 从后端获取 并且借助 CDN 缓存静态资源,SPA 应用飞速发展。其具体请求时间线:

前端渲染方案:边缘渲染_第2张图片

缺点是由于全异步请求,首先是不利于 SEO,再者需要 HTML + JS 经过处理数据阶段才完成渲染,其首屏白屏时间会较长,特别在低端机型上。

3. SSR 时代(Node)

随着 Node 相关的全栈技术的发展,前后端全是 JS,代码可复用,服务端处理部分逻辑并渲染好后直接返回最终的HTML,降低异步请求,减少了白屏等待时间,同时有利于 SEO。浏览器只绑定相关的JS逻辑、事件即可。其具体请求时间线:

前端渲染方案:边缘渲染_第3张图片

4. ESR(Edge Side Rendering)

ESR就是借助边缘计算能力,将返回的内容进行静态+动态部分拆分并以流的形式返回。静态部分依托CDN的缓存能力,优先返回给用户,随后在CDN节点上继续发起动态数据请求,并拼接在静态部分之后,继续流式返回。如此,降低 了SSR 服务器压力和用户的首屏加载耗时,尤其在边缘地区或者弱网环境。其具体请求时间线:

前端渲染方案:边缘渲染_第4张图片

 

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

应用场景梳理

1. 将SSR服务直接部署在边缘节点,中心服务提供数据接口

将 SSR 服务部署到边缘节点,流程如下:

前端渲染方案:边缘渲染_第5张图片

2. 边缘服务读取缓存的静态部分 HTML,中心服务提供动态 HTML

SSR服务部署在中心,边缘流式返回HTML内容(利用HTTP Transfer-Encoding: chunked 分块传输机制),需要分离静态与动态部分,。

  • 边缘服务:请求静态 HTML 并返回,同时请求中心 SSR 服务,利用HTTP Transfer-Encoding: chunked 分块传输机制获取动态内容并流式返回。
  • 中心 SSR 服务:去除静态 HTML,把动态部分返回给边缘服务。

具体流程:

前端渲染方案:边缘渲染_第6张图片

 比如,一个网站,分为顶部导航静态部分和列表动态部分,结果显然,ESR 其静态顶导首先绘出,后面动态列表数据也比SSR的返回要快(耗时单位:ms):

前端渲染方案:边缘渲染_第7张图片

 

总结

ESR 适合对页面渲染性能要求较高的场景,借助边缘计算在SSR的基础上进一步优化首屏绘制的时间,降低用户页面的白屏等待时间;目前实现方式主要借助于边缘 FAAS 部署 ESR 服务,具有快速访问、弹性扩缩容、低运维成本等优点;

你可能感兴趣的:(前端,前端,渲染)