当前位置：首页 > news >正文

时间差值工具Date.now()和performance.now()

news 2025/8/20 5:58:36

深入解析 performance.now()

performance.now()是 JavaScript 中用于高精度时间测量的关键 API，特别适合性能测试和基准测试场景。下面我将从多个维度详细解释它的工作原理和特点

基本概念

performance.now()返回一个以毫秒为单位的 DOMHighResTimeStamp，具有以下核心特性：
高精度：精度可达微秒级（最高可达5微秒，取决于浏览器和设备）
单调递增：时间值永远不会减小（不受系统时间调整影响）
相对时间：返回的是从"时间原点"（performance.timeOrigin）开始的毫秒数

与传统时间API的对比

工作原理

1、时间原点(timeOrigin)：
2、执行流程：
表示页面开始加载的时间点
可通过 performance.timeOrigin获取
performance.now()返回的是相对于这个原点的偏移量

const start = performance.now();
// 执行要测量的代码
const end = performance.now();
const duration = end - start; // 精确的执行时间console.log(`执行耗时: ${duration } ms`)

关键特点详解

1. 高精度测量

// 测量一个函数的执行时间
function measure() {const start = performance.now();// 被测代码let sum = 0;for(let i = 0; i < 1000000; i++) {sum += i;}const end = performance.now();console.log(`执行耗时: ${(end - start).toFixed(3)}ms`);
}

2. 不受系统时间影响

// 即使系统时间被修改，测量结果仍然准确
const start = performance.now();
setTimeout(() => {const end = performance.now();console.log(`实际耗时: ${end - start}ms`); // 正确console.log(`Date.now()差值: ${Date.now() - new Date(start).getTime()}ms`); // 可能错误
}, 1000);

3. 跨环境一致性

浏览器中：从 performance.timeOrigin开始计算
Node.js中：从进程启动时间开始计算
Web Worker中：从Worker创建时间开始计算

1. 性能基准测试

function benchmark(fn, times = 1000) {const start = performance.now();for(let i = 0; i < times; i++) {fn();}const end = performance.now();return (end - start) / times;
}

2. 帧率(FPS)计算

let lastTime = performance.now();
let frameCount = 0;function checkFPS() {frameCount++;const now = performance.now();if(now - lastTime >= 1000) {console.log(`FPS: ${frameCount}`);frameCount = 0;lastTime = now;}requestAnimationFrame(checkFPS);
}

3. 超时精确控制

function preciseTimeout(fn, duration) {const start = performance.now();function check() {if(performance.now() - start >= duration) {fn();} else {requestAnimationFrame(check);}}check();
}

总结

performance.now()是前端性能测量的黄金标准，它提供了：
微秒级的高精度计时
稳定可靠的单调计时
不受系统时间干扰的测量结果
丰富的配套API支持复杂性能分析
在上一篇文章中Map与Array.find()性能对比中，正是依靠performance.now()的高精度特性，我们才能准确捕捉到两种方法之间微小的性能差异，特别是在数据量较小时的区别。对于任何需要精确测量的JavaScript性能分析场景，performance.now()都是不二之选。

查看全文

http://www.dtcms.com/a/338616.html