浏览器窗口最小化的时候，setInterval 执行变慢，解决方案浏览器窗口最小化时，setInterval 的执行频率

方法一：使用 Web Worker 保持精确计时

1. 创建 Worker 文件（timer-worker.js）

// timer-worker.js
let intervalId = null;

self.addEventListener('message', (e) => {
  const { type, interval } = e.data;
  
  if (type === 'start') {
    // 停止已有的定时器
    if (intervalId) clearInterval(intervalId);
    // 启动新的定时器
    intervalId = setInterval(() => {
      self.postMessage('tick');
    }, interval);
  } else if (type === 'stop') {
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }
  }
});

2. 在主线程中使用 Worker

// 主线程代码
const worker = new Worker('timer-worker.js');

// 监听 Worker 发来的消息
worker.addEventListener('message', (e) => {
  if (e.data === 'tick') {
    // 这里执行原本需要定时执行的任务
    console.log('定时任务执行', new Date());
  }
});

// 启动定时器，间隔 1000ms
worker.postMessage({ type: 'start', interval: 1000 });

// 停止定时器
// worker.postMessage({ type: 'stop' });

优点：即使页面最小化或切换到后台，Worker 中的 setInterval 依然保持设定的频率。注意：Worker 中不能直接访问 DOM，需要通过 postMessage 与主线程通信，因此适合执行不直接操作页面的逻辑（如数据轮询、计时更新等）。

方法二：结合 Page Visibility API 动态调整策略

如果无法使用 Worker（例如需要频繁操作 DOM），可以监听页面的可见性变化，当页面变为不可见时，改用更宽松的策略，但无法彻底避免频率限制。

let intervalId = null;
let isPageVisible = true;

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  isPageVisible = !document.hidden;
  
  if (isPageVisible) {
    // 页面可见时恢复原有频率
    startTimer(1000);
  } else {
    // 页面不可见时，可以延长间隔或停止某些非关键任务
    // 但无法强制浏览器按原频率执行
  }
});

function startTimer(interval) {
  if (intervalId) clearInterval(intervalId);
  intervalId = setInterval(() => {
    console.log('任务执行', new Date());
  }, interval);
}

startTimer(1000);

局限：浏览器仍会限制后台页面的计时器频率，因此无法真正“解决”变慢问题，只能根据场景适配。

方法三：使用 setTimeout 递归 + 时间补偿

通过记录实际执行时间与预期时间的偏差，动态调整下一次 setTimeout 的延迟，可以在一定程度上缓解频率降低带来的累积误差，但依然无法绕过浏览器的底层限制。

let expectedTime = 0;
let timeoutId = null;

function scheduleTask(interval) {
  if (timeoutId) clearTimeout(timeoutId);
  
  const now = Date.now();
  if (expectedTime === 0) {
    expectedTime = now + interval;
  } else {
    expectedTime += interval;
  }
  
  const delay = Math.max(0, expectedTime - now);
  timeoutId = setTimeout(() => {
    // 执行实际任务
    console.log('任务执行', new Date());
    scheduleTask(interval);
  }, delay);
}

scheduleTask(1000);

说明：这种方法可以确保任务在后台仍按设定的间隔执行，但 setTimeout 同样受浏览器限制（最小间隔通常为 1 秒），所以实际效果有限。

总结

如果定时任务不涉及 DOM 操作（如轮询数据、发送请求、计时更新），Web Worker 是最佳选择，能完美解决后台频率限制问题。
如果必须操作 DOM，则只能接受浏览器对后台页面的优化，并结合可见性 API 调整业务逻辑。

选择哪种方案取决于你的具体需求。

在 vue3中如何使用

1. 创建 Worker 文件

在 src/workers 目录下创建 timer.worker.js：

// src/workers/timer.worker.js
let intervalId = null

self.addEventListener('message', (e) => {
  const { type, interval } = e.data

  if (type === 'start') {
    if (intervalId) clearInterval(intervalId)
    intervalId = setInterval(() => {
      self.postMessage('tick')
    }, interval)
  } else if (type === 'stop') {
    if (intervalId) {
      clearInterval(intervalId)
      intervalId = null
    }
  }
})

注意：如果使用 Vite，可以直接用 ?worker 后缀导入，也可以使用 new Worker(new URL(...)) 方式（推荐）。

2. 封装一个组合式函数（Composable）

创建一个 useWorkerTimer.ts（或 .js）：

// composables/useWorkerTimer.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useWorkerTimer(interval = 1000, autoStart = true) {
  const worker = ref(null)
  const tick = ref(0)          // 计数，可用来触发响应式更新
  const isRunning = ref(false)

  // 初始化 Worker
  const initWorker = () => {
    // 兼容 Vite 的导入方式（推荐）
    worker.value = new Worker(new URL('../workers/timer.worker.js', import.meta.url))

    worker.value.addEventListener('message', (e) => {
      if (e.data === 'tick') {
        tick.value++          // 每次触发都会更新，可驱动视图
      }
    })
  }

  // 启动定时器
  const start = () => {
    if (!worker.value) initWorker()
    worker.value?.postMessage({ type: 'start', interval })
    isRunning.value = true
  }

  // 停止定时器
  const stop = () => {
    worker.value?.postMessage({ type: 'stop' })
    isRunning.value = false
  }

  // 清理 Worker
  const terminate = () => {
    stop()
    if (worker.value) {
      worker.value.terminate()
      worker.value = null
    }
  }

  // 自动管理生命周期
  onMounted(() => {
    if (autoStart) start()
  })

  onUnmounted(() => {
    terminate()
  })

  return {
    tick,          // 响应式计数，可在模板中显示
    isRunning,     // 运行状态
    start,
    stop,
    terminate
  }
}

3. 在 Vue 组件中使用

<template>
  <div>
    <p>Worker 定时器已运行：{{ tick }} 次</p>
    <button @click="start" :disabled="isRunning">启动</button>
    <button @click="stop" :disabled="!isRunning">停止</button>
  </div>
</template>

<script setup>
import { useWorkerTimer } from '@/composables/useWorkerTimer'

// 间隔 1000ms，自动启动
const { tick, isRunning, start, stop } = useWorkerTimer(1000, true)
</script>

4. 进阶：传递数据与主线程交互

如果需要在 Worker 中执行更复杂的任务（例如发起网络请求），可以通过 postMessage 传递数据。 Worker 端接收数据

// timer.worker.js
self.addEventListener('message', async (e) => {
  const { type, payload } = e.data
  if (type === 'fetch') {
    const res = await fetch(payload.url)
    const data = await res.json()
    self.postMessage({ type: 'fetchResult', data })
  }
})

主线程发送并接收结果

// 在组件中
worker.value?.postMessage({
  type: 'fetch',
  payload: { url: 'https://api.example.com/data' }
})

worker.value?.addEventListener('message', (e) => {
  if (e.data.type === 'fetchResult') {
    console.log('获取到数据：', e.data.data)
  }
})

5. 注意事项

Worker 文件路径在 Vite 中，使用 new URL('../workers/timer.worker.js', import.meta.url) 可以保证开发和生产环境路径正确。如果使用 Vue CLI，可以简单用 new Worker('@/workers/timer.worker.js')，但需要确保 Webpack 正确处理。
响应式数据更新通过 tick 的更新可以驱动视图重新渲染，这是通过 Vue 的响应式系统自动完成的。
生命周期清理在组件卸载时，务必调用 worker.terminate() 避免内存泄漏。上面封装的 useWorkerTimer 已处理。
兼容性 Web Worker 支持现代浏览器及移动端，如果需要兼容非常古老的浏览器，可使用降级方案（如 fallback 到 setInterval）。

总结

在 Vue 3 中使用 Web Worker 保持精确计时，只需三步：

创建独立的 Worker 文件，内部使用 setInterval 并 postMessage 通知主线程。
封装组合式函数管理 Worker 生命周期（创建、启动、停止、销毁）。
在组件中调用该函数，即可享受不受页面可见性影响的稳定定时器。

这种方式非常适合轮询、实时数据更新、倒计时等需要精确计时的业务场景。