前端感官性能的衡量和优化实践

咱们为何须要关注站点的性能，性能为何如此重要呢？现在任何互联网产品首先重要的都是流量，流量最终会转换为商业价值。因此在互联网产品中，流量、转化率和留存率基本上是产品经理或者业务很是关注的几个因素，而性能则会直接影响到用户的转化和留存（在必定阶段以后影响较大，产品初期功能的因素占比更大）。因此换言之性能，实际上是钱，咱们关注和监测性能并不是是为了数据而数据。产品的使用体验我认为包含三大要素：产品功能、交互视觉、前端性能，而咱们作性能优化的最终目的是提高前端性能，从而提高产品体验。

传统性能优化

值得庆幸的是，前端的性能优化有诸多有迹可循的理论和方法，好比 Yahoo！性能军规（Best Practices for Speeding Up Your Web Site）、Google PageSpeed Insights Rules（developers.google.com/speed/docs/… Browser Processing Model 的不一样阶段。

图 1 浏览器的加载和处理过程

根据图 1 的 Processing Model，咱们能够统计获得如下性能指标：

redirect: timing.fetchStart - timing.navigationStart
dns: timing.domainLookupEnd - timing.domainLookupStart
connect: timing.connectEnd - timing.connectStart
network: timing.connectEnd - timing.navigationStart
load: timing.loadEventEnd - timing.navigationStart
domReady: timing.domContentLoadedEventStart - timing.navigationStart
interactive: timing.domInteractive - timing.navigationStart
ttf: timing.fetchStart - timing.navigationStart
ttr: timing.requestStart - timing.navigationStart
ttdns: timing.domainLookupStart - timing.navigationStart
ttconnect: timing.connectStart - timing.navigationStart
ttfb: timing.responseStart - timing.navigationStart
firstPaint: timing.msFirstPaint - timing.navigationStart

这些指标对于前端而言都司空见惯，基本上核心关注的无外乎是：首字节时间（用于衡量网络链路和服务器响应性能）、白屏时间（firstPaint）、可交互时间（interactive）、彻底加载时间（load）。咱们在很长一段时间里都是根据这些指标来量化分析咱们的站点性能，彷佛未曾认真想过这些指标是否可以真正的反映用户的感官性能。

显然，这些指标绝大部分都属于非视觉指标（Non-Visual Metrics），是体验优化的常规指标，更是体验和性能优化中逃不开的关键因素，但却并不是感官指标，也并不能彻底衡量出用户的感官性能（Perceptual Performance）。

感官性能优化

所谓感官性能，即用户直观感知到的性能，用户感觉是一种很是主观的判断，那么如何衡量和统计感知性能？一般咱们针对用户感知会经过用研分析的方式（眼动仪、用户沟通、用户反馈、调研问卷、专家评估）来评估和衡量。但感官性能不一样于用户感觉，是否有方式能够量化和衡量呢？笔者通过一些调研和了解后，发现感官性能是能够经过必定方式进行衡量、分析和对标的，由于对性能的感觉更多反映在视觉的变化上，所以咱们能够经过一些视觉指标来衡量感官性能：

First Paint Time
First Contentful Paint Time
First Meaningful Paint Time
First Interactive Time
Consistently Interactive Time
Fisrt Visual Change
Last Visual Change
Speed Index
Perceptual Speed Index

First Paint 又称之为 First Non-Blank Paint，表示文档中任一元素首次渲染的时间。First Contentful Paint 表明文档中内容元素（文本、图像、Canvas，或者 SVG）首次渲染的时间。它一般状况下是无心义的渲染，好比头部和导航条。First Meaningful Paint Time 表明首次有意义的渲染时间（它的统计在重大的布局变化以后，每每表明了用户所关心的首次渲染时间），First Interactive Time、Consistently Interactive Time 分别表示首次可交互时间和持续可交互时间。

如图 2 的流程图展现了 Blink 内核中 Time-to-first-X-paint 的分析原理和上报路径（其余 first-X-paint 的指标相似）。

图 2 Blink 内核中 Time-to-first-X-paint 的分析原理和上报路径

Fisrt Visual Change、Last Visual Change 分别表示首次和最后一次视觉发生变化的时间点，Speed Index、Perceptual Speed Index 均为视觉速度，二者的区别在于背后所用到的算法不一样，前者采用了 Mean Pixel-Histogram Difference 算法，后者则采用了 Structural Similarity Image Metric 算法，其中 Perceptual Speed Index 的统计结果更贴近用户的真实感觉。Speed Index 的算法以下，它表明了咱们页面在加载过程当中视觉上的变化速度，其值越小表明感官性能越好：

公式 1

经过 FCP（First Contentful Paint）、FMP（First Meaningful Paint）、PSI（Perceptual Speed Index），咱们能够实现跨平台的感官性能分析和对标（好比能够实现 HTML5 和 Hybrid 对比，HTML5 和原生应用的对比等），如图 3 所示为咱们项目中某列表页的 SI 和 PSI 柱状图。

图 3 业务项目中某列表页的 SI 和 PSI 柱状图示意

性能优化分析工具

说起性能优化分析工具，在开发阶段咱们拥有众多的选择（好比 Chrome 自带的 Dev Tools、老牌的 YSlow、以及 Google 推出的 PageSpeed Insights），这里笔者强烈推荐的是 Lighthouse。Lighthouse 是一个开源的自动化工具，运行 Lighthouse 的方式有两种：一种是做为 Chrome 扩展程序运行；另外一种做为命令行工具运行。 Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。经过命令行工具能够将 Lighthouse 集成到持续集成系统。

经过 Lighthouse 咱们能够对页面从 PWA、性能、可访问性、最佳实践几个方面进行多维度的分析，并给出结果和建议，上文中提到的 FMP（First Meaningful Paint）、FI（First Interactive），CI（Consistently Interactive），PSI（Perceptual Speed Index）均可以从其中的性能报告中分析获得。

因为篇幅所限，对于 Lighthouse 的细节说明、原理及使用在此再也不赘述，基本上在开发阶段经过 Chrome Dev Tools、Lighthouse 彻底能够进行全面的性能体验和分析，已经可以为咱们的优化提供足够多的指导建议。

感官性能的跨平台对标

仅仅在开发阶段拥有可用的分析检测工具还远远不够，一般状况下，咱们更但愿在产品上线后，和竞对的产品进行感官性能的对标分析，而这里每每会涉及到跨平台（由于竞对的产品实现多是经过 HTML5 实现，也多是诸如 Weex、React Native 的混合开发形式，固然还有很大一部分多是原生的实现）。

如何进行跨平台的感官性能对标，在笔者看来很是重要，如今行业内你们广泛采用的对标方式是视频对比，经过两个视频的时间轴对比来讲明感官性能的提高。我的认为这种方式没法作到量化和自动化，所以可能会出现不一样的人对比得出的结果并不可以对齐，同时效率较低。

咱们须要作的仅仅是更进一步，将视频对比的过程量化和自动化。所以笔者在充分调研了现有社区的一些实现后，和同事封装了一个简单易用的小工具（Twilight）用于感官性能的跨平台对标。咱们须要作的仅仅是录制视频，而后点选关键帧，以后便可以自动的将 SI（Speed Index）、PSI（Perceptual Speed Index）、FVC（First Visual Change）、FCP（FirstContentful Paint）、FMP（First Meaningful Paint）、LVC（Last Visual Change）等指标可视化的呈现出来。

图 4 使用 Twilight 分析工具获取感官性能指标的流程

业务应用优化实践

在业务项目上咱们也针对国际机票进行了一系列的摸索和实践。国际机票在客户端内以及纯浏览器中均可能被访问，采用了 Vue 2.0 做为基础框架，并经过纯静态化的方式开发并部署至 CDN。起初国际机票的页面加载白屏明显（首次内容渲染时间长），用户体验较差。所以咱们经过上述提到的一些工具进行了分析，发现网络请求、应用启动、接口请求是影响列表页性能加载的三大因素。

针对上述问题，咱们采用了如下关键的优化策略：

纯前端离线化（在浏览器中经过纯前端的手段进行资源文件的离线化）；
客户端离线化（在客户端容器内经过离线包的方式实现资源文件及页面的离线化）；
页面组件化并按需加载（经过组件化方式对页面细粒度拆分并按需加载）；
预渲染提高感官性能（在框架启动以前，经过预渲染的方式确保页面框架最快呈现）。

经过上述优化策略优化后，效果显著，纯前端离线化上线后可交互和彻底加载时间提高 50%，客户端离线化上线后，首字节时间基本为 0（下降 500 毫秒），可交互和彻底加载时间相较纯前端离线化进一步提高 30%至 50%，按需加载和预渲染上线后页面的 FMP（First Meaningful Paint）提高 80%。

如图 5 所示为列表页在 Chrome 浏览器中模拟 4G 并将 CPU 模拟 4 倍降速（CPU Throttling 4x slowdown）的表现（不包含客户端离线化的效果）。

图 5 国际机票项目性能优化先后的加载效果对比

性能分析及优化小结

总结一下，前端的性能分析和优化方式，不管是传统性能仍是感官性能彻底有迹可循。开发阶段可使用 Dev Tools、Lighthouse，借助非视觉指标（Non-Visual Metrics）和视觉指标（Visual Metrics）进行分析，遵循传统性能优化军规以及 Google PRPL Pattern 进行性能优化。经过咱们提供的工具 Twilight 能够便捷的实现感官性能的跨平台对标分析。虽然咱们在业务项目中的实践取得了必定的效果，但优化之路漫漫，还有不少空间的可能性。欢迎对性能优化感兴趣的同行一同交流，Do Better Web。

做者简介

郭凯，美团点评酒旅前端高级技术专家、高级技术经理，目前负责美团点评酒旅事业群境内度假终端研发团队，致力于终端技术体系的完善和基础设施的建设，培养人才精进团队，服务业务创造科技价值，译做有《编写可维护的 JavaScript》、《第三方 JavaScript 编程》等。

• 本文转自美团点评技术学院，未经做者许可，不容许私自转载！
• 加入美团云技术交流群（QQ群：469243579），每日分享更多精彩技术文章。