javascript - 页面生命周期 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')):

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

---

正在关注 https://www.lifewire.com/chrome-91-brings-freeze-tab-groups-to-google-s-browser-5186266 :

Basically, when you’ve grouped several tabs together and collapsed them, Chrome 91 automatically will freeze the pages contained within those tabs to keep them from pulling resources from your computer.

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

2. 折叠标签组。

3. 展开选项卡组。

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

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

默认情况下，capture 为 false。

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

One thing to note about the above code is that all the event listeners are added to window and they all pass {capture: true}. There are a few reasons for this:

• Not all Page Lifecycle events have the same target. pagehide, and pageshow are fired on window; visibilitychange, freeze, and resume are fired on document, and focus and blur are fired on their respective DOM elements.
• Most of these events do not bubble, which means it's impossible to add non-capturing event listeners to a common ancestor element and observe all of them.
• The capture phase executes before the target or bubble phases, so adding listeners there helps ensure they run before other code can cancel them.

---

什么没用:

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