探索HTML5页面可见性API：提升用户体验与性能

早些时候，我们的浏览器不具有选项卡式浏览功能，但今天，当您查看所有可用的浏览器时，我们可以看到所有浏览器都提供该功能。作为一名程序员，我通常一次打开 10-15 个选项卡，有时这个数字会超过 25-30 个。

为什么使用此 API？

之前，无法确定哪个选项卡处于活动状态、哪个选项卡处于活动状态，但借助 HTML5 Visibility API，我们可以检测访问者是否正在查看我们的网页。

在本教程中，我们将了解如何处理 HTML5 Visibility API 以及一个简单的演示来发现页面的状态。在此演示中，我们将根据页面可见性状态更改文档标题。

检查页面的可见性状态

随着此 API 的推出，我们迎来了两个新的文档属性，它们具有两种不同的功能。第一个是 document.visibilityState，第二个是 document.hidden。

document.visibilityState 包含四个不同的值，如下所示：

• 隐藏：页面在任何屏幕上都不可见
• 预渲染：页面在屏幕外加载并且对用户不可见

• 可见：页面可见

• 已卸载：页面即将卸载（用户正在离开当前页面）

document.hidden 是布尔属性，如果页面可见则设置为 false，如果页面隐藏则设置为 true。

现在，当我们的网站对用户隐藏时，我们可以控制网站的行为方式。

我们立刻就知道了我们的可用性属性，但现在是时候侦听该事件了，以便我们可以收到有关页面可见性的新情况的通知。这是通过 visibilitychange 事件完成的。我们将看到有关如何处理此事件的快速演示。

document.addEventListener('visibilitychange', function(event) {
  if (!document.hidden) {
    // The page is visible.
  } else {
   // The page is hidden. 
  }
});

此代码只是利用此事件并发现网页当前状态的基本实例。但要让您知道，这些属性和方法都应该使用供应商前缀，因为这些事件和属性在某些浏览器中是供应商前缀的。现在我们将以跨浏览器的方式看到相同的代码：

// Get Browser-Specifc Prefix
function getBrowserPrefix() {
  
  // Check for the unprefixed property.
  if ('hidden' in document) {
    return null;
  }

  // All the possible prefixes.
  var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];

  for (var i = 0; i < browserPrefixes.length; i++) {
    var prefix = browserPrefixes[i] + 'Hidden';
    if (prefix in document) {
      return browserPrefixes[i];
    }
  }

  // The API is not supported in browser.
  return null;
}

// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
  if (prefix) {
    return prefix + 'Hidden';
  } else {
    return 'hidden';
  }
}

// Get Browser Specific Visibility State
function visibilityState(prefix) {
  if (prefix) {
    return prefix + 'VisibilityState';
  } else {
    return 'visibilityState';
  }
}

// Get Browser Specific Event
function visibilityEvent(prefix) {
  if (prefix) {
    return prefix + 'visibilitychange';
  } else {
    return 'visibilitychange';
  }
}

我们拥有所有浏览器前缀属性，并且事件已准备好应用。现在我们将相应地更改之前的代码。

// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);

document.addEventListener(visibilityEvent, function(event) {
  if (!document[hidden]) {
    // The page is visible.
  } else {
   // The page is hidden. 
  }
});

我们可以在哪里使用此 API？

我们可以考虑使用此 API 在许多不同的场景中。

1. 假设您在仪表板上，页面正在定期（例如两分钟）轮询某些 RSS 提要或 API 的详细信息。因此，如果页面对用户不可见（即用户实际上并未查看页面），我们可以限制对 RSS 提要或 API 的调用。
2. 用于图像滑块。我们可以在页面隐藏时限制滑块图像的移动。

3. 以类似的方式，我们可以仅在页面对用户隐藏时显示 HTML 通知。

到目前为止，我们已经看到了使用 HTML5 页面可见性 API 的代码，是时候立即采取一些行动了。

演示

• 演示 1：该演示展示了如何使用页面可见性 API 来更改页面标题。查看演示
• 演示 2：该演示演示了如何在页面处于非活动状态时限制从服务器轮询数据。

在此演示中，我们将研究如何限制轮询服务器以获取最新信息，但仅限于用户正在查看页面时。我假设 jQuery 已经包含在您的页面中。这里我们将仅增加计数，但这可以替换为真实的服务器轮询。

HTML

<!-- This element will show updated count -->
<h1 id="valueContainer">0</h1>

JavaScript

<script type="text/javascript">
    
	// Get Browser Prefix
	var prefix = getBrowserPrefix();
	var hidden = hiddenProperty(prefix);
	var visibilityState = visibilityState(prefix);
	var visibilityEvent = visibilityEvent(prefix);
	
	var timer = null;
	
	function increaseVal() {
		var newVal = parseInt($('#valueContainer').text()) + parseInt(1);
		$('#valueContainer').text(newVal);
		document.title = newVal + ': Running'; 
		
		timer = setTimeout(function() {
			increaseVal();
        }, 1);
	}
	
	// Visibility Change 
	document.addEventListener(visibilityEvent, function(event) {
		  if (document[hidden]) {
			  clearTimeout(timer);
			  var val = parseInt($('#valueContainer').text());
			  document.title = val + ': Pause'; 
		  } else {
			  increaseVal();  
		  }
	});
	
	increaseVal();
	
</script>

演示视图

浏览器支持

如果您想查看浏览器对此 API 的支持，那么我建议查看我可以使用吗？。但要以编程方式查找浏览器支持，我建议阅读本文来检测对各种 HTML5 功能的支持。到目前为止，我们在几乎所有主要和最新的浏览器中都对该 API 提供了很好的支持。

结论

我想说，我们有一个非常好的 API，它只包含两个属性和一个事件。这样，它可以轻松地与您现有的应用程序集成，这可能会对您的用户体验产生积极影响。最终，现在我们可以控制当我们的网站对用户隐藏时我们的网站的行为方式。