页面生命周期 API - 是否可以手动冻结页面

Question

我正在尝试查看freeze和resume事件（来自Page Lifecycle API）是否适用于我的应用程序，以处理窗口/选项卡被浏览器冻结后重新加载内容的需要。

但我不知道如何模拟或手动触发选项卡被冻结。我什至尝试让浏览器超载内容以尝试触发事件。

freeze我有简单的事件侦听器来在触发或resume触发事件时运行 console.log 。

有人知道如何触发选项卡的冻结状态吗？到目前为止我还找不到任何提及此事的内容。

window.addEventListener('freeze', (event) => {
  console.log('freeze', event);
});

window.addEventListener('resume', (event) => {
  console.log('resume', event);
});

Answer 1

使用https://whatwebcando.today/freeze-resume.html进行测试（其中使用document.addEventListener(\'freeze\')和document.addEventListener(\'resume\')）：

\n

\n
• Chrome 100 表示同时支持document.onfreeze和。document.onresume
\n
• Firefox 99 报告称它不支持这些。
\n

\n\n

以下https://www.lifewire.com/chrome-91-brings-freeze-tab-groups-to-google-s-browser-5186266：

\n

\n

基本上，当您\xe2\x80\x99将多个选项卡组合在一起并折叠它们时，Chrome 91会自动冻结这些选项卡中包含的页面，以防止它们从您的计算机中提取资源。

\n

\n

\n

1. 将选项卡（例如https://whatwebcando.today/freeze-resume.html或您自己的带有事件侦听器的 HTML 页面）放入选项卡组中。

   \n
\n

2. 折叠选项卡组。

   \n
\n

3. 展开选项卡组。

   \n
\n

4. 立即检查选项卡，控制台应记录freeze和resume事件。但是，它仅对我有用 {capture: true}（请参阅https://whatwebcando.today/freeze-resume.html）：

   \n

   window.addEventListener(\'freeze\', (event) => {\n  console.log(\'freeze\', event);\n}, {capture: true});\n\nwindow.addEventListener(\'resume\', (event) => {\n  console.log(\'resume\', event);\n}, {capture: true});\n

   \n
\n

\n

默认capture为 false。

\n

来自https://developer.chrome.com/blog/page-lifecycle-api/：

\n

\n

上面的代码需要注意的一点是，所有的事件监听器都被添加进去了window，并且都通过了{capture: true}。造成这种情况的原因有以下几个：

\n

\n
• 并非所有页面生命周期事件都有相同的目标。pagehide，并被pageshow射击window；visibilitychange、freeze、 和在 、 和resume上触发document，在它们各自的 DOM 元素上触发focus。blur
\n
• 大多数这些事件不会冒泡，这意味着不可能将非捕获事件侦听器添加到公共祖先元素并观察所有这些事件。
\n
• 捕获阶段在目标阶段或冒泡阶段之前执行，因此在其中添加侦听器有助于确保它们在其他代码取消它们之前运行。
\n

\n

\n\n

什么不起作用：

\n

\n
• 从https://www.howtogeek.com/444481/how-chromes-tab-freezing-will-save-cpu-and-battery/阅读，可能是以前版本的 Chrome 允许冻结 ; 中列出的选项卡chrome://discards。但是，该Freeze链接在最新的 Chrome 中已不再存在。
\n
• 设置断点Sources并恢复不会触发这些事件。
\n

\n