乐趣区

关于前端:使用JavaScript检测空闲的浏览器选项卡可以做些什么

jiezi

在某些状况下，当用户与咱们的最终产品或应用程序进行交互时，咱们发现自己会执行许多密集的，占用大量 CPU 的工作。启动轮询器，建设 WebSocket 连贯，甚至加载视频或图片等媒体，都有可能成为性能阻碍，尤其是当这些工作在不须要的状况下耗费资源的时候。在用户没有被动与界面交互的同时，从不必要的工作负载或网络申请中开释主线程是一个十分好的和有意义的实际。换一种形式，在大多数主机提供商都在引入基于配额的定价模式的行业中，缩小网络申请也能够升高运行应用程序或服务的老本。

页面可见性（Page Visibility）API

所有古代的网页浏览器都退出了页面可见性 API，它容许咱们检测浏览器的标签页何时被暗藏，此外，咱们还能够注册一个事件监听器，以检测可见性变动时的信号。

document.visibilityState

当页面处于前台时，document.visibilityState 可能是 visible，最小化窗口的“标签”或暗藏。

咱们能够通过以下形式间接拜访 document.visibilityState：

console.log(document.visibilityState);
// => 它能够是“visible”或“hidden”

visibilitychange Event

咱们还能够应用事件侦听器轻松检测可见性属性中的更改。

const onVisibilityChange = () => {if (document.visibilityState === 'hidden') {console.log('> 这个窗口是暗藏的.');
  } else {console.log('> 这个窗口是可见的.');
  }
};
document.addEventListener('visibilitychange', onVisibilityChange, false);

轮询示例

思考一种状况，在这种状况下，咱们正在轮询 API 以获取更新，并且心愿防止对闲暇用户进行不必要的调用。一个简化的示例如下所示：

const poll = () => {
  const interval = 1500;
  let _poller = null;
  const repeat = () => {console.log(`~ Polling: ${Date.now()}.`);
  };

  return {start: () => {_poller = setInterval(repeat, interval);
    },
    stop: () => {console.log('~ Poller stopped.');
      clearInterval(_poller);
    }
  };
};

const poller = poll();
poller.start();

const onVisibilityChange = () => {if (document.visibilityState === 'hidden') {poller.stop();
  } else {poller.start();
  }
};

document.addEventListener('visibilitychange', onVisibilityChange, false);

在后盾异步加载

但有时咱们能够通过反其道而行之，减速用户的终端体验。咱们能够异步加载内部依赖或资产，而不是勾销所有的作业和申请。这样，当用户回来时，他们的最终体验将更加“空虚”并且丰盛。

Webpack

应用 ES2015 动静导入倡议和适当的 Webpack 配置清单，咱们能够轻松地在后盾加载额定的模块或资产。

let loaded = false;
const onVisibilityChange = () => {if (document.visibilityState === 'hidden') {
    // Aggresively preload external assets ans scripts
    if (loaded) {return;}
    Promise.all([import('./async.js'),
      import('./another-async.js'),
      import(/* webpackChunkName: "bar-module" */ 'modules/bar'),
      import(/* webpackPrefetch: 0 */ 'assets/images/foo.jpg')
    ]).then(() => {loaded = true;});
  }
};

document.addEventListener('visibilitychange', onVisibilityChange, false);

Rollup

Rollup 还反对开箱即用的动静导入。

let loaded = false;
const onVisibilityChange = () => {if (document.visibilityState === 'hidden') {
    // Aggresively preload external assets ans scripts
    if (loaded) {return;}
    Promise.all([import('./modules.js').then(({default: DefaultExport, NamedExport}) => {// do something with modules.})
    ]).then(() => {loaded = true;});
  }
};

document.addEventListener('visibilitychange', onVisibilityChange, false);

用 Javascript 预加载

除了应用捆绑器，咱们还能够仅应用几行 JavaScript 来预加载动态资源（例如图像）。

let loaded = false;

const preloadImgs = (...imgs) => {const images = [];
  imgs.map(
    url =>
      new Promise((resolve, reject) => {images[i] = new Image();
        images[i].src = url;
        img.onload = () => resolve();
        img.onerror = () => reject();
      })
  );
};

const onVisibilityChange = () => {if (document.visibilityState === 'hidden') {
    // Aggresively preload external assets ans scripts
    if (loaded) {return;}
    Promise.all(
      preloadImgs(
        'https://example.com/foo.jpg',
        'https://example.com/qux.jpg',
        'https://example.com/bar.jpg'
      )
    )
      .then(() => {loaded = true;})
      .catch(() => {console.log('> Snap.');
      });
  }
};

document.addEventListener('visibilitychange', onVisibilityChange, false);

微互动

最初，一种吸引用户注意力的奇妙办法是动静更改图标，只需应用几个像素就能够放弃交互。

const onVisibilityChange = () => {const favicon = document.querySelector('[rel="shortcut icon"]');
  if (document.visibilityState === 'hidden') {favicon.href = '/come-back.png';} else {favicon.href = '/example.png';}
};

document.addEventListener('visibilitychange', onVisibilityChange, false);

参考资料

  • Page Visibility in W3C
  • Document.visibilityState in MDN
  • Document API: visibilityState browser support
  • ES2015 dynamic imports with Webpack -Dynamic imports with Rollup
退出移动版