前端实时数据刷新方案：WebSocket、轮询与 Worker 实战

页面离开或不再需要轮询时，必须清除定时器。推荐在 beforeunload 事件中清除。

惰性轮询（setTimeout 递归）

为了解决请求堆积问题，可以使用递归的 setTimeout。规则是：等上一次请求完成（成功或失败）后，再延迟指定时间发起下一次请求。

let timerId = null;

async function polling() {
  try {
    const res = await fetch('/api/your-data-endpoint');
    const data = await res.json();
    updateUI(data);
  } catch (err) {
    console.error('请求失败:', err);
  } finally {
    // 关键：无论成功失败，3 秒后再执行下一次
    timerId = setTimeout(polling, 3000);
  }
}

// 启动轮询
polling();

// 停止轮询
function stopPolling() {
  clearTimeout(timerId);
}

Web Worker 轮询

Web Worker 最大作用是开启一个独立后台线程，不受主线程阻塞、页面切后台也不会被浏览器严重节流，用来做轮询非常稳。

为什么要用 Web Worker？

普通 setInterval 在页面切后台时会被浏览器节流甚至暂停，JS 执行卡顿也会导致定时器不准。Web Worker 拥有独立线程，不会被 DOM 渲染或 JS 阻塞影响，兼容性也极好（IE10+ 及所有现代浏览器）。

Vue2 写法

需要先安装依赖并配置 webpack。

npm install worker-loader -D

vue.config.js 配置：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        { test: /\.worker\.js$/, use: { loader: 'worker-loader' } }
      ]
    }
  }
}

创建 src/utils/poll.worker.js：

// 后台轮询线程
let timer = null;

self.onmessage = (e) => {
  const { type, interval } = e.data;
  
  if (type === 'start') {
    clearInterval(timer);
    timer = setInterval(async () => {
      try {
        const res = await fetch('/api/notice');
        const data = await res.json();
        self.postMessage({ status: 'success', data });
      } catch (err) {
        self.postMessage({ status: 'error', msg: err.message });
      }
    }, interval);
  }
  
  if (type === 'stop') {
    clearInterval(timer);
  }
};

页面使用（Vue2 示例）：

import PollWorker from '@/utils/poll.worker.js';

export default {
  mounted() {
    this.worker = new PollWorker();
    this.worker.onmessage = (e) => {
      console.log('新数据：', e.data.data);
    };
    this.worker.postMessage({ type: 'start', interval: 3000 });
  },
  beforeDestroy() {
    this.worker.postMessage({ type: 'stop' });
    this.worker.terminate();
  }
};

Vue3 + Vite 写法

Vite 内置支持 Web Worker，语法更简洁。

<script setup>
import { onMounted, onUnmounted } from 'vue';
import PollWorker from '@/utils/poll.worker?worker';

let worker = null;

onMounted(() => {
  worker = new PollWorker();
  worker.onmessage = (e) => {
    if (e.data.status === 'success') {
      console.log('后台刷新数据：', e.data.data);
    }
  };
  worker.postMessage({ type: 'start', interval: 3000 });
});

onUnmounted(() => {
  if (worker) {
    worker.postMessage({ type: 'stop' });
    worker.terminate();
  }
});
</script>

注意： Worker 在使用结束后必须销毁，否则会导致内存泄露。

Periodic Background Sync

Periodic Background Sync 基于 Service Worker 运行，不受页面生命周期影响，专门用于后台定时同步数据。它是专为 PWA 设计的 API，完美解决 Worker 销毁和后台轮询失效的问题。

核心机制

• 注册：在 Service Worker 注册时，指定唯一标签和最小间隔。
• 调度：浏览器内核接管计时，在设备联网、充电、闲置等低干扰时机触发。
• 执行：唤醒 Service Worker，触发 periodicsync 事件。
• 持久化：注册后跨会话生效，直到主动取消。

代码示例

注册（主线程）

navigator.serviceWorker.ready.then(async (registration) => {
  if (!registration.periodicSync) return;
  try {
    // 注册：每 4 小时同步一次
    await registration.periodicSync.register('order-sync', {
      minInterval: 4 * 60 * 60 * 1000
    });
    console.log('周期性同步注册成功');
  } catch (err) {
    console.error('注册失败', err);
  }
});

监听与执行（Service Worker）

// sw.js
self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'order-sync') {
    event.waitUntil(
      fetch('/api/order/sync')
        .then(res => res.json())
        .then(data => {
          return caches.open('order-cache').then(cache => {
            return cache.put('/api/order/latest', new Response(JSON.stringify(data)));
          });
        })
        .catch(err => console.error('同步失败', err))
    );
  }
});

限制说明：目前 Chrome、Edge 支持较好；Firefox、Safari 暂不支持。需用户授予权限，且触发时间受浏览器策略调整（如电量、网络状态）。

requestIdleCallback

requestIdleCallback（简称 rIC）是浏览器提供的主线程闲时调度 API，专门用来执行非紧急任务，避免长任务卡住渲染。

浏览器每帧约 16ms，如果 JS 执行提前完成，剩余时间就是空闲时段。rIC 回调就在这个时段执行。

const handle = requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && taskQueue.length > 0) {
    const task = taskQueue.shift();
    doHeavyWork(task);
  }
  if (taskQueue.length > 0) {
    requestIdleCallback(handle);
  }
}, { timeout: 2000 });

// 取消
cancelIdleCallback(handle);

SharedWorker

SharedWorker 是可以被多个标签页共享的同一个后台线程。相比普通 Worker，它能实现全局轮询和多页同步，避免重复请求。

共享线程文件 shared.worker.js

let timer = null;
let ports = [];

self.onconnect = (e) => {
  const port = e.ports[0];
  ports.push(port);
  
  port.onmessage = (e) => {
    if (e.data === 'start') startPoll();
  };
  port.start();
};

function startPoll() {
  if (timer) return;
  timer = setInterval(async () => {
    const res = await fetch('/api/notice');
    const data = await res.json();
    ports.forEach(port => port.postMessage(data));
  }, 3000);
}

页面中使用

const worker = new SharedWorker('/shared.worker.js');
const port = worker.port;
port.start();

port.onmessage = (e) => {
  console.log('新消息：', e.data);
};

port.postMessage('start');