当前位置：首页 > JavaScript

js实现keepalive

2026-03-15 02:00:04JavaScript

使用 Web Workers 实现后台保持活跃

Web Workers 可以在后台线程中运行脚本，避免阻塞主线程。通过创建一个简单的 Worker 定期执行空操作，可以防止页面因长时间不活跃而被浏览器休眠。

// 创建 worker.js 文件
self.onmessage = function(e) {
  if (e.data === 'keepalive') {
    setInterval(() => {}, 10000);
  }
};

// 主线程中
const worker = new Worker('worker.js');
worker.postMessage('keepalive');

利用 requestAnimationFrame 保持动画循环

requestAnimationFrame 会告诉浏览器你希望执行动画，通常用于保持页面活跃状态。

function keepAlive() {
  setTimeout(() => {
    requestAnimationFrame(keepAlive);
  }, 20000);
}
keepAlive();

定时发送 Beacon API 请求

Beacon API 允许异步发送小量数据，适合保持连接活跃而不影响页面性能。

setInterval(() => {
  navigator.sendBeacon('/keepalive', '');
}, 30000);

WebSocket 心跳机制

建立 WebSocket 连接后，通过定期发送心跳包保持连接活跃。

const socket = new WebSocket('wss://example.com');
const heartbeatInterval = 15000;

socket.addEventListener('open', () => {
  setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send('heartbeat');
    }
  }, heartbeatInterval);
});

Service Worker 后台同步

Service Worker 可以在后台运行，即使页面关闭也能保持某些活动。

// 注册 service worker
navigator.serviceWorker.register('sw.js').then(() => {
  setInterval(() => {
    navigator.serviceWorker.controller.postMessage('keepalive');
  }, 25000);
});

// sw.js 中
self.addEventListener('message', (event) => {
  if (event.data === 'keepalive') {
    // 保持活跃
  }
});

隐藏的音频或视频元素

某些浏览器会保持媒体播放的页面活跃状态。

js实现keepalive

const audio = new Audio();
audio.src = 'data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...';
audio.loop = true;
audio.volume = 0;
audio.play().catch(e => {});

每种方法都有不同的适用场景和浏览器兼容性考虑，应根据具体需求选择最合适的方案。Web Workers 和 Service Worker 提供最可靠的后台执行能力，而简单的 requestAnimationFrame 或 Beacon API 适合轻量级需求。