写点什么

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

  • 2018-11-22
  • 本文字数:2499 字

    阅读完需:约 8 分钟

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

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


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



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


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


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


以 Vue 举例,常见的 CSR 形式如下:



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

为什么会首屏白屏?

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



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



  • 等待 HTML 文档返回,此时处于白屏状态。

  • 对 HTML 文档解析完成后进行首屏渲染,因为项目中对 id="app 加了灰色的背景色,因此呈现出灰屏。

  • 进行文件加载、JS 解析等过程,导致界面长时间出于灰屏中。

  • 当 Vue 实例触发了 mounted 后,界面显示出大体框架。

  • 调用 API 获取到时机业务数据后才能展示出最终的页面内容。


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

“慢”的影响

Global Web Performance Matters for ecommerce 的报告中指出:



  • 57%的用户更在乎网页在 3 秒内是否完成加载;

  • 52%的在线用户认为网页打开速度影响到他们对网站的忠实度;

  • 每慢 1 秒造成页面 PV 降低 11%,用户满意度也随之降低降低 16%;

  • 近半数移动用户因为在 10 秒内仍未打开页面从而放弃。


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

优化思路

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



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



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


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


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





  • FP:仅有一个 div 根节点。

  • FCP:包含页面的基本框架,但没有数据内容。

  • FMP:包含页面所有元素及数据。


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



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


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

构建时预渲染方案

构建时预渲染流程:


配置读取

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


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


触发构建

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


装饰器:



使用:


构建编译

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


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


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



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


方案优化

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


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


开发 -> 编译 -> 上线


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


构建时预渲染无法正常获取文件,导致编译报错,怎么办?


请求劫持


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


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

最终,构建时预渲染研发流程如下:



开发阶段:


  • 通过 TypeScript 的装饰器单行引入预渲染构建触发的方法。

  • 发布前修改编译构建的配置文件。


发布阶段:


  • 先进行常规的项目构建。

  • 若有预渲染相关配置,则触发预渲染构建。

  • 通过预渲染得到最终的文件,并完成发布上线动作。


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



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


作者简介

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


更多内容,可关注前端之巅公众号(ID:frontshow)



2018-11-22 07:003931

评论 2 条评论

发布
用户头像
有一些问题想请教:
1. 是不是必须用 history mode, hash模式是不是不行?
2. 如果created里面有调用api怎么处理?
3. 在生产最终html页面的时候, 是不是得在vue.mounted里面控制不执行api调用?
4. 在执行最终生成页面的时候 ,会不会有冲突。比如vue componet渲染创建已经存在的html元素 。
谢谢
2018-11-27 04:55
回复
用户头像
ssr与同构有什么区别?
2018-11-22 10:02
回复
没有更多了
发现更多内容

3种OC渲染透明背景的方法

Finovy Cloud

学习 自学 渲染 建模 渲染器

MATLAB R2023a for Mac激活图文教程+安装密钥

胖墩儿不胖y

Mac软件 计算工具 计算软件

简单好用的防火墙 Radio Silence最新激活码

mac大玩家j

Mac软件 防火墙工具 防火墙软件 阻止网络连接软件

免费共享大文件的10种方法,分享大文件传输的解决方案

镭速

如何把一个接口设计好? | 京东云技术团队

京东科技开发者

接口 接口设计 企业号 8 月 PK 榜

软件测试/测试开发丨Selenium 高级定位 Xpath

测试人

程序员 软件测试 测试开发 selenium xpath

基于深度学习的机器视觉表计识别

鲸品堂

人工智能 深度学习 数据 企业号 8 月 PK 榜

redis分布式锁,setnx+lua脚本的java实现 | 京东物流技术团队

京东科技开发者

redis setnx Lua脚本 redis 底层原理 企业号 8 月 PK 榜

中国传统文化国际交流大会暨《传承进行时》非遗晚会启动

Geek_2d6073

撮合前端平台在低代码平台的落地实践 | 京东云技术团队

京东科技开发者

前端 中台架构 低代码平台 企业号 8 月 PK 榜 撮合

NFT艺术品交易平台开发搭建

V\TG【ch3nguang】

NFT数字藏品系统

NineData X SelectDB 联合发布会,8月30日即将上线!

NineData

实时数仓 数据复制 SelectDB 产品架构 NineData

AI区块链量化交易平台搭建开发

V\TG【ch3nguang】

量化交易系统开发

langchain中的LLM模型使用介绍

程序那些事

人工智能 AIGC langchain

成品直播源码平台消息传递的协议:MMS协议

山东布谷科技

软件开发 消息传递 成品直播源码 MMS 多媒体短信协议

生成式AI引领数据中心网络升级

百度开发者中心

#人工智能 ChatGPT 文心一言

蓝易云:Ubuntu Linux中如何删除Firefox Snap?

百度搜索:蓝易云

firefox 云计算 Linux ubuntu 运维

GameFi模式链游搭建,养成、PK类链游系统开发

V\TG【ch3nguang】

区块链游戏 gamefi

Office 2019正式版 办公软件套装Office 2019 mac激活版

mac

苹果mac Windows软件下载 office 2019 办公软件套装

区块链交易所系统开发

V\TG【ch3nguang】

数字货币交易所系统搭建

架构师日记-软件工程里的组织文化 | 京东云技术团队

京东科技开发者

架构 软件工程 自动化测试 企业号 8 月 PK 榜 组织文化

区块链挖矿APP软件开发,质押流动性矿池模式系统搭建

V\TG【ch3nguang】

挖矿系统开发

亿级月活的社交APP,陌陌如何做到3分钟定位故障?

童子龙

微服务 性能分析 链路跟踪 可观测平台

来文心中国行!专家面对面解读大模型产业实践及AI场景突围

飞桨PaddlePaddle

人工智能 百度飞桨 百度AI 文心一言 文心大模型

60个令人兴奋的ThreeJS网站示例

3D建模设计

three.js

蓝易云:CentOS7系统安装和配置 DRBD?实现高可用性和数据冗余教程!

百度搜索:蓝易云

云计算 Linux centos 运维 DRBD

区块链会员系统搭建,复利理财拆分模式开发部署

V\TG【ch3nguang】

理财系统 区块链系统开发 复利

一道经典面试题:@Configuration 和 @Component 有何区别?

江南一点雨

Java spring

前端黑科技:美团网页首帧优化实践_大前端_寒阳_InfoQ精选文章