前端黑科技！结合Vue 如何让首页秒开

朱雀 2022-01-10 19:17 247阅读 0赞

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

文/北妈

阅读本文需要 3.2分钟** **

**一**

前端性能优化一直是衡量一个团队和一个前端的各方面水平，呈现快速的加载，是给人最直观，成就感也最足的一个感受，而且对用户体验是第一重要的概念，所以这个相当重要，今天北妈就来结合美团的实践方案来讨论一下。

其实文中的很多方案，我和我团队也早在实践了，比如服务端渲染，nginx转发等等，今天发出来，是因为恰巧最近又在搞性能优化问题，大家不妨也看看，美团团队在半年前发的这篇总结，很全面也很详细了。

# **以下一段转载自：美团技术团队分享** #

自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。前端服务端渲染、后端服务端渲染等。

在美团支付的前端技术体系里，通过预渲染提升网页优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。

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

![640?wx\_fmt=png][640_wx_fmt_png]

通过对比，同构方案集合 CSR 与 SSR 的优点，可以适用于大部分业务场景。

结合到我们团队负责的支付业务场景里，在保证系统稳定性的前提下，还需要保障用户体验，所以采用了预渲染的方式。

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

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

![640?wx\_fmt=png][640_wx_fmt_png 1]

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

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

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

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

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

![640?wx\_fmt=png][640_wx_fmt_png 2]

*  等待 HTML 文档返回，此时处于白屏状态。
 *  对 HTML 文档解析完成后进行首屏渲染，因为项目中对加了灰色的背景色，因此呈现出
    
    灰屏。
 *  进行文件加载、JS 解析等过程，导致界面长时间出于灰屏中。
 *  当 Vue 实例触发了 mounted 后，界面显示出大体框架。

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

# **二   优化思路** #

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

![640?wx\_fmt=png][640_wx_fmt_png 3]

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

![640?wx\_fmt=png][640_wx_fmt_png 4]

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

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

![640?wx\_fmt=png][640_wx_fmt_png 5]

![640?wx\_fmt=png][640_wx_fmt_png 6]

![640?wx\_fmt=png][640_wx_fmt_png 7]

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

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

![640?wx\_fmt=png][640_wx_fmt_png 8]

通过以上的对比，最终选择在 mounted 时触发构建时预渲染。

# **三** #

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

构建时预渲染流程：

![640?wx\_fmt=png][640_wx_fmt_png 9]

## **配置读取** ##

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

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

![640?wx\_fmt=png][640_wx_fmt_png 10]

## **触发构建** ##

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

TS的装饰器：

![640?wx\_fmt=png][640_wx_fmt_png 11]

使用：

![640?wx\_fmt=png][640_wx_fmt_png 12]

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

![640?wx\_fmt=png][640_wx_fmt_png 13]

# **四** #

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

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

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

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

![640?wx\_fmt=png][640_wx_fmt_png 14]

开发阶段：

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

发布阶段：

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

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

![640?wx\_fmt=png][640_wx_fmt_png 15]

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

![640?wx\_fmt=png][640_wx_fmt_png 16]

从此我们再也不受第一屏很慢的困扰了。并且可行性很好，也可以让其他有需求的一起实践。

**每日金句：****“经验是好东西，很多人就凭经验做很多事，但有时候经验也会害了你，因为这也代表固执己见****”**

**热门阅读**

[月薪5k的国企, 和月薪2万的私企，我选国企][5k_ _2]...

[低学历者生存困难 程序员尤其明显][Link 1]

**每天只想听你们说：****小北最帅！**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 2]

长按扫码关注我

前端你别闹

每天有惊喜

我觉得 「在看」与「转发」

也是对我的认可 **![640?wx\_fmt=gif][640_wx_fmt_gif]**

[640_wx_fmt_jpeg]: /images/20220110/fe46571321e5495c92e1a19308db6178.png
[640_wx_fmt_png]: /images/20220110/55f32d7cd90b4057afe323aed6c22136.png
[640_wx_fmt_png 1]: /images/20220110/f37c8c4926944ae48864e063484fd7cd.png
[640_wx_fmt_jpeg 1]: /images/20220110/7524025ca21b4790a07c19956e728321.png
[640_wx_fmt_png 2]: /images/20220110/3cc80f7cad7f4c59aa3cf564b034e83c.png
[640_wx_fmt_png 3]: /images/20220110/ac8dce3d923643f081cb0e850f13845f.png
[640_wx_fmt_png 4]: /images/20220110/7f6e90ffe84b4c2a98e8e2bc90bfb9ba.png
[640_wx_fmt_png 5]: /images/20220110/52f98a03d485402c9eddc9c16c907b92.png
[640_wx_fmt_png 6]: /images/20220110/06a9e19ccf004d1cba03ab939efbf639.png
[640_wx_fmt_png 7]: /images/20220110/dd472d5384474b6f8fa49e57a743111a.png
[640_wx_fmt_png 8]: /images/20220110/ffc5ffe01791464d8f2e38f196c124ee.png
[640_wx_fmt_png 9]: /images/20220110/5fed35e0df614c7bbec1188ae79d835b.png
[640_wx_fmt_png 10]: /images/20220110/c43a251478c34790a29f9b60e162ec1f.png
[640_wx_fmt_png 11]: /images/20220110/57c11b4fe8d84e158109038ce3e80aa8.png
[640_wx_fmt_png 12]: /images/20220110/24ea0a6b6ff5458a96e199f7b171b806.png
[640_wx_fmt_png 13]: /images/20220110/ccabff11c33f4267ad17d2924f8f2dae.png
[640_wx_fmt_png 14]: /images/20220110/e791cf35d0354847a5f791eec888f416.png
[640_wx_fmt_png 15]: /images/20220110/0f02af4fbcea49c1ab58eea0e82671a0.png
[640_wx_fmt_png 16]: /images/20220110/6ca54f07eac742f3b6ffa32a23390a1e.png
[5k_ _2]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247486651&idx=1&sn=9ab1b200ba6e1e2cab1354ed1ea00cc6&chksm=eca797bfdbd01ea9ffd13e6b0a45caed35c2ceca2a42a9e1ccfd75e3111b701658ab75619ffb&scene=21#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247486800&idx=1&sn=bda9d0d2f9c150dfeb9ef9dbe99dcb86&chksm=eca79654dbd01f4269a9a3ae9784cdbcd8729f526f26f94521d8101d0516050b4a5e713a8a59&scene=21#wechat_redirect
[640_wx_fmt_jpeg 2]: /images/20220110/236cd488cc8242d1831b01d940b66541.png
[640_wx_fmt_gif]: /images/20220110/481581adf1f34261a33b3a672a1d8da0.png