- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
在现代 Web 开发中,用户可能会频繁切换标签页,或让网页处于后台运行。为了避免不必要的资源浪费并提升用户体验,合理利用 Page Visibility API 可以在页面不可见时暂停或减少资源的消耗,并在页面重新可见时恢复正常操作.
在这篇博客中,我将展示如何通过 Page Visibility API 实现以下场景:
Page Visibility API 是一个浏览器提供的 API,它可以告诉我们页面的可见性状态。当页面变为不可见时,我们可以暂停一些不必要的操作,比如动画或媒体播放。这个 API 提供了两个核心功能:
document.hidden
:返回一个布尔值,指示页面当前是否隐藏。document.visibilityState
:返回页面的可见性状态,可以是 'visible'
(页面可见)、'hidden'
(页面隐藏)或 'prerender'
(页面正在预渲染)。visibilitychange
事件:当页面的可见性状态(document.visibilityState
)改变时触发。visibilityState
的作用document.visibilityState 提供比 document.hidden 更直观的信息。它不仅告诉你页面是否隐藏,还能进一步区分页面是否正在预渲染。例如,你可以根据不同的状态采取不同的优化措施.
虽然 Page Visibility API 很有用,但它的兼容性在不同浏览器中略有差异。以下是各主流浏览器的支持情况:
Document.hidden
和 document.visibilityState
浏览器 | 支持情况 | 版本 |
---|---|---|
Chrome | 支持 | 自 33 版本起 |
Firefox | 支持 | 自 18 版本起 |
Safari | 支持 | 自 7 版本起 |
Edge | 支持 | 自 12 版本起 |
Opera | 支持 | 自 20 版本起 |
visibilitychange
事件浏览器 | 支持情况 | 版本 |
---|---|---|
Chrome | 支持 | 自 62 版本起 |
Firefox | 支持 | 自 56 版本起 |
Safari | 支持 | 自 14.1 版本起 |
Edge | 支持 | 自 18 版本起 |
Opera | 支持 | 自 49 版本起 |
当用户切换标签页时,继续播放视频会浪费带宽和资源。通过 Page Visibility API,可以在页面不可见时暂停视频,等用户返回后再自动恢复播放.
const videoElement = document.querySelector("video");
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'hidden') {
// 页面隐藏时暂停视频
videoElement.pause();
console.log("页面隐藏,视频暂停");
} else if (document.visibilityState === 'visible') {
// 页面可见时恢复视频播放
videoElement.play();
console.log("页面可见,视频继续播放");
}
});
动画可能是性能瓶颈,尤其是在页面不可见时运行动画毫无意义。通过 Page Visibility API,我们可以在页面不可见时暂停动画,减少 CPU 和 GPU 的消耗.
let animationRunning = true;
function startAnimation() {
if (!animationRunning) return;
// 假设这里有动画逻辑
console.log("动画正在运行...");
requestAnimationFrame(startAnimation);
}
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'hidden') {
// 页面隐藏时停止动画
animationRunning = false;
console.log("页面隐藏,动画停止");
} else if (document.visibilityState === 'visible') {
// 页面可见时恢复动画
animationRunning = true;
startAnimation();
console.log("页面可见,动画恢复");
}
});
startAnimation();
某些情况下,持续的数据获取可能会浪费带宽。通过检测页面的可见性,可以在页面不可见时停止数据请求,优化带宽使用.
let requestInterval;
function startFetchingData() {
requestInterval = setInterval(() => {
// 模拟 API 请求
console.log("正在获取数据...");
}, 5000);
}
function stopFetchingData() {
clearInterval(requestInterval);
console.log("停止获取数据");
}
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'hidden') {
// 页面隐藏时停止数据获取
stopFetchingData();
} else if (document.visibilityState === 'visible') {
// 页面可见时恢复数据获取
startFetchingData();
}
});
startFetchingData();
当页面不可见时,某些定时任务可以暂停,直到用户返回页面时再恢复执行。这有助于提升资源利用效率.
let intervalId;
function startTimer() {
intervalId = setInterval(() => {
console.log("计时器正在运行...");
}, 1000);
}
function stopTimer() {
clearInterval(intervalId);
console.log("计时器停止");
}
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'hidden') {
// 页面隐藏时停止计时器
stopTimer();
} else if (document.visibilityState === 'visible') {
// 页面可见时恢复计时器
startTimer();
}
});
startTimer();
与视频类似,音频在页面不可见时继续播放不仅对用户无意义,还会浪费系统资源。通过 Page Visibility API 可以在用户返回页面时恢复音频播放.
const audioElement = document.querySelector("audio");
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'hidden') {
// 页面隐藏时暂停音频
audioElement.pause();
console.log("页面隐藏,音频暂停");
} else if (document.visibilityState === 'visible') {
// 页面可见时恢复音频播放
audioElement.play();
console.log("页面可见,音频继续播放");
}
});
Page Visibility API 是一个简单但非常有效的工具,能够让开发者根据页面的可见性来动态优化资源的使用。结合 document.visibilityState,你可以进一步细化页面状态的控制,如在页面预渲染时暂停某些操作.
这种优化不仅提升了用户体验,还能显著减少系统资源的浪费。通过合理利用这个 API,我们可以暂停后台的视频、音频、动画、数据请求等操作,并在用户重新关注页面时迅速恢复,达到性能和体验的双重提升.
在开发过程中,别忘了考虑浏览器的兼容性问题,确保在所有平台上提供一致的用户体验。希望这篇文章能够帮助你更好地掌握 Page Visibility API 并将其应用到实际项目中.
最后此篇关于利用PageVisibilityAPI优化网页性能与用户体验的文章就讲到这里了,如果你想了解更多关于利用PageVisibilityAPI优化网页性能与用户体验的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
有没有人有跨平台移动应用程序开发框架的经验MoSync ? 听起来不错,很有前途。但它能实现吗? 最佳答案 我们已经使用 MoSync 8 个月了,我对它的感觉很好。对我来说,您使用 C++ 编写代码
我可以相信,我可以使用 HTML5、CSS3 和 JavaScript 开发应用程序,然后使用适用于 Android、iOS 和 Win Phone 7 的 PhoneGap 对其进行编译吗? 这个有
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码): https://github.com/zq2599/blog_demos 关于虚拟线程
Xedit 是 X11 图形服务器的一部分,它不算好看,但却有足够的隐藏功能,使它成为一个严肃的文本编辑器。 X11 图形服务器由 X.org 发布,它有一些象征性的应用来展示
我一直致力于让使用屏幕阅读器的用户可以访问 Web 内容。对于像我这样的新手,您可以想象我从 Mac -> Windows 或浏览器 -> 浏览器到现在的屏幕阅读器 -> 屏幕阅读器遇到的挫败感。 我
我们希望通过网络共享 AR 体验 (ARWorldMap)(不一定是附近的设备,我指的是可以存储到某个服务器然后由其他用户检索的数据)。 现在我们正在调查 ARWorldMap这非常棒,但我认为它只适
人们可能会认为将 3 个字符的缩写转换为数字表示形式是一项简单的任务。 JavaScript 说“不!”。 $(selector).each(function() { // convert m
我有一堆盒子可以像这样在旋转木马中滑动: 这是我的 div 的结构: 1 2 3 4 5 6 当我的页面加载时,我无法向左滚动,所以我想将向左的箭头
我即将开始一个新的移动应用程序项目,我在 iOS 或 Android 开发方面没有太多经验,但我在不同场合使用 Vaadin 进行演示层。 该应用程序对于移动客户端很可能是轻量级的,但对于后端服务器(
我有兴趣实现分页 UIScrollView 体验,与当前的 Twitter 应用程序非常相似,其中在 View 层次结构的顶部有一个主分页 UIScrollView(水平滚动),以及其他几个(垂直滚动
我想使用一些具有良好性能结果的 .NET IoC 容器。我读了this article关于 IoC 容器性能,DryIoc 和 LightInject 似乎是最好的。但是我没有找到关于它们的一些评论,
我正在为一个重要项目寻找新的 ORM,我习惯于使用 ActiveRecord 进行 nHibernate,并且我已经对 EF4、性能和崩溃的 GUI 有了非常糟糕的体验。 所以在网上搜索我找到了 Su
我们(一个大约 150 人的团队)正在考虑将我们的 ALM 解决方案从 Bugzilla/CVS 迁移到 Jira/svn/Confluence/Bamboo/Fisheye。 SO 有很多关于这些的
为网站创建丰富的 AJAX 体验,类似于 http://www.pageflakes.com/动态加载不同的内容区域,我正在考虑使用 JQuery 来做到这一点,使用 load 方法动态加载页面的特定
我想做一些分布式计算。使用 GPU 进行机器学习?只是想知道是否有人有使用 MXNET 的经验(perf. vs Theano) 引用资料 http://www.cs.cmu.edu/~muli/fi
苹果终于推出了所谓的auto-renewable subscriptions昨天。由于我在应用内购买方面的经验很少(仅限沙盒),所以我不确定我在这里是否一切顺利。似乎需要对收据进行服务器端验证。找出订
我使用 Azure AD B2C 作为 Dynamics CRM 门户应用程序的身份验证解决方案。到目前为止,B2C 允许自定义注册体验,我已经这样做来自定义注册/登录页面的外观和感觉,但我没有看到任
目标:当我们在浏览器上滚动 youtube 时,整个页面向下滚动,我想创建两个滚动器: 留下一个用于视频和评论滚动。 右边的一个用于下一个(推荐的视频)滚动。 我发现我们可以使用 overflow:
在SFSafariViewController描述是这样写的 您将使用 SFAuthenticationSession 的两种情况是: Logging in to a third party's se
你好,我需要在像 这样的聊天屏幕中开发像 whats app 这样的布局在此我想在聊天 TextView 完成后显示时间。 我已经做到了
我是一名优秀的程序员,十分优秀!