写一个方法记录函数运行的时间

在前端开发中，记录一个函数运行的时间是一个常见的需求，通常用于性能调优和调试。你可以使用 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);

比较

• 精度：performance API 通常比 Date 对象更精确，尤其是在需要测量短时间间隔时。
• 兼容性：Date 对象在所有现代浏览器中都有支持，而 performance API 在较新的浏览器中支持更好（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);

以上方法可以帮助你在前端开发中方便地记录函数运行的时间，从而进行性能分析和优化。