微信小程序前端性能监控（2）

本文分为两篇，认识与使用 performance，阅读各大约10分钟

01 基础数据的使用

上篇文章介绍了 performance API 提供的各时间节点，我们就可以用节点差值获取到各项重要指标，如：

重定向耗时 :

redirectEnd - redirectStart

DNS查询耗时：

domainLookupEnd - domainLookupStart

TCP链接耗时：

connectEnd - connectStart

HTTP请求耗时：

responseEnd - responseStart

解析dom树耗时：

domComplete - domInteractive

白屏时间：

responseStart - navigationStart

DOMready时间：

domContentLoadedEventEnd - navigationStart

onload时间：

loadEventEnd - navigationStart

当然，我们需要从多个维度获取数字来综合衡量结果，决不能一概而论。比如前端最重要的指标 - 白屏时间，各个公司对其计算统计的方式都不同，比如 Google 浏览器在这方面自行封装了 paint 绘制时间去计算

window.PerformancePaintTiming && performance.getEntriesByType('paint')[0].startTime

02 更多数据的筛选

performance.getEntries() 是当前缓冲区中的所有性能数据，也就是已抓到的数据。每一条数据都清晰记录了资源名称及各项时间戳

performance.getEntriesByType() 是当前缓冲区中所有类型为 [entryType] 的性能数据

我们通常可以获取导航计时数据计算白屏时间

performance.getEntriesByType('navigation')

我们通常可以获取基础资源下的各项指标筛选数据，如筛选出加载耗时超过多少毫秒的缓慢数据

performance.getEntriesByType('resource')

当然我们不满足其提供的API，也可以自行打点获取

performance.mark("start");

performance.getEntriesByName("start");

甚至可以中途监控各项资源加载的情况，编写更定制化的监控代码

performance.createObserver()

performanceObserver.observe()

结合以上内容，我们就可以编写自己的性能监控脚本了，小程序提供了测速上报API，当然我们也可以开发自己的监控后台展示上报数据。