天下武功，唯 (wei) 快(fu) 不(bu) 破(po)。
随着近几年的前端技术的高速发展，越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大家分享的一个把优化做到极致的故事。
我们的目标是让 H5 的页面也能够拥有 Native 般的体验，如果你还在寻求什么技术能够让老板虎躯一震（拯救你的KPI），那么这篇文章或许能够帮助到你。
企鹅辅导课程详情页是什么
课程详情页是腾讯旗下企鹅辅导 APP 中最重要页面之一，也是流量最大的页面之一，所以它的打开速度也是至关重要的。
这是一个使用 React 编写的 H5 页面，运行于多端，包括： 企鹅辅导APP、手机 QQ、手机浏览器。
架构演变 纯异步渲染我们知道当前主流的 SPA 的应用的默认渲染方式都是这样的：
在这种情况下，从加载页面到用户看到页面（首屏渲染所花费的时间）就是上图中灰色边框区域所包括的时间。
这是最慢的一种方式，就算 CGI 够快，最少要花费 1S 到 2S 左右的时间了。
接着我们简单优化一下：
把静态资源缓存起来，这样下次用户打开的时候就不用从网络请求了。
第 ④ 步拉取 CGI 这个动作是否可以提前呢？我们可以在请求 HTML 之后，先通过一段 JS 脚本去请求 CGI 数据，后面第 ④ 步的时候，就可以直接拿到数据了，这就是 CGI 预加载。
怎么做到呢？我们的方案是统一封装 Request 请求工具，在用 Webpack 打包的时候，会往页面顶部注入一段 预加载 CGI 的 JS 代码，维护一个CGI 与 DATA 对应 MAP，后面发请求的时候，先去 MAP 里取值，如果有值的话直接拿出来，没有的话则发起HTTP 请求。（具体请查阅我们团队开源的 Preload 工具）
这种模式还有一些其他的优化的方法：
在 HTML 内实现 Loading 态或者骨架屏；
去掉外联 css；
使用动态 polyfill；
使用 SplitChunksPlugin 拆分公共代码；
正确地使用 Webpack 4.0 的 Tree Shaking；
使用动态 import，切分页面代码，减小首屏 JS 体积；
编译到 ES2015+，提高代码运行效率，减小体积；
使用 lazyload 和 placeholder 提升加载体验。
效果如下图所示：
异步渲染
直出同构在异步的模式下，除了上述优化，我们还在端内（企鹅辅导 APP、手机 QQ）内做了离线包缓存（腾讯手Q方面独立研发出来的针对手机端优化的方案，简而言之就是将静态资源缓存在手机 APP 内），经过我们的数据测试，首屏渲染大概能够达到秒开（1s左右) 的效果。
但对有着性能极致追求的我们来说，肯定是不会满意的。
继续优化，最容易、最大众的套路肯定就是直出（服务端渲染）了。
现在直出的方案已经有很多很多种，这里也不多做介绍了，如果您想了解更多关于服务端渲染的方案，请参考这篇文章。
直出针对首屏时间的优化效果是非常明显的，经过我们的测试，数据大概能够提升25%左右。
直出之后的效果如下图：
直出同构
可以看到对于首屏来说，没有了【加载中...】的等待时间，视觉体验提升了不少。
PWA 直出
针对上述、常见的直出应用来说，我们能够优化的点在哪里呢？让我们来详细分析一波，这也是今天我们要给大家分享的重点。
首先看看直出应用各个环节的耗时表 (本地环境 2018款 iMac）：
过程名称 过程花费Node 内 CGI 拉取 300 ms
RenderToString 20 ms
网络耗时 10 ms
前端HTML渲染 30 ms
从上面的表中我们看出，直出渲染的耗时的大头还是在 CGI 接口的拉取上。
我们现在提出两个问题：
CGI 接口的数据是否可以缓存 ?
HTML 又是否可以缓存 ?
一、接口的动静分离
这个页面的接口数据中，有一些数据，是实时变动的, 比如：当前还剩多少个名额、此时此刻课程的价格、用户是否购买过这个课程等。