Web前端之JavaScript时间体系全解析、performance、Date、now

Date 对象体系

Date是JavaScript最早期提供的时间API（ES1就有），主要和真实世界的时间打交道。

---

创建时间

// 当前时间
new Date();
// 指定年月日时分秒（注意月份从0开始）
new Date(2025, 7, 23, 22, 30);
// ISO 8601格式
new Date("2025-08-23T22:30:00Z");
// 传入时间戳（ms）
new Date(1724431500000);

---

获取时间戳

// 当前时间戳（ms，整数）
Date.now();
// 等价于 Date.now()
+new Date();
// 同样效果
new Date().getTime();

🔹 基准点：1970-01-01 00:00:00 UTC（Unix Epoch）。
🔹 精度：毫秒（整数）。
🔹 缺点：受系统时间修改影响，比如用户把电脑时间调快/慢。

---

获取时间字段

let d = new Date();

d.getFullYear();
d.getMonth();
d.getDate();
d.getHours();
d.getMinutes();
d.getSeconds();
d.getMilliseconds();
d.getDay();

还有对应的UTC版本（getUTCFullYear()等）。

---

设置时间字段

d.setFullYear(2030);
d.setMonth(11);
d.setDate(31);
d.setHours(23, 59, 59, 999);

Date.now()

1、返回一个当前时间戳（毫秒整数）
2、适合：
2.1、存数据库
2.2、日志记录
2.3、时间差计算（但精度不高）

let start = Date.now();
// do something
let end = Date.now();

console.log(`耗时: ${end - start}ms`);

问题：受系统时间修改影响，用户改了电脑时钟就会跳。

performance.now()

这是 高精度时间API，在HTML5 Performance API中引入。
特点：
1、返回一个 浮点数（毫秒，小数点后三位以上，微秒级精度）
2、基准点是performance.timeOrigin（通常是页面导航/加载的起点）
3、不受系统时间修改影响

let t0 = performance.now();
// do something
let t1 = performance.now();

console.log(`精确耗时: ${t1 - t0}ms`);

用途：
精确测量代码执行时间
动画帧时间戳
Web性能分析

new Date()

返回一个Date对象，可以格式化、转换、运算。
既能用作时间戳（getTime()），也能当字符串（toISOString()）。

let now = new Date();

// 2025-08-23T15:00:00.000Z
console.log(now.toISOString());
// 本地化时间
console.log(now.toLocaleString());

其它常见时间相关API

Intl.DateTimeFormat

用于本地化时间格式化

new Intl.DateTimeFormat('zh-CN', { 
  dateStyle: 'full', 
  timeStyle: 'long' 
}).format(new Date());
// "2025年8月23日星期六 中国标准时间 下午11:30:00"

setTimeout / setInterval

基于系统时间调度，延迟/周期执行。
但不保证精确（可能被浏览器限流或阻塞）。

setTimeout(() => console.log("延迟执行"), 1000);

requestAnimationFrame

和屏幕刷新率同步的计时器，适合动画

function loop(ts) { // ts = performance.now()
  console.log(ts);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

三者核心对比

对比

API	返回值	基准点	精度	是否受系统时间影响	用途
Date.now()	毫秒整数	1970-01-01 UTC	毫秒	✅ 会	时间戳、日志
performance.now()	毫秒浮点	页面加载时刻	微秒级	❌ 不会	性能测量、动画
new Date()	Date对象	1970-01-01 UTC	毫秒	✅ 会	时间运算、显示

---

总结选用策略
需要“绝对时间”（日志、存储、显示）：
👉 Date.now()或new Date()

---

需要“相对时间/精确间隔”（性能测试、动画）：
👉 performance.now()

---

需要完整日期对象（格式化、运算）：
👉 new Date()