教程文档【免费下载链接】jstutorialJavascript tutorial book项目地址https://gitcode.com/gh_mirrors/js/jstutorial点击查看免费下载页面可见性是前端工程师最容易忽略、却在移动端与后台任务场景中至关重要的一环。本文以 jstutorial 仓库中 htmlapi/pagevisibility.md 为骨架结合仓库内 dom/document.md、jquery/basic.md、bom/window.md 等配套文档系统讲解 Page Visibility API 的三大核心成员document.visibilityState、document.hidden、visibilitychange事件及其在页面卸载监听、轮询暂停、动画与媒体播放控制中的实战用法帮助读者掌握一套比beforeunload/unload更可靠的页面生命周期感知方案。为什么需要 Page Visibility API传统上开发者通常监听下面三个事件来判断用户是否离开当前页面pagehidebeforeunloadunload问题的关键在于在手机上这些事件可能根本不会发生页面就直接被关闭了。因为手机操作系统可能会直接清除浏览器进程导致这些事件无法触发。典型场景包括用户点击了一条系统通知切换到另一个 App。用户进入任务切换窗口切换到另一个 App。用户点击了 Home 按钮切换回主屏幕。操作系统自动切换到另一个 App比如收到一个电话。上面这些情况都会导致浏览器进程切换到后台。为了节省资源手机可能就会自动终止一些后台进程而传统事件监听无法感知这一切。为了解决这个问题Page Visibility API 应运而生。不管是手机还是桌面电脑所有情况下这个 API 都会监听到页面可见性的变化——即使进程被系统切换或清除可见性状态的变化也总是可以被捕获。除了判断网页卸载监听页面可见性还可以用来暂停或终止下面这些网页行为以便节省资源、减缓电能的消耗对服务器的轮询网页动画正在播放的音频或视频从仓库结构看jstutorial 将本文档归入 htmlapi 目录HTML API 专题与 fullscreen.md、requestanimationframe.md、websocket.md 等一同构成浏览器能力图谱而在 dom/document.md 的“文档状态属性”一节中document.hidden与document.visibilityState也被明确标注为“Page Visibility API 引入的”属性可见该 API 是贯穿 DOM 文档模型与 HTML 能力层的基础设施。document.visibilityState页面当前的可见状态Page Visibility API 主要在document对象上新增了一个document.visibilityState属性。该属性返回一个字符串表示页面当前的可见性共有三个可能的值hidden页面彻底不可见。visible页面完全可见或一部分可见。prerender页面即将或正在渲染处于不可见状态。其中hidden状态和visible状态是所有浏览器都必须支持的prerender状态只在支持“预渲染”的浏览器上才会出现。比如 Chrome 浏览器就有预渲染功能可以在用户不可见的状态下预先把页面渲染出来等到用户要浏览的时候直接展示渲染好的网页。需要特别注意visible的判定边界只要页面可见哪怕只露出一个角document.visibilityState就返回visible。只有以下四种情况才会返回hidden浏览器最小化。浏览器没有最小化但是页面切换成了背景页。浏览器将要卸载unload页面。操作系统触发锁屏屏幕。可以看到上面四种场景涵盖了页面可能被卸载的所有情况。也就是说页面卸载之前document.visibilityState属性一定会变成hidden。事实上这也是设计这个 API 的主要目的。此外早期版本的 API 中这个属性还有第四个值unloaded表示页面即将卸载现在已经被废弃了。仓库中较早编写的 dom/document.md 仍保留着四种取值的旧版描述阅读时需注意以本文档为准。关于作用范围还有一条容易踩坑的规则document.visibilityState只针对顶层窗口。内嵌的iframe页面的document.visibilityState由顶层窗口决定——使用 CSS 属性隐藏iframe页面比如display: none;并不会影响内嵌页面的可见性。document.hidden历史遗留的布尔值由于历史原因这个 API 还定义了document.hidden属性。该属性只读返回一个布尔值表示当前页面是否可见当document.visibilityState返回visible时document.hidden返回false其他情况下都返回true。需要明确的是该属性只是出于历史原因而保留的。只要有可能都应该使用document.visibilityState属性而不是使用document.hidden。因为字符串状态比布尔值携带了更多信息例如prerender状态无法用布尔值表达且document.visibilityState才是规范演进的方向。仓库中 dom/document.md 对document.hidden的描述也与之一致窗口最小化、浏览器切换 Tab 都会导致该属性返回true。visibilitychange 事件跟踪可见性变化的标准入口只要document.visibilityState属性发生变化就会触发visibilitychange事件。因此可以通过监听这个事件——使用document.addEventListener()方法或document.onvisibilitychange属性——来跟踪页面可见性的变化。最基本用法如下document.addEventListener(visibilitychange, function () { // 用户离开了当前页面 if (document.visibilityState hidden) { document.title 页面不可见; } // 用户打开或回到页面 if (document.visibilityState visible) { document.title 页面可见; } });上面代码是 Page Visibility API 的最基本用法可以监听可见性变化并即时反馈到页面标题上。下面是一个更贴近实际业务的例子一旦页面不可见就暂停视频播放回到页面时恢复播放。var vidElem document.getElementById(video-demo); document.addEventListener(visibilitychange, startStopVideo); function startStopVideo() { if (document.visibilityState hidden) { vidElem.pause(); } else if (document.visibilityState visible) { vidElem.play(); } }这套“进入后台即暂停、回到前台即恢复”的模式同样适用于轮询请求、动画循环和音频播放是移动端省电、省流量的核心手段。在 jQuery 项目中监听 visibilitychange对于使用 jQuery 的项目仓库的 jquery/basic.md 给出了“检查用户是否切换浏览器 tab”的等价写法事件对象上的target指向document可以直接读取visibilityState$(document).on(visibilitychange, function (e) { if (e.target.visibilityState visible) { console.log(Tab is now in view!); } else if (e.target.visibilityState hidden) { console.log(Tab is now hidden!); } });两种写法本质相同addEventListener是原生 API 的标准入口jQuery 的.on()则提供了统一的跨浏览器绑定语法适合已经全面引入 jQuery 的页面。页面卸载为什么 visibilitychange 比 unload 更可靠下面专门讨论一个实践中的高频问题如何正确监听页面卸载。页面卸载可以分成三种情况页面可见时用户关闭 Tab 页或浏览器窗口。页面可见时用户在当前窗口前往另一个页面。页面不可见时用户或系统关闭浏览器窗口。这三种情况都会触发visibilitychange事件。前两种情况该事件在用户离开页面时触发最后一种情况该事件在页面从可见状态变为不可见状态时触发。由此可见visibilitychange事件比pagehide、beforeunload、unload事件更可靠所有情况下都会触发从visible变为hidden。因此可以只监听这个事件运行页面卸载时需要执行的代码而无需监听后面那三个事件。甚至可以这样说unload和beforeunload事件在任何情况下都不必监听。仓库中 bom/window.md 列出了window对象上的相关事件监听属性可作为对比参照window.onbeforeunloadbeforeunload事件的监听函数。window.onpagehidepagehide事件的监听函数。window.onunloadunload事件的监听函数。虽然这些监听属性在window上均可挂载但正如上文分析移动端进程被系统回收时它们无法可靠触发而 Page Visibility API 通过可见性状态的变化为“页面即将结束”提供了一个全覆盖的信号——这正是它作为卸载监听替代方案的根本原因。实践建议围绕可见性构建资源管控综合本文内容可将 Page Visibility API 的典型落地场景归纳如下卸载清理在visibilitychange中检测hidden状态统一执行数据上报、草稿保存、连接释放等收尾逻辑替代不可靠的unload系列事件。轮询暂停页面进入后台时停止对服务器的轮询请求如股票行情、消息提醒接口回到前台时立即恢复并主动拉取一次最新数据。动画与渲染降级后台时暂停requestAnimationFrame动画循环或 CSS 动画配合 requestanimationframe.md 中介绍的定时器方案一起使用降低 CPU 与电池消耗。媒体播放控制如本文视频示例所示hidden时暂停音视频、visible时恢复避免后台持续播放浪费流量。页面标题反馈切换 Tab 时通过修改document.title提示用户有内容更新提升回访体验。需要重申两条边界document.visibilityState与visibilitychange只作用于顶层窗口iframe 内页面的可见性由顶层窗口决定同时优先使用visibilityState而非历史遗留的document.hidden。延伸阅读Page Visibility API 原始文档本文的骨架与规范解读来源。文档状态属性document.hidden 与 visibilityStateDOM 视角下的属性说明与早期unloaded取值记录。jQuery 事件绑定中的 visibilitychange 示例jQuery 项目中的等价监听写法。window 对象的事件监听属性beforeunload、pagehide、unload等传统卸载事件在window上的挂载方式。requestAnimationFrame 专题页面动画与后台渲染控制的配合方案。以上内容均可在本仓库中对照查阅结合源码文档理解 API 的行为细节与演进脉络。赞分享教程文档【免费下载链接】jstutorialJavascript tutorial book项目地址https://gitcode.com/gh_mirrors/js/jstutorial点击查看免费下载相关推荐对比评测ICT-FaceKit Light与完整版模型的功能差异对比评测ICT FaceKit Light与完整版模型的功能差异 ICT FaceKit是由ICT视觉与图形实验室开发的可变形人脸模型工具包提供了从人脸建模ahooks useDocumentVisibility 深度解析基于 Page Visibility API 监听页面可见状态的 React Hookahooks useDocumentVisibility 深度解析基于 Page Visibility API 监听页面可见状态的 React Hook 导读前端3步快速部署打造企业级AI对话平台全攻略3步快速部署打造企业级AI对话平台全攻略 Chatbot UI是一款基于Next.js 14构建的开源AI对话界面支持集成OpenAI、Anthropic、人工智能AI 应用前端后端交互助手上一篇用 Go 打造 90DaysOfDevOps 进度推文机器人Twitter API 接入、推文发送与跨平台编译实战Day 13下一篇终极指南Nuclide模板导入验证全流程——从语法检查到错误处理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考