性能指标数据收集

上述性能指标工具的能力已经足够强大，覆盖信息也很全面，但如果我们需要将页面性能指标数据收集并上报又该怎么办呢？

首先排除的肯定是通过 性能指标工具 的方式来收集，一旦要检测性能指标数据意味着得是不同的客户端统计数据的结果合集（除非你愿意一台一台客户端来手动记录和收集数据，呸，你愿意你领导还不愿意呢），最理想的方式当然是自动收集和上报，那就意味着这应该是代码要干的活！！！

既然有这样的需求，那么必定有对应的解决方案，您接着往下看！

Performance API

实际上在浏览器端的全局对象 window 上有一个名为 performance 的属性，它是一个用于支持 IE9 以上及 webkit 内核浏览器中用于记录页面 加载 和 解析 过程中关键时间点的机制，其兼容性在 caniuse 中的表现如下：

下面就简单介绍一下和 window.performance 相关一些核心属性和方法。

performance.timing 属性

performance.timing 属性中提供了很多关键的时间信息，我们可以通过这些时间节点来简单的计算出需要的性能指标数据（不一定准确），计算方式如：

const {
 domainLookupStart,
 domainLookupEnd,
 navigationStart,
 loadEventEnd,
 responseStart,
 responseEnd,
 connectStart,
 connectEnd,
 redirectStart,
 redirectEnd,
 domContentLoadedEventEnd,
 domComplete,
} = performance.timing
// DNS 查询时间
DNS = domainLookupEnd - domainLookupStart
// TCP 建立连接时间
TCP = connectEnd - connectStart
// 页面重定向时间
Redirect = redirectEnd - redirectStart
// 首字节到底时间
TTFB = responseStart - navigationStart
// 首次渲染时间
FP = responseStart - navigationStart
// DOM 解析时间
DOM = domComplete - responseEnd
// 首屏时间
LCP = loadEventEnd - navigationStart
复制代码

performance.getEntries() 方法

performance.getEntries() 方法可以获取所有资源请求的时间数据，如下：

点击可查看具体的资源信息，其他属性和上述内容有重复，就不在额外介绍计算方式了，具体如下：

performance.now() 方法

performance.now() 方法可以精确计算程序执行时间，它会返回以微秒（百万分之一秒）为单位的时间，即更加精准，这也是它和 Date.now() 是不同点：

• Date.now() 返回自 1970年1月1日 00:00:00 (UTC) 到 当前时间 的 毫秒数

• 意味着 Date.now() 依赖于系统的当前时间，而系统时间可以被认为修改，因此它的毫秒数并不准确

• performance.now() 的时间是以恒定速率递增的，不受系统时间的影响

// Date.now()
let a = 2, b = 3;
const begin = Date.now();
console.log(' a + b = ', a + b);
console.log('time = ', Date.now() - begin); // 2
// performance.now()
let a = 2, b = 3;
const begin = performance.now();
console.log(' a + b = ', a + b);
console.log('time = ', performance.now() - begin); // 0.10000002384185791
复制代码

Web Vitals

web-vitals 库是 Google 推出的一个小型（约 1.5K）模块化库，用于测量真实用户的所有 Web Vitals 相关的指标，其重要核心指标信息如下（一图胜千言）：

接下来，让我们通过 npx create-react-app my-react-app 来创建一个 react 项目，然后观察一下它的项目结构：

是不是超级显眼的 reportWebVitals.js，在进入文件查看你会发现我们需要的核心性能指标都在里面：

最后

前端性能优化这个内容是之前一直打算要写的，终归知识有所欠缺，到现在也算是边学习边输出中，下一篇 就针对性能优化的方案进行一些总结！！！

如果以上内容对你有所帮助，来个一键三连，需要光的力量！！！