关于作者

张所勇

转转平台运营中心前端经理，在前端领域有深入研究，包括：一键切图、前端数据建模、小程序基础能力建设等方面。10年工作经历中，有2年工程师经历，5年CEO经历，3年技术管理经验，能写一些文章，也是2018年掘金优秀作者。

目前业界的首屏优化方案主要有：SSR、CSR 等。这些方案的思路几乎都是将渲染流程放在了传统 SPA 用户端渲染之前，而传统的性能优化方法对于 SPA 项目收效甚微。究其原因还是 SPA 本身的致命缺陷：

SPA项目

我们对SPA项目的首屏表现问题长期关注并探索，期间尝试过很多解决方案，包括：

这些方案能在一定程度上减少白屏时间和首屏时间，但是效果有限，很难像 SSR 方案那样减少数据量，原因在于 SPA 页面渲染流程如下：

滑动查看图片

从上图可以看出，白屏过程几乎是不可避免的，因为无论你如何优化代码大小，你所需要的Vue系列库以及其他核心库文件加起来至少有几百KB，再加上这些文件执行的时间（实测至少500ms），可能大多数情况下，我们的白屏时间至少为-。

当然，我们可以把骨架屏所需的 CSS 放到 HTML 中，这样可以尽快的展示骨架屏（但很多低版本内核需要先全部下载并执行完才能渲染页面），但这并不是真正的首屏，即使在性能统计上，也没有直接反馈首屏的提升效果。

所以 SSR 解决方案就成了我们的救命稻草：

SSR 解决方案

我们来看看SSR是如何解决这个问题的：

滑动查看图片

SSR方案的好处是浏览器下载的HTML已经具备了首屏渲染所需的DOM结构和样式，白屏时间几乎等于HTML文件下载时间，比SPA要短很多，性能数据上有显著的提升。

那么我们为什么不直接使用 SSR 解决方案呢？

主要有四个原因：

1.SSR项目改造成本高

Vue 技术栈目前主流的 SSR 方案有两种：官方方案和 Nuxt.js。这两种方案的相同点在于：

可能你会觉得这个不难sketch文件怎么降级，对于一个新项目来说，确实不难，但是对于一个老项目来说，上述的改造成本和测试成本是极高的，这也是为什么很少有老项目改造SSR的原因。

2. SSR性能取决于接口性能

从SSR的原理可以知道，SSR服务端渲染流程依赖于获取所有数据后才开始渲染，一旦界面出现延迟或者超时，首屏表现也会受到影响。

3. SSR负载能力和扩展能力或成为瓶颈

Node的负载能力不如Javasketch文件怎么降级，甚至不如nginx静态资源服务，这几乎是大家公认的事实，另外很多公司对于Node服务器的快速扩容并没有太多的实践和机制保障，虽然可以通过备份来保证有足够的服务器应对流量高峰，但这是有代价的。

4. SSR无降级计划

一旦节点服务出现故障，页面可能会直接显示白屏，很多情况下重启服务并不能解决问题，毕竟 SSR 不像 SPA，可以在浏览器中解决或者回滚任何错误，必须实际解决问题后才能恢复服务，在服务恢复期间，不能轻易降级到 SPA 方案。

在上述原因中，阻碍我们使用SSR的最主要原因是改造成本。

计划

基于-spa-插件实现，原理如下：

滑动查看图片

核心原理就是访问相应的路由，在打包过程中抓取HTML并静态化，然后部署CDN。

但业界很少采用这种方案，主要原因有：

通过上面的分析我们可以看出，“最优解”应该是SSR，如果不考虑负载能力，唯一的障碍就是改造成本，能否以更低的成本达到和SSR一样的效果呢？

离线预渲染 OPR

犹如晴天霹雳，OPR诞生了，我们把它命名为离线预渲染OPR（ ）。

OPR渲染流程：

滑动查看图片

不同于用户访问阶段的 SSR 渲染，OPR 是独立于用户访问流程的渲染服务，它会定时对页面进行渲染并上传到 CDN，用户访问到的页面会是纯静态页面，可以说它结合了 SSR 和 OPR 两种方案。

与SSR方案的区别：

渲染过程独立于用户访问，无服务器压力，占用资源极少，一台服务器即可完成

该页面几乎不需要任何修改

渲染出来的页面效果跟SSR几乎一致

可以降级为SPA计划

与解决方案的区别：

通过定时渲染，解决解决方案数据不及时更新的问题

该页面几乎不需要任何修改

不影响原项目建设进程

OPR解决方案实施流程

我们来简单看一下：

01

预约访问页面

我们首先搭建一个node服务，通过机制定期去访问需要渲染的页面。

02

等待页面呈现

页面渲染是一个动态的过程，我们如何知道页面已经渲染完成了呢？其实解决方案有很多，但是我们最终选择的解决方案是通过监控公司性能统计的时序，这可以通过页面渲染很方便的方法来实现。

03

抓取 HTML

你必须清楚一点：我们捕获的是浏览器渲染出来的HTML，而不是你请求的index.html文件的内容。

前者你可以理解为通过浏览器开发者工具选中html标签，然后右键复制。

在后一种情况下，你可以通过浏览器查看 HTML 源代码，其中应该只包含一个空白的 DOM 和一些

如有侵权请联系删除！