你的函数有多快？使用 performance 监控前端性能

要比较两个函数哪个性能更好，一个直观且公平的方法就是计算两个函数分别执行完的时间。

良好的性能更容易好的用户体验，而好的用户体验更能留住用户。研究表明，由于性能问题，在88％的在线消费者对用户体验不满意后，他们不太可能会二次使用。

这也是为什么要提高性能的一个重要原因。特别是使用 JS 开发时，编写的每一行 JS 都可能会阻塞DOM，因为它是单线程语言。

本次分享，我们主要介绍如何计算函数的性能。

Performance.now

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

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

根据 MDN :

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

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

const t0 = performance.now();
for (let i = 0; i