document.visibilityState 和 visibilitychange 事件结合优化性能「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

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

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

visibilitychange

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

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

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

visibilityState

document.visibilityState （只读属性）, 返回document的可见性,，可用的值如下：

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

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

具体方案如下：

// 首次加载页面去获取设置消息数
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/