在前端开发中，我们常常需要计算一个事件或任务的执行时间。这个时间可以用于优化性能，衡量用户体验和测试代码效率等方面。在本文中，我们将探讨如何通过 JavaScript 来计算经过时间，并给出详细的指导和示例代码。
Performance.now()
在浏览器中，JavaScript 提供了 performance.now() 方法来获取当前时间戳。这个时间戳基于性能计时器（Performance Timing API）的高分辨率时钟，具有毫秒级别的精度，比 Date.now() 更加准确。
----- ----- - ------------------ -- ---- ----- --- - ------------------ ----- ------- - --- - ------ ------------------------------ -----
上面的代码演示了如何使用 performance.now() 来计算任务的执行时间。首先获取任务开始时的时间戳 start，然后执行任务，最后获取任务结束时的时间戳 end，两者相减就得到任务执行的时间 elapsed。最后将 elapsed 输出到控制台上。
requestAnimationFrame()
除了 performance.now() 之外，还可以使用 requestAnimationFrame() 方法来计算经过时间。这个方法可以在浏览器下一次重绘之前执行回调函数，通常用于动画效果的实现。因为 requestAnimationFrame() 的回调函数在刷新屏幕时才会执行，所以计算出来的时间更加精确。
--- ----- - ----- -------- ------------------ - -- -------- ----- - ---------- ----- ------- - --------- - ------ -------------------- ---------- ----- -- --------- ------------------------------- - -------------------------------
上面的代码演示了如何使用 requestAnimationFrame() 来计算动画的运行时间。首先定义一个名为 animate 的回调函数，它接收一个时间戳 timestamp 参数，用于计算动画的执行时间。在回调函数中，将第一次执行时的时间戳记录在变量 start 中，然后计算当前时间与起始时间之间的时间差 elapsed，最后输出到控制台上。
setTimeout()
除了上述两种方法之外，还可以使用 setTimeout() 方法来计算经过时间。这个方法可以让我们在指定的延迟时间后执行回调函数。
----- ----- - ----------- --------------------- - ----- --- - ----------- ----- ------- - --- - ------ ----------------------- --------------- ----- -- ------
上面的代码演示了如何使用 setTimeout() 来计算延迟任务的执行时间。首先获取任务开始时的时间戳 start，然后使用 setTimeout() 方法来延迟 1 秒钟，等待任务完成后再获取任务结束时的时间戳 end，两者相减就得到任务执行的时间 elapsed。最后将 elapsed 输出到控制台上。
总结
在本文中，我们讨论了如何通过 JavaScript 来计算经过时间。我们介绍了 performance.now()、requestAnimationFrame() 和 setTimeout() 三种方法，并给出了详细的指导和示例代码。这些技巧可以帮助我们优化性能、测试代码效率和改善用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13724