HTML5 API：HTML5 Page Visibility API - 完整教程与代码示例

// 当前可见性状态
document.visibilityState  // 'visible' 或 'hidden'

// 页面是否隐藏
document.hidden  // true 或 false

// 可见性变化事件
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 页面隐藏
    } else {
        // 页面可见
    }
});

// 检查当前状态
if (document.hidden) {
    console.log('页面当前不可见');
} else {
    console.log('页面当前可见');
}

// 监听变化
document.addEventListener('visibilitychange', function() {
    console.log('可见性变化:', document.visibilityState);
});

// 1. 暂停/恢复动画
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        animation.pause();
    } else {
        animation.resume();
    }
});

// 2. 暂停/恢复视频
document.addEventListener('visibilitychange', function() {
    const video = document.querySelector('video');
    if (document.hidden) {
        video.pause();
    } else {
        video.play();
    }
});

// 3. 减少网络请求频率
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        stopPolling();
    } else {
        startPolling();
    }
});

// 4. 记录页面停留时间
let visibleTime = 0;
let lastVisible = Date.now();

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        visibleTime += Date.now() - lastVisible;
    } else {
        lastVisible = Date.now();
    }
});

// 配合 requestAnimationFrame
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        cancelAnimationFrame(animFrameId);
    } else {
        animFrameId = requestAnimationFrame(animate);
    }
});

// 配合 Web Workers
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        worker.postMessage({ type: 'pause' });
    } else {
        worker.postMessage({ type: 'resume' });
    }
});

// 配合 WebSocket
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 降低心跳频率
    } else {
        // 恢复正常心跳
    }
});

// 记录用户活跃时间
let sessionStart = Date.now();
let activeTime = 0;
let lastActive = Date.now();

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        activeTime += Date.now() - lastActive;
    } else {
        lastActive = Date.now();
    }
});

// 页面卸载时上报
window.addEventListener('beforeunload', function() {
    if (!document.hidden) {
        activeTime += Date.now() - lastActive;
    }
    const totalSession = Date.now() - sessionStart;
    const activeRatio = (activeTime / totalSession * 100).toFixed(1);
    // 上报数据: navigator.sendBeacon('/analytics', ...)
});