前端实时数据刷新方案：WebSocket、轮询与后台同步

务必在页面卸载或不再需要时清除定时器，防止内存泄漏：

window.addEventListener('beforeunload', () => {
  clearInterval(intervalId);
});

惰性轮询（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);
}

相比 setInterval，这种方式能有效避免请求堆积，适用于绝大多数业务场景。

Web Worker 轮询

普通的前端轮询在页面切到后台或被浏览器节流时，定时器可能会变慢甚至暂停。Web Worker 提供了一个独立的后台线程，不受主线程渲染和 JS 阻塞的影响，非常适合做常驻刷新任务。

为什么使用 Web Worker？

• 独立线程：不阻塞主线程，不影响页面交互。
• 后台稳定：页面隐藏或最小化时，Worker 仍能相对稳定地执行。
• 兼容性好：IE10+ 及所有现代浏览器均支持。

Vue2 实现示例

首先需要安装依赖并配置 Webpack：

npm install worker-loader --save-dev

在 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);
  }
};

在 Vue 组件中使用：

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

export default {
  mounted() {
    this.worker = new PollWorker();
    this.worker.onmessage = (e) => {
      console.log('新数据:', e.data.data);
      // this.list = 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);
      // list.value = 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 是专为 PWA 设计的 API，基于 Service Worker 运行。它能在页面完全关闭后仍在后台定时执行网络任务，解决了 Worker 被销毁或后台轮询失效的问题。

核心机制

• 注册：在 Service Worker 中注册唯一标签和最小间隔。
• 调度：由浏览器内核接管，在设备联网、充电或闲置时触发。
• 持久化：注册后跨会话生效，直到主动取消。

代码示例

主线程注册：

navigator.serviceWorker.ready.then(async (registration) => {
  if (!registration.periodicSync) return;
  try {
    await registration.periodicSync.register('order-sync', {
      minInterval: 4 * 60 * 60 * 1000 // 每 4 小时
    });
    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 暂不支持。
• 需用户授予'后台同步'权限。
• 触发时机受浏览器策略影响（电量、网络、活跃度），minInterval 仅为下限。

requestIdleCallback

requestIdleCallback 允许在主线程空闲时段执行非紧急任务，避免长任务阻塞渲染。适合用于数据预加载、日志上报等不影响核心体验的场景。

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 允许同一个后台线程被多个标签页共享。这非常适合多标签页需要同步状态的场景，例如全局通知栏或统一的数据源管理。

共享线程文件 shared.worker.js：

let timer = null;
let ports = [];

self.onconnect = (e) => {
  const port = e.ports[0];
  ports.push(port);
  port.start();

  port.onmessage = (e) => {
    if (e.data === 'start') {
      startPoll();
    }
  };
};

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');

总结

• WebSocket：实时性最高，适合聊天、监控等强实时场景。
• 惰性轮询：实现简单，兼容性好，适合大多数常规刷新需求。
• Web Worker：解决后台节流问题，适合长时间运行的轮询任务。
• Background Sync：PWA 专用，支持页面关闭后的同步，但兼容性有限。
• rIC：优化非关键任务的执行时机，提升页面流畅度。
• SharedWorker：多标签页共享状态，减少重复请求。

开发者应根据具体的业务需求、性能预算及目标用户的浏览器环境，灵活组合上述方案。