精确计时场景的常见方案

465 字

2 分钟

精确计时场景的常见方案

2025-08-07

前端

无标签

一些需要精确计时的场景#

NOTE

在线游戏

金融交易系统

多媒体应用

工业控制

实时监控平台

… …

常见方案#

1. 服务端主导的时间同步#

优势

误差可控制在 10-50ms 内

避免客户端时间篡改

支持多设备同步

时间同步示意图

简单示例：

1
// 客户端
2
async function syncTime() {
3
  const start = Date.now();
4
  const response = await fetch('/api/sync-time');
5
  const end = Date.now();
6

7
  const { serverTime } = await response.json();
8
  const networkDelay = (end - start) / 2;
9

10
  // 校正客户端时间
11
  const correctedTime = serverTime + networkDelay;
12
  return correctedTime;
13
}
14

15
// 服务端 (Node.js)
16
app.get('/api/sync-time', (req, res) => {
17
  res.json({ serverTime: Date.now() });
18
});

2.WebSocket 实时时序控制#

适用场景

多人在线游戏、实时协作工具

服务端示例：

1
// 服务端广播时序指令
2
const WebSocket = require('ws');
3
const wss = new WebSocket.Server({ port: 8080 });
4

5
setInterval(() => {
6
  const timestamp = Date.now();
7
  wss.clients.forEach(client => {
8
    if (client.readyState === WebSocket.OPEN) {
9
      client.send(JSON.stringify({
10
        type: 'SYNC_TIMER',
11
        payload: timestamp
12
      }));
13
    }
14
  });
15
}, 100); // 每100ms广播一次

客户端示例：

1
const ws = new WebSocket('ws://server-address');
2
ws.onmessage = (event) => {
3
  const data = JSON.parse(event.data);
4
  if (data.type === 'SYNC_TIMER') {
5
    // 执行需要精确时间的操作
6
    renderFrame(data.payload);
7
  }
8
};

3. Web Workers + 高精度 API#

TIP
关键API：

performance.now()：微秒级精度（不受系统时间影响）

performance.timeOrigin：页面加载起始时间点

简单示例：

1
// 在 Web Worker 中执行精确计时
2
let startTime;
3
self.onmessage = (e) => {
4
  if (e.data.command === 'start') {
5
    startTime = performance.now();
6
    setInterval(() => {
7
      const elapsed = performance.now() - startTime;
8
      self.postMessage({ elapsed });
9
    }, e.data.interval);
10
  }
11
};
12

13
// 主线程
14
const worker = new Worker('timer.worker.js');
15
worker.postMessage({ command: 'start', interval: 10 });
16
worker.onmessage = (e) => {
17
  console.log(`精确耗时: ${e.data.elapsed.toFixed(3)}ms`);
18
};