浏览器 tab 切换

切换事件

浏览器会暂停当前标签页渲染和 JavaScript 执行（尤其是与页面渲染相关的任务），以便将资源转移到新的标签页

ex: Tab1 -> Tab2

Tab1 会经历以下状态:

  • visibilitychange 事件: 浏览器会发出一个 visibilitychange 事件，指示当前页面是否可见

  • 浏览器会暂停不必要的操作，例如暂停动画、网络请求、定时器 (setTimeout,setInterval)，但这并不是强迫性的

Tab2 会经历以下状态:

  • 浏览器会为 Tab2 激活并恢复相关的渲染和脚本执行。 Tab2 也会触发 visibilitychange 事件，但是 Tab2 页面中， document.hidden 会被设置为 false

资源管理

  • 资源释放: 浏览器会逐渐释放页面不再活跃时使用的部分资源，为了节省内存和处理能力

  • 继续后台任务: 某些操作仍然会在后台运行，例如 web workers 或持久化的后台同步任务，可以使用 visibilitychange 事件来处理这些任务，确保他们在标签页切换时继续或暂停

关于设计切换页面计时器

使用 web worker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// timeWorker.js
let count = 0;

setInterval(() => {
  count++;
  postMessage(count);
}, 1000);

// main.js

const worker = new Worker("timerworker.js");

worker.onmessage = (event) => {
  const count = event.data;
  console.log("time:", count);
};

worker.onerror = (error) => {
  console.error("Worker error:", error);
};

恶搞博客标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = "👀跑哪里去了~";
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = "🐖抓到你啦～";
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = OriginTitile;
    }, 2000);
  }
});

原理很简单，只需监听 visibilitychange 事件即可