企业官网建设流程全解析

一、为什么浏览器定时器不精准？

1️⃣ JS 是单线程

• 主线程被占用 → 定时器回调延迟

• UI / 渲染 / GC 都会阻塞

2️⃣ 浏览器最小时间精度限制

• HTML5 规范限制（4ms）

• 后台 Tab 被强制降频（1000ms+）

3️⃣ setInterval 的“时间漂移”

setInterval(fn, 1000); // 实际执行时间 = 1000 + fn执行时间

👉时间会越来越不准

二、高精准定时器的核心思想（先记住）

不用“执行次数”计时，而用“时间戳”对齐真实时间。

三、高精准延时器（setTimeout 替代方案）⭐

实现：时间戳校正法

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

为什么准？

• 使用高精度时钟performance.now()

• 每帧校正误差

四、高精准定时器（setInterval 替代方案）⭐⭐

实现：递归 setTimeout + 时间修正

function preciseInterval(fn, interval) { let expected = performance.now() + interval; function step() { const drift = performance.now() - expected; fn(); expected += interval; setTimeout(step, Math.max(0, interval - drift)); } setTimeout(step, interval); }

核心点

• 不是简单等待 interval

• 每次都修正漂移

五、Web Worker 定时器（更准）🚀

为什么 Worker 更准？

• 不阻塞 UI 线程

• 不受页面渲染影响

worker.js

setInterval(() => { postMessage(Date.now()); }, 1000);

主线程

const worker = new Worker('worker.js'); worker.onmessage = () => { console.log('tick'); };

👉计时类、音频、监控系统首选

六、requestAnimationFrame 方案（适合动画）

let last = performance.now(); function rafTimer() { const now = performance.now(); if (now - last >= 1000) { console.log('tick'); last = now; } requestAnimationFrame(rafTimer); } rafTimer();

七、三种方案对比（面试必背）

八、延时器 vs 定时器（概念区分）

九、后台 / 锁屏问题（高级）

问题

• 浏览器后台 Tab 会降频

解决方案

• Web Worker

• Visibility API + 校正

• 服务端时间对齐

十、30 秒面试标准回答（直接背）

浏览器原生定时器会因主线程阻塞产生时间漂移；
高精准定时器应基于时间戳校正，而不是固定间隔；
可以通过递归 setTimeout、requestAnimationFrame 或 Web Worker 提升精度；
对精度要求极高的场景应使用 Worker 或服务端时间同步。