页面可见性

注意  在 Windows 8 中,可见性 API 可能无法适用于使用 JavaScript 的 Windows 应用商店应用。

Internet Explorer 10 引入了对页面可见性 API 的支持,其为开发者提供了使用编程技术确定文档当前的可见性并在可见性发生变化时获得通知的方法。 如果不知道页面的可见性状态,Web 开发者必须以页面始终可见为假设前提来设计网页。这会导致计算机资源利用率相对较高,并且会阻止 Web 开发者根据网页对于用户是否可见来做出运行时决策。

页面可见性 API

如果在设计网页时知道页面的可见性状态,则可改善网站额用户体验和电源效率。页面可见性 API 可实现这一目的。它由以下两个属性组成。

属性说明

document.hidden

描述页面是否可见的布尔值。

document.visibilityState

返回页面可见性状态。可用的值包括 PAGE_VISIBLEPAGE_PREVIEW 等。

 

页面可见性 API 还公开以下事件。

事件说明

visibilitychange

每次页面的可见性状态发生更改时就会触发此事件。

 

通过使用此 API,Web 应用程序可以根据它们对用户来说是否可见选择更改行为。此 API 可用于当页面不再可见时削减工作规模。例如,如果一个基于 Web 的电子邮件客户端是可见的,则它可能会每隔几秒钟就检查服务器上是否有新邮件。当它隐藏时,它可能会削减工作规模,这样它就会每隔几分钟而不是每隔几秒钟检查一次电子邮件。此 API 还可被用于在与电源管理无关的情况下提供更高效的用户体验。例如,当用户让一个益智游戏不再可见时,该游戏可以被暂停。同样,当广告对用户来说不可见时,广告商也可以使用它对该时段停止收费。

代码示例

下面的 JavaScript 示例演示在不知道页面是否可见的情况下检查电子邮件的方法。该代码将始终每秒钟检查一次电子邮件,即使由于页面不可见使得用户没有主动浏览该页面也如此。这是一个资源管理很差的示例。


<!DOCTYPE html>
<html>
<head>
  <script>
   var timer = 0;
   var PERIOD = 1000;   function onLoad() {
       timer = setInterval(checkEmail, PERIOD);
   }
   function checkEmail() { 
       // Check server for new emails
   }
  </script>
</head>
<body onload="onLoad()">
</body>
</html>


页面可见性可以改善资源管理,因为当页面不可见时它可以更低频率检查电子邮件。下面的代码演示了一种使用页面可见性的技术,当页面可见时每秒钟检查一次新电子邮件;而当页面不可见时则每分钟检查一次新电子邮件。


<!DOCTYPE html>
<html>
<head>
  <script>
   var timer = 0;
   var PERIOD_VISIBLE = 1000;
   var PERIOD_NOT_VISIBLE = 60000;
   function onLoad() {
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
       if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
   }  
   function visibilityChanged() {
       clearTimeout(timer);
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
   }  
   function checkEmail() { 
       // Check server for new emails
   }
  </script>
</head>
<body onload="onLoad()">
</body>
</html>


API 参考

hidden
visibilitychange
visibilityState

有关 Internet Explorer 的 Test Drive 演示

页面可见性 API

IEBlog 文章

W3C Web 性能:继续在提高性能方面加大投入
Web 性能 API 迅速成为 W3C 候选推荐 API
年度回顾:W3C Web 性能工作组
通过 HTML5 更有效地使用电脑硬件:新的 Web 性能 API,第 2 部分

规范

页面可见性

 

 

显示:
© 2015 Microsoft