javascript - 当选项卡没有焦点时，浏览器*不会*做什么处理/呈现？

Question

我有一个显示实时统计信息的页面。它运行大量 javascript，发出大量 HTTP 请求，使用 D3.js 每隔几秒渲染一次 SVG 图表，具有大量 CSS 动画，并频繁重新排列 DOM。

只要页面有焦点，就可以流畅运行。如果我切换到另一个选项卡并稍后返回，通常会出现短暂的停顿，页面似乎被卡住，然后 View 突然似乎重新呈现并且页面再次可用。选项卡背景化的时间越长，暂停的时间就越长。如果选项卡在后台运行了很长时间(数小时)并且我切换回它，它会卡住很长时间然后崩溃。

在 Chrome 中观察到所有这些行为。我没有在其他浏览器中测试太多。

当我第一次切换回标签页时，Chrome 在暂停期间做了什么？

Answer 1

您正在运行一个 setInterval 或一系列 setTimeout。
每个人都排队等待在您在函数中指定的点之后运行。

Google 将您页面上的所有内容限制为每秒更新几次......因此，如果您将计时器设置为移动物体并以 30fps 或其他速度设置动画，那么您将让 Google 触发一轮更新(无论您安排什么)，这无疑会调用请求另一次更新的内容，这将请求另一个...

...当您切换回来时，您有数百(或数万)个这些更新等待发生，现在不是以 30fps 发生，而是有一堆这些事情在等待...所有他们已经过了“不要运行，直到……”的时间，他们都将尝试尽可能快地更新，直到您再次 catch 计时器的当前位置。

如果浏览器支持页面可见性 API 的组件，则在页面不可见时暂停调用。

if (!document.hidden) { doStuff(); }

或

document.addEventListener("visibilitychange", function (evt) {
    if (evt.visibilityState === "hidden") { myApp.pause(); }
    else if (evt.visibilityState === "visible") { myApp.resume(); }
});

如果它不支持 API，那么您可以尝试使用 window.onblur 或其他方式对其进行 polyfill。
也就是说，如果浏览器不支持页面可见性 API，它也可能不会对页面代码进行硬核节流。
这不是 100% 的保证，而是半可能性。