介绍

主流的SPA渲染方式如下图

PWA直出主要做的工作有两点：

• 缓存CGI接口数据

• 缓存HTML

  缓存CGI接口数据

  动静分离

  对于长期不变的数据才能进行缓存，将与不经常变化的数据放在一个接口（静态接口），其他变化的数据放在另一个接口（动态接口）。
  可以使用静态的接口来做服务端渲染，好处是第一比较快（少了动态的信息，而且后台也可以做缓存），第二 Node 直出可以做缓存了。

  缓存HTML

  将静态的部分、不会经常变动的数据用来直出 HTML，然后将 HTML 文件缓存到 Redis 中。
  在前端，使用PWA直出缓存页面。
  PWA直出细节优化

• 防止页面抖动：对于后面动态渲染的部分需要使用，内联的脚本嵌入，计算出当前环境的容器高度，防止页面抖动。

• 冷启动预加载：第一次加载时使用预加载的脚本最大限度的拉取用户可能访问的页面

  参考

  【1】让老板虎躯一震的前端技术，KPI杀手