document.visibilityState 和 visibilitychange 事件结合优化性能

Dear 丶 2022-04-18 05:06 348阅读 0赞

一般在项目中，用户登录之后有消息通知的时候，用户头像上面会有一个消息数来提醒用户，但这个数字要保证新打开一个页面的时候是正确的，当切换浏览器的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/][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][https_developer.mozilla.org_en-US_docs_Web_API_Document_visibilityState]
2.  [https://www.w3.org/TR/page-visibility/][https_www.w3.org_TR_page-visibility]

[https_www.w3.org_TR_page-visibility]: https://www.w3.org/TR/page-visibility/
[https_developer.mozilla.org_en-US_docs_Web_API_Document_visibilityState]: https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState