网页可见性

最近项目需要统计游戏在线时长,当数据量大的时候可以忽略一些特殊情况的数据(浏览器最小化、页面菜单切换、锁屏等)。但是在数据量少的情况下,需要把这些特殊情况排除掉,避免数据收到干扰。针对这种情况,浏览器有自带一种api,用来监听网页的可见性。本文针对这种情况,做个小测试。

1、Page Visibility API

  • Document.hidden:如果页面处于隐藏状态,则返回 true,否则返回 false
  • Document.visibilityState:
    • visible:页面内容至少部分可见
    • hidden:页面内容对用户不可见,原因可能是文档标签页在后台或属于最小化窗口的一部分,也可能是设备屏幕关闭。
  • visibilitychange:当标签页的内容变为可见或被隐藏时触发。

2、web页面生命周期

  • 获取当前页面生命周期状态
javascript 复制代码
    let eventName="visibilitychange",propName="hidden", stateName="visibilityState";
    ["webkit", "moz", "ms", "o"].every(m=>{
        if (typeof document[m+"Hidden"] !== 'undefined') {
            eventName = `${m}visibilitychange`;
            propName = `${m}Hidden`;
            stateName=`${m}VisibilityState`;
        }
    })
    const getState = () => {
            if (document[stateName] === 'hidden') {
                return 'hidden';
            }
            if (document.hasFocus()) {
                return 'active';
            }
            return 'passive';
    };

2、测试案例

javascript 复制代码
    let eventName="visibilitychange",propName="hidden", stateName="visibilityState";
    ["webkit", "moz", "ms", "o"].every(m=>{
        if (typeof document[m+"Hidden"] !== 'undefined') {
            eventName = `${m}visibilitychange`;
            propName = `${m}Hidden`;
            stateName=`${m}VisibilityState`;
        }
    })
    const getState = () => {
            if (document[stateName] === 'hidden') {
                return 'hidden';
            }
            if (document.hasFocus()) {
                return 'active';
            }
            return 'passive';
    };
    let timer = null; count = 0;
    document.addEventListener(eventName,()=>{
        if (document[propName]) {
            console.log("==>>隐藏");
            count=0;
            clearTimeout(timer);
        } else {
            console.log("==>>显示");
            loop("重新")
        }
        console.log(`==>>状态:${getState()}`);
    })
    const loop=(title)=>{
         timer=setTimeout(() => {
            count++;
            console.log(`==>>${title}定时任务:${count}`);
            console.log(`==>>状态:${getState()}`);
            loop(title);
        }, 3000)
    }

    loop("开始");
    window.addEventListener("blur",()=>{
        console.log("==>失去焦点");
    })

注意:如果当前页面仍是处于激活页面,就应该参考是否要通过全局添加事件监听,来判断用户是否有在操作,还是单纯挂机

3、使用场景

  • 暂停服务器接口轮询
  • 停止网页上动画、视频、音频等播放
  • 暂停游戏
  • 监控页面等

4、参考:

相关推荐
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding10 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景10 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui