在前端开发中，记录一个函数运行的时间是一个常见的需求，通常用于性能调优和调试。你可以使用 JavaScript 提供的 Date 对象或者 performance API 来实现这一功能。下面是两种方法的示例：
方法一：使用 Date 对象
Date 对象可以获取当前的时间戳，通过计算函数执行前后的时间差，可以得到函数的运行时间。
function logExecutionTime(fn) {const startTime = new Date().getTime();fn();const endTime = new Date().getTime();const executionTime = endTime - startTime;console.log(`Function execution time: ${executionTime}ms`);
}// 示例使用
function exampleFunction() {// 模拟一些耗时操作for (let i = 0; i < 1e6; i++) {// 空操作}
}logExecutionTime(exampleFunction);
方法二：使用 performance API
performance API 提供了更高精度的时间测量功能，适用于需要高精度测量的场景。
function logExecutionTime(fn) {const start = performance.now();fn();const end = performance.now();const executionTime = end - start;console.log(`Function execution time: ${executionTime.toFixed(2)}ms`);
}// 示例使用
function exampleFunction() {// 模拟一些耗时操作for (let i = 0; i < 1e6; i++) {// 空操作}
}logExecutionTime(exampleFunction);
比较
- 精度：
performanceAPI 通常比Date对象更精确，尤其是在需要测量短时间间隔时。 - 兼容性：
Date对象在所有现代浏览器中都有支持，而performanceAPI 在较新的浏览器中支持更好（IE 9 及以下版本不支持）。
通用封装
为了更通用，你可以将这个功能封装成一个通用的高阶函数，甚至可以扩展以支持异步函数。
同步函数版本
function logExecutionTime(fn) {return function (...args) {const start = performance.now();const result = fn(...args);const end = performance.now();const executionTime = end - start;console.log(`Function execution time: ${executionTime.toFixed(2)}ms`);return result;};
}// 示例使用
const exampleFunction = logExecutionTime(function() {// 模拟一些耗时操作for (let i = 0; i < 1e6; i++) {// 空操作}
});exampleFunction();
异步函数版本
对于异步函数，你需要稍微修改一下逻辑，以支持 Promise。
async function logExecutionTime(fn) {const start = performance.now();await fn();const end = performance.now();const executionTime = end - start;console.log(`Function execution time: ${executionTime.toFixed(2)}ms`);
}// 示例使用
async function exampleAsyncFunction() {// 模拟一些异步操作return new Promise(resolve => {setTimeout(() => {for (let i = 0; i < 1e6; i++) {// 空操作}resolve();}, 100); // 模拟延迟});
}logExecutionTime(exampleAsyncFunction);
以上方法可以帮助你在前端开发中方便地记录函数运行的时间，从而进行性能分析和优化。
