怎么使用Performance监控前端性能

Performance.now

Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。

performance.now()方法返回一个精确到毫秒的 DOMHighResTimeStamp 。

根据 MDN :

这个时间戳实际上并不是高精度的。为了降低像Spectre这样的安全威胁，各类浏览器对该类型的值做了不同程度上的四舍五入处理。(Firefox从Firefox 59开始四舍五入到2毫秒精度)一些浏览器还可能对这个值作稍微的随机化处理。这个值的精度在未来的版本中可能会再次改善;浏览器开发者还在调查这些时间测定攻击和如何更好的缓解这些攻击。

因为，要计算一个函数的执行时间，分别比较函数执行前和执行后的两次 performance.now()的值即可，如下所示：

在第二次调用forEach的情况下，其执行效果应该是和使用for循环相同。考虑到初始值较慢，在一些性能要求极高的项目，可能就不适合使用forEach。

在多个浏览器中测试

如果我们在Chrome中运行上述代码，结果又会不一样：

这是因为Chrome和Firefox具有不同的JavaScript引擎，它们具有不同类型的性能优化。

在本例中，Firefox 在对相同输入的forEach进行优化方面做得更好。

for在两个引擎上的性能都更好，因此在一些性能要求极高的项目就需要使用for循环。

这是为什么要在多个引擎中进行测量的一个很好的例子。只使用Chrome作为度量标准可能导致你得出结论，forEach与for相比并不那么糟糕。

限制的 CPU

在本地测试时得到的结果不代表用户在浏览器中的使用情况，因为我们开发者使用的电脑通常比大多数用户的电脑配置更好。

浏览器有一个特性可以限制CPU性能，我们通过设置可以更贴切一些真实情况。