setTimeout定时器不准,webwork解决浏览器限制实现定时器

527 阅读1分钟

当浏览器页面处于非活跃状态时,setTimeout、setInterval等定时器会被浏览器性能限制,导致延迟非常严重,1s定时越来越慢,变成2s、3s……

Chrome、Firefox 可能还有其他浏览器会将调用这些定时器的频率限制为每秒最多一次。不过,这仅适用于主线程,并不影响Web Workers的行为。因此,可以通过使用worker线程来执行实际的调度来避免这种限制。

【解决方案】使用webwork实现定时器、心跳

// webwork里的代码
const WorkerCode = () => {
  const _self = self
  setInterval(() => {
    _self.postMessage('heart')
  }, 1000)
}
// 把脚本代码转为string
let code = WorkerCode.toString()
// 将代码块取出
code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'))

const blob = new Blob([code], { type: 'application/javascript' })
const url = URL.createObjectURL(blob)
const worker = new Worker(url)

worker.onmessage = (e) => {
  if (e.data !== 'heart') return
  // 收到work消息,执行定时器
  onHeart()
}