渲染模式思路指北

前端页面的渲染模式有很多种：CSR、SSR、SSG、ISR、ESR等等。但是最终目的都是在平衡开发和体验的基础上，最大化提升用户体验。

声明：以下仅针对页面HTML内容快速获取的思路和处理方式

目的都是让用户侧更快地获取到页面最大内容（LCP），主要手段为以下两种：

1. 最大化缩短白屏时间
2. 最大化缩短DOM的组装和渲染时间

如何缩短白屏时间

• 让资源离用户更近 - 网络层面

  • 借助云服务商的域名动态加速，优化网络入口
  • 使用CFC
  • 使用边缘计算，即edgejs
  • 不可使用CDN（HTML不能被直接缓存），除非HTML实现了纯静态并且和页面路由打通

• 最大化减少服务器端拼装html内容或片段的时间 - 渲染层面

  • 不建议直接使用SSR，即使加了缓存，因为增加了服务端的平响
  • 不能直接返回常规编译产出的html入口文件，因为它是CSR模式的，虽然它减少了拼装html的耗时，但是和我们的初衷是相悖的，即 让用户侧更快地获取到页面最大内容（LCP）

如何缩短DOM的组装和渲染时间

• 提前渲染好DOM内容（SSG）

  • 将SSR的过程在编译阶段根据页面路径+多语言（如果有的话）为标识，产出若干静态文件

  • 如页面不能纯静态化（页面的内容生成依赖其他数据，如用户中心或个人空间，下载页），分三种场景

    • 静态文件极少内容依赖动态化数据：模板引擎替换

    • 静态文件部分内容依赖动态化数据：使用ISR，组件级别的SSG，在服务器进行拼装

    • 静态文件大量内容依赖动态化数据：使用SSR，但也分两种情况

      • 页面的URL与内容强相关：SSR
      • 页面的URL与内容不相关：使用异步作业定时刷新静态站点

• DOM内容提前静态化意味着：

  1. 更少的服务器拼装html内容耗时
  2. 越静态则对中间缓存服务器（CDN、OSS）越友好

架构模式选择

一切都是建立在HTML静态化之后。

• 域名动态加速+静态页托管

  • 页面要纯静态化，任何不同的人或客户端请求返回的内容不会做任何更改
  • 页面内容只要依赖任何的动态数据，就不能使用此方案

• 域名动态加速 + OSS + CFC

  • 解决页面依赖部分动态内容的情况

• 边缘节点 + 间缓存服务器

  • 借助边缘节点上的js运行能力，在距离用户最近的节点上通过ngx的js扩展，请求最近的中间缓存服务器上的html片段拼装并返回

• 边缘节点 + 渲染服务器

  • 通过边缘节点请求渲染服务器，要比用户直接通过域名（即便使用了动态加速）请求渲染服务器要快。

• 大杀器：边缘节点 + v8引擎

  • 边缘节点的nginx接入chromium引擎，实现渲染服务器+边缘计算的二合一，强强联合，这才是真正的ESR。

最后

多说一句，架构模式的最后三种方式是可以申请专利的，先下手为强吧各位。另外对于即将毕业需要做毕业论文的同学，这也是个非常好的选题。