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

优 势

• 误差可控制在 10-50ms 内
• 避免客户端时间篡改
• 支持多设备同步

简单示例：

// 客户端
async function syncTime() {
  const start = Date.now();
  const response = await fetch('/api/sync-time');
  const end = Date.now();
  
  const { serverTime } = await response.json();
  const networkDelay = (end - start) / 2;
  
  // 校正客户端时间
  const correctedTime = serverTime + networkDelay;
  return correctedTime;
}

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

2.WebSocket 实时时序控制#

适 用 场 景

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

服务端示例：

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

setInterval(() => {
  const timestamp = Date.now();
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify({
        type: 'SYNC_TIMER',
        payload: timestamp
      }));
    }
  });
}, 100); // 每100ms广播一次

客户端示例：

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

3. Web Workers + 高精度 API#

TIP

关键API：

• performance.now()：微秒级精度（不受系统时间影响）
• performance.timeOrigin：页面加载起始时间点

简单示例：

// 在 Web Worker 中执行精确计时
// timer.worker.js
let startTime;
self.onmessage = (e) => {
  if (e.data.command === 'start') {
    startTime = performance.now();
    setInterval(() => {
      const elapsed = performance.now() - startTime;
      self.postMessage({ elapsed });
    }, e.data.interval);
  }
};

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

1.分层控制策略#

2.黄金法则#

WARNING

• 关键时间判断必须在服务端执行
• 客户端只做可视化展示
• 所有时间敏感操作附带时间戳
• 使用 ISO 8601 格式传输时间