零散专题36 前端性能监控

性能监控指标

本文主要从三个角度来进行性监控：

1. 白屏时间：从浏览器响应用户输入网址地址，到开始显示内容的时间。
2. 首屏时间：从浏览器响应用户输入网址地址，到首屏内容渲染完成的时间。
3. 页面渲染帧率FPS：理论不应低于60FPS

Performance API

window.performance对象提供了一组精确的数据，经过简单的计算就能够得出一些网页性能数据。

注意，现在查到的大多数文章使用的API都是performance.timing这个接口，这个接口返回一个PerformanceTiming对象，包含了页面相关的性能信息，但是这个接口已经被废弃，这样它上面定义的大量的属性，例如navigationStart都已经被废弃，应该使用performance.timeOrigin来代替。

为什么会被废弃呢？因为W3C提供了更全面、更强大的性能分析矩阵，其中最重要的工具之一就是High Resuolution Time这个基础的API，可以提供比Date.now()更精准的时间戳。

所有的规范都是基于这个高精度的时间规范。Date对象提取的时间单位都是毫秒，而使用performance.now()（或者其他performance获取到的时间单位）单位也是毫秒，但是返回变量精度达到了小数点后面10位以上，也就是说，performance.now()精度可以达到微妙级别的精度，精度更高。

performance.now()

performance.now()的返回值是一个高精度的时间戳，它与Date.now()的主要区别是：

（1）