前端渲染方案：边缘渲染

前端渲染的发展历史

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

1. SSR（Server Side Rendering）（JSP、PHP）

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

2. CSR（Client Side Rendering）（Ajax、CDN，SPA）

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

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

3. SSR 时代（Node）

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

4. ESR（Edge Side Rendering）

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

 

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

应用场景梳理

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

将 SSR 服务部署到边缘节点，流程如下：

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

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

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

具体流程：

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

 

总结

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