js常见问题

Chrome 88后更新了更为激进的省电策略^[1]，导致后台非活动页面中setInterval、setTimeout回调的执行间隔拉长到1分钟以上。

这里有一种很巧妙的方法可以强制标签页不进入非活动状态（利用了播放视频时标签页不会休眠的机制），而且不需要改动业务代码，只需要将下面的代码放到页面JS脚本中执行即可：

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

参考：https://www.zhihu.com/question/263914822