前端黑科技：美团网页首帧优化实践

忘是亡心i 2023-10-18 11:21 65阅读 0赞

## 前言 ##

自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。

在前端渲染领域，主要有以下几种方式可供选择：

<table> 
 <thead> 
  <tr> 
   <th align="center"></th> 
   <th align="left">CSR</th> 
   <th align="left">预渲染</th> 
   <th align="left">SSR</th> 
   <th align="left">同构</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">优点</td> 
   <td align="left">不依赖数据FP 时间最快客户端用户体验好内存数据共享</td> 
   <td align="left">不依赖数据FCP 时间比 CSR 快客户端用户体验好内存数据共享</td> 
   <td align="left">SEO 友好首屏性能高，FMP 比 CSR 和预渲染快</td> 
   <td align="left">SEO 友好首屏性能高，FMP 比 CSR 和预渲染快客户端用户体验好内存数据共享客户端与服务端代码公用，开发效率高</td> 
  </tr> 
  <tr> 
   <td align="center">缺点</td> 
   <td align="left">SEO 不友好FCP 、FMP 慢</td> 
   <td align="left">SEO 不友好FMP 慢</td> 
   <td align="left">客户端数据共享成本高模板维护成本高</td> 
   <td align="left">Node 容易形成性能瓶颈</td> 
  </tr> 
 </tbody> 
</table>

通过对比，同构方案集合 CSR 与 SSR 的优点，可以适用于大部分业务场景。但由于在同构的系统架构中，连接前后端的 Node 中间层处于核心链路，系统可用性的瓶颈就依赖于 Node ，一旦作为短板的 Node 挂了，整个服务都不可用。

结合到我们团队负责的支付业务场景里，由于支付业务追求极致的系统稳定性，服务不可用直接影响到客诉和资损，因此我们采用浏览器端渲染的架构。在保证系统稳定性的前提下，还需要保障用户体验，所以采用了预渲染的方式。

那么究竟什么是预渲染呢？什么是 FCP/FMP 呢？我们先从最常见的 CSR 开始说起。

以 Vue 举例，常见的 CSR 形式如下：

![1671b9d201124864_w_1228_h_752_f_png_s_39547][]

一切看似很美好。然而，作为以用户体验为首要目标的我们发现了一个体验问题：**首屏白屏问题**。

## 为什么会首屏白屏 ##

浏览器渲染包含 HTML 解析、DOM 树构建、CSSOM 构建、JavaScript 解析、布局、绘制等等，大致如下图所示：

![1671b9d4d735398e_w_791_h_257_f_jpeg_s_32129][]

要搞清楚为什么会有白屏，就需要利用这个理论基础来对实际项目进行具体分析。通过 DevTools 进行分析：

![1671b9db467e04ce_w_1828_h_822_f_png_s_308183][]

*  等待 HTML 文档返回，此时处于白屏状态。
 *  对 HTML 文档解析完成后进行首屏渲染，因为项目中对 id="app加了灰色的背景色，因此呈现出灰屏。
 *  进行文件加载、JS 解析等过程，导致界面长时间出于灰屏中。
 *  当 Vue 实例触发了 mounted 后，界面显示出大体框架。
 *  调用 API 获取到时机业务数据后才能展示出最终的页面内容。

由此得出结论，因为要等待文件加载、CSSOM 构建、JS 解析等过程，而这些过程比较耗时，导致用户会长时间出于不可交互的首屏灰白屏状态，从而给用户一种网页很“慢”的感觉。那么一个网页太“慢”，会造成什么影响呢？

## “慢”的影响 ##

[Global Web Performance Matters for ecommerce][]的报告中指出：

![1671b9e1bfa6f066_w_1392_h_798_f_png_s_120637][]

*  57%的用户更在乎网页在3秒内是否完成加载。
 *  52%的在线用户认为网页打开速度影响到他们对网站的忠实度。
 *  每慢1秒造成页面 PV 降低11%，用户满意度也随之降低降低16%。
 *  近半数移动用户因为在10秒内仍未打开页面从而放弃。

我们团队主要负责美团支付相关的业务，如果网站太慢会影响用户的支付体验，会造成客诉或资损。既然网站太“慢”会造成如此重要的影响，那要如何优化呢？

## 优化思路 ##

在[User-centric Performance Metrics][]一文中，共提到了4个页面渲染的关键指标：

![1671b9e7a5cee36d_w_1400_h_488_f_png_s_52415][]

基于这个理论基础，再回过头来看看之前项目的实际表现：

![1671b9e7a5db37ef_w_1870_h_820_f_png_s_299711][]

可见在 FP 的灰白屏界面停留了很长时间，用户不清楚网站是否有在正常加载，用户体验很差。

试想：如果我们可以将 FCP 或 FMP 完整的 HTML 文档提前到 FP 时机预渲染，用户看到页面框架，能感受到页面正在加载而不是冷冰冰的灰白屏，那么用户更愿意等待页面加载完成，从而降低了流失率。并且这种改观在弱网环境下更明显。

通过对比 FP、FCP、FMP 这三个时期 DOM 的差异，发现区别在于：

![1671b9ea2aed5e3f_w_842_h_676_f_png_s_141406][]  
![1671b9ecc5e7490a_w_786_h_894_f_png_s_229955][]  
![1671b9f1a59700cb_w_710_h_936_f_png_s_236949][]

*  FP：仅有一个 div 根节点。
 *  FCP：包含页面的基本框架，但没有数据内容。
 *  FMP：包含页面所有元素及数据。

仍然以 Vue 为例， 在其生命周期中，mounted 对应的是 FCP，updated 对应的是 FMP。那么具体应该使用哪个生命周期的 HTML 结构呢？

<table> 
 <thead> 
  <tr> 
   <th align="center"></th> 
   <th align="left">mounted (FCP)</th> 
   <th align="left">updated (FMP)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">缺点</td> 
   <td align="left">只是视觉体验将 FCP 提前，实际的 TTI 时间变化不大</td> 
   <td align="left">构建时需要获取数据，编译速度慢构建时与运行时的数据存在差异性有复杂交互的页面，仍需等待，实际的 TTI 时间变化不大</td> 
  </tr> 
  <tr> 
   <td align="center">优点</td> 
   <td align="left">不受数据影响，编译速度快</td> 
   <td align="left">首屏体验好对于纯展示类型的页面，FP 与 TTI 时间近乎一致</td> 
  </tr> 
 </tbody> 
</table>

通过以上的对比，最终选择在 mounted 时触发构建时预渲染。由于我们采用的是 CSR 的架构，没有 Node 作为中间层，因此要实现 DOM 内容的预渲染，就需要在项目构建编译时完成对原始模板的更新替换。

至此，我们明确了构建时预渲染的大体方案。

## 构建时预渲染方案 ##

构建时预渲染流程：

![1671b9f1a5ad59f8_w_1644_h_522_f_png_s_83793][]

### 配置读取 ###

由于 SPA 可以由多个路由构成，需要根据业务场景决定哪些路由需要用到预渲染。因此这里的配置文件主要是用于告知编译器需要进行预渲染的路由。

在我们的系统架构里，脚手架是基于 Webpack 自研的，在此基础上可以自定义自动化构建任务和配置。

![1671b9f67159efa0_w_1038_h_552_f_png_s_77632][]

### 触发构建 ###

项目中主要是使用 TypeScript，利用 TS 的[装饰器][Link 1]，我们封装了统一的预渲染构建的钩子方法，从而只用一行代码即可完成构建时预渲染的触发。

装饰器：

![1671b9f8f840e092_w_944_h_320_f_png_s_42009][]

使用：

![1671b9fb30446feb_w_950_h_818_f_png_s_245719][]

### 构建编译 ###

从流程图上，需要在发布机上启动模拟的浏览器环境，并通过预渲染的事件钩子获取当前的页面内容，生成最终的 HTML 文件。

由于我们在预渲染上的尝试比较早，当时还没有 [Headless Chrome][] 、 [Puppeteer][]、[Prerender SPA Plugin][]等，因此在选型上使用的是 [phantomjs-prebuilt][]（Prerender SPA Plugin 早期版本也是基于 phantomjs-prebuilt 实现的）。

通过 phantom 提供的 API 可获得当前 HTML，示例如下：

![1671b9fe718b6ba9_w_1422_h_1010_f_png_s_159186][]

为了提高构建效率，并行对配置的多个页面或路由进行预渲染构建，保证在 5S 内即可完成构建，流程图如下：

![1671ba00ccca105a_w_1532_h_944_f_png_s_73001][]

## 方案优化 ##

理想很丰满，现实很骨感。在实际投产中，构建时预渲染方案遇到了一个问题。

我们梳理一下简化后的项目上线过程：

**开发 -> 编译 -> 上线**

假设本次修改了静态文件中的一个 JS 文件，这个文件会通过 CDN 方式在 HTML 里引用，那么最终在 HTML 文档中的引用方式是 `<script src="http://cdn.com/index.js"></script>`。然而由于项目还没有上线，所以其实通过完整 URL 的方式是获取不到这个文件的；而预渲染的构建又是在上线动作之前，所以问题就产生了：

**构建时预渲染无法正常获取文件，导致编译报错**

怎么办？

**请求劫持**

因为在做预渲染时，我们使用启动了一个模拟的浏览器环境，根据 phantom 提供的 API，可以对发出的请求加以劫持，将获取 CDN 文件的请求劫持到本地，从而在根本上解决了这个问题。示例代码如下：

![1671ba03f7fb34b8_w_1548_h_406_f_png_s_78905][]

## 构建时预渲染研发流程及效果 ##

最终，构建时预渲染研发流程如下：

![1671ba064530a227_w_1746_h_614_f_png_s_118112][]

开发阶段：

*  通过 TypeScript 的装饰器单行引入预渲染构建触发的方法。
 *  发布前修改编译构建的配置文件。

发布阶段：

*  先进行常规的项目构建。
 *  若有预渲染相关配置，则触发预渲染构建。
 *  通过预渲染得到最终的文件，并完成发布上线动作。

完整的用户请求路径如下：

![1671ba09446c6f33_w_1582_h_858_f_png_s_154476][]

通过构建时预渲染在项目中的使用，FCP 的时间相比之前减少了 75%。

![1671ba0b762ef2b0_w_1568_h_830_f_png_s_320559][]

### 作者简介 ###

寒阳，美团资深研发工程师，多年前端研发经历，负责美团支付钱包团队和美团支付前端基础技术。

### 招聘信息 ###

我们美团金融服务平台大前端研发组在高速成长中，我们欢迎更多优秀的 Web 前端研发工程师加入，感兴趣的朋友可以将简历发送到邮箱：shanghanyang@meituan.com。

![1671ba0da3351bbe_w_1875_h_835_f_png_s_142461][]

[1671b9d201124864_w_1228_h_752_f_png_s_39547]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9d201124864?w=1228&h=752&f=png&s=39547
[1671b9d4d735398e_w_791_h_257_f_jpeg_s_32129]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9d4d735398e?w=791&h=257&f=jpeg&s=32129
[1671b9db467e04ce_w_1828_h_822_f_png_s_308183]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9db467e04ce?w=1828&h=822&f=png&s=308183
[Global Web Performance Matters for ecommerce]: https://www.cdnetworks.com/resources/whitepapers/us/Global%20Web%20Performance%20Matters.pdf
[1671b9e1bfa6f066_w_1392_h_798_f_png_s_120637]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9e1bfa6f066?w=1392&h=798&f=png&s=120637
[User-centric Performance Metrics]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
[1671b9e7a5cee36d_w_1400_h_488_f_png_s_52415]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9e7a5cee36d?w=1400&h=488&f=png&s=52415
[1671b9e7a5db37ef_w_1870_h_820_f_png_s_299711]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9e7a5db37ef?w=1870&h=820&f=png&s=299711
[1671b9ea2aed5e3f_w_842_h_676_f_png_s_141406]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9ea2aed5e3f?w=842&h=676&f=png&s=141406
[1671b9ecc5e7490a_w_786_h_894_f_png_s_229955]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9ecc5e7490a?w=786&h=894&f=png&s=229955
[1671b9f1a59700cb_w_710_h_936_f_png_s_236949]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9f1a59700cb?w=710&h=936&f=png&s=236949
[1671b9f1a5ad59f8_w_1644_h_522_f_png_s_83793]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9f1a5ad59f8?w=1644&h=522&f=png&s=83793
[1671b9f67159efa0_w_1038_h_552_f_png_s_77632]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9f67159efa0?w=1038&h=552&f=png&s=77632
[Link 1]: https://www.typescriptlang.org/docs/handbook/decorators.html
[1671b9f8f840e092_w_944_h_320_f_png_s_42009]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9f8f840e092?w=944&h=320&f=png&s=42009
[1671b9fb30446feb_w_950_h_818_f_png_s_245719]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9fb30446feb?w=950&h=818&f=png&s=245719
[Headless Chrome]: https://developers.google.com/web/updates/2017/04/headless-chrome
[Puppeteer]: https://github.com/GoogleChrome/puppeteer
[Prerender SPA Plugin]: https://www.npmjs.com/package/prerender-spa-plugin
[phantomjs-prebuilt]: https://www.npmjs.com/package/phantomjs-prebuilt
[1671b9fe718b6ba9_w_1422_h_1010_f_png_s_159186]: https://user-gold-cdn.xitu.io/2018/11/16/1671b9fe718b6ba9?w=1422&h=1010&f=png&s=159186
[1671ba00ccca105a_w_1532_h_944_f_png_s_73001]: https://user-gold-cdn.xitu.io/2018/11/16/1671ba00ccca105a?w=1532&h=944&f=png&s=73001
[1671ba03f7fb34b8_w_1548_h_406_f_png_s_78905]: https://user-gold-cdn.xitu.io/2018/11/16/1671ba03f7fb34b8?w=1548&h=406&f=png&s=78905
[1671ba064530a227_w_1746_h_614_f_png_s_118112]: https://user-gold-cdn.xitu.io/2018/11/16/1671ba064530a227?w=1746&h=614&f=png&s=118112
[1671ba09446c6f33_w_1582_h_858_f_png_s_154476]: https://user-gold-cdn.xitu.io/2018/11/16/1671ba09446c6f33?w=1582&h=858&f=png&s=154476
[1671ba0b762ef2b0_w_1568_h_830_f_png_s_320559]: https://user-gold-cdn.xitu.io/2018/11/16/1671ba0b762ef2b0?w=1568&h=830&f=png&s=320559
[1671ba0da3351bbe_w_1875_h_835_f_png_s_142461]: https://user-gold-cdn.xitu.io/2018/11/16/1671ba0da3351bbe?w=1875&h=835&f=png&s=142461