浏览器定时器被延迟

浏览器优化策略

浏览器优化策略是指浏览器为了提高性能和节省资源而对特定任务执行进行的优化。在后台标签页中，浏览器可能会对一些任务进行节流或延迟执行，以减少CPU和电池的消耗。

Google Chrome的”快速强化节流”功能可以在10秒后停止后台页面加载JavaScript元素，而之前的限制是5分钟，Google解释说。对于在后台加载的页面，在10秒后激活密集节流，而不是默认的5分钟。强化节流将限制唤醒，从具有高嵌套级别的setTimeout和setInterval任务以及延迟的scheduler.postTask任务，最多每分钟1次。

解决方法

• 服务端发送心跳，最靠谱

• web worker，可能会被延迟，service worker

• 播放视频时标签页不会休眠的机制，不过对于Safari，该方法无效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const chromeVersion = /Chrome\/([0-9.]+)/
  .exec(window?.navigator?.userAgent)?.[1]
  ?.split('.')[0];

if (chromeVersion && parseInt(chromeVersion, 10) >= 88 && !isMobile()) {
  const videoDom = document.createElement('video');
  const hiddenCanvas = document.createElement('canvas');

  videoDom.setAttribute('style', 'display:none');
  videoDom.setAttribute('muted', '');
  videoDom.muted = true;
  videoDom.setAttribute('autoplay', '');
  videoDom.autoplay = true;
  videoDom.setAttribute('playsinline', '');
  hiddenCanvas.setAttribute('style', 'display:none');
  hiddenCanvas.setAttribute('width', '1');
  hiddenCanvas.setAttribute('height', '1');
  hiddenCanvas.getContext('2d')?.fillRect(0, 0, 1, 1);
  videoDom.srcObject = hiddenCanvas?.captureStream();
}

web worker

使用 Web Workers 是一种在浏览器中运行后台线程的方式，可以避免主线程的阻塞，并实现并行处理。然而，即使使用 Web Workers，心跳请求仍然可能会受到浏览器的延迟影响。目前看不会节能。

虽然 Web Workers 可以在后台独立运行，并脱离主线程的限制，但它们仍然受到浏览器的资源限制和策略限制。浏览器可能会对 Web Workers 的执行进行一定程度上的节流、延迟或暂停，特别是对于非活动的标签页或后台标签页中运行的 Web Workers。

另外，需要注意的是，Web Workers 与主线程之间的通信是通过消息传递机制实现的，这在一些情况下可能会导致通信的延迟。

因此，虽然使用 Web Workers 可以一定程度上减少心跳被浏览器延迟的可能性，但它并不能完全保证心跳请求的实时性和及时性。为了确保可靠的心跳机制，建议仍然由服务器发起心跳请求，并在客户端通过定时器或其他方式，尽量减少心跳被延迟的情况发生。

socketio

心跳是由服务器端发起的;

高版本的是由服务端定时发起ping。而在2.X的版本中内置的心跳机制是由客户端定时发起;