如何进行 web 性能监控，你的方法用对了吗？ _性能监控

也许你有听过一个问题，你这款 web 应用性能怎么样呀？你会回答什么呢？是否会优于海量 web 应用市场呢？本文就来整理下如何进行 web 性能监控？包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。但是，如何进行 web 性能监控本身是一个很大的话题，文中只会侧重一部分进行研究，某些内容不是很全面。
前言：为什么需要监控？web 的性能一定程度上影响了用户留存率，google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10% 。
我们希望通过监控来知道 web 应用性能的现状和趋势，找到 web 应用的瓶颈？某次发布后的性能情况怎么样？是否发布后对性能有影响？感知到业务出错的概率？业务的稳定性怎么样？
监控什么？我们需要监控些什么呢？有哪些具体的指标？
google 开发者提出了一种 RAIL 模型来衡量应用性能，即：Response、Animation、Idle、Load，分别代表者 web 应用生命周期的四个不同方面。并指出最好的性能指标是：
100ms 内响应用户输入，动画或者滚动需在 10ms 内产生下一帧，最大化空间时间、页面加载时长不超过 5 秒。

文章插图

我们可转化为三个方面来看：响应速度、页面稳定性、外部服务调用
响应速度：页面初始访问速度+交互响应速度
页面稳定性：页面出错率
外部服务调用：网络请求访问速度
1. 页面访问速度：白屏、首屏时间、可交互时间我们来看看 google 开发者针对用户体验，提出的几个性能指标

文章插图

这几个指标其实都是根据用户体验，提炼出对应的性能指标

文章插图

1）first paint (FP) and first contentful paint (FCP)首次渲染、首次有内容的渲染
The Paint Timing API
这两个指标浏览器已经标准化了，从 performance API 可以获取到，一般来说两个时间相同，但也有情况下两者不同。

文章插图

2）First meaningful paint and hero element timing首次有意义的渲染、页面关键元素
我们假设当一个网页的 DOM 结构发生剧烈的变化的时候，就是这个网页主要内容出现的时候，那么在这样的一个时间点上，就是首次有意义的渲染。这个指标浏览器还没有规范，毕竟很难统一一个标准来定义网站的主体内容。
google lighthouse 定义的 first meaningful paint：
https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view
3）Time to interactive可交互时间
4）长任务浏览器是单线程的，如果长任务过多，那必然会影响着用户响应时长。好的应用需要最大化空闲时间，以保证能最快响应用户的输入。

文章插图

2. 页面稳定性：页面出错情况资源加载错误
JS 执行报错
3. 外部服务调用CGI 耗时
CGI 成功率
CDN 资源耗时
监控的分类？web 性能监控可分为两类，一类是合成监控（Synthetic Monitoring，SYN），另一类是真实用户监控（Real User Monitoring，RUM）
合成监控合成监控是采用 web 浏览器模拟器来加载网页，通过模拟终端用户可能的操作来采集对应的性能指标，最后输出一个网站性能报告。例如：Lighthouse、PageSpeed、WebPageTest、Pingdom、PhantomJS 等。
1. LighthouseLighthouse 是 google 一个开源的自动化工具，运行 Lighthouse 的方式有两种：一种是作为 Chrome 扩展程序运行；另一种作为命令行工具运行。Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。通过命令行工具可以将 Lighthouse 集成到持续集成系统。
展示了白屏、首屏、可交互时间等性能指标和 seo、PWA 等。
腾讯文档移动端官网首页测速结果：