文章目录
  1. 1. visibilitychange
  2. 2. visibilityState

一般在项目中,用户登录之后有消息通知的时候,用户头像上面会有一个消息数来提醒用户,但这个数字要保证新打开一个页面的时候是正确的,当切换浏览器的tab再回来的时候还要保证正确性。

说到这可能有人觉得放一个定时器,过一段时间去获取一次不就可以了,但这样会相当耗性能,使用定时器,这个页面就算被隐藏(非当前标签页、最小化)也会去一直执行这个定时器,这就相当消耗资源,而且这个页面放很久的话,还会造成页面卡死的问题。下面介绍一个方法解决这个问题。

visibilitychange

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

1
document.addEventListener('visibilitychange', handleVisibilityChange, false);

要对上面的问题做优化,首先就要能够监听浏览器标签页的显示隐藏,visibilitychange事件刚好满足。现在事件可以监听到了,就要在事件中判断当前标签页是否显示,然后执行相应的事件就能解决上面的问题。

visibilityState

document.visibilityState (只读属性), 返回document的可见性,,可用的值如下:

  1. visible:页面内容可以至少部分可见。实际上,这意味着页面是非最小化窗口的前景选项卡;
  2. hidden:页面内容对用户不可见。实际上,这意味着文档可以是后台选项卡,也可以是最小化窗口的一部分,或者OS屏幕锁定处于活动状态;
  3. prerender:页面内容正在预呈现,并且对用户不可见(被视为隐藏用途document.hiddendocument.hidden只读属性,返回布尔值,表示页面是(true)否(false)隐藏))。文档可以在此状态下启动,但永远不会从另一个值转换到它。注意:浏览器支持是可选的。

实际上这里我测试了用document.visibilityStatedocument.hidden都可以达到相同的效果,但是这里https://www.w3.org/TR/page-visibility/ 推荐使用document.visibilityState

具体方案如下:

1
2
3
4
5
6
7
8
9
// 首次加载页面去获取设置消息数
setHeadImgBadge();
// 添加监听事件
document.addEventListener("visibilitychange", function () {
if (document.visibilityState == "visible") {
//页面激活的时候再次获取设置消息数
setHeadImgBadge();
}
}, false);

按照上面的例子,每次新进入页面就去获取设置最新的消息数,当此页面再次被激活(用户切换到此标签页)的时候再去获取设置最新的消息数,就能保证用户看到的消息数永远是正确的了,而且不会存在定时器不断获取设置的问题,还能减轻服务器端压力。

参考:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
  2. https://www.w3.org/TR/page-visibility/
文章目录
  1. 1. visibilitychange
  2. 2. visibilityState