原创TSG前端技术分享12-17 01:21
作者:卢卡斯

摘要: web性能工作小组于10月17日发布了页面可见性第二版的提案标准(PR),该规范定义了通过程序的方式来确定页面可见性的状态,从而有助于开发高效的web应用程序。第二版规范取代了第一版并添加了一些新的特性。

概要

web性能工作小组于10月17日发布了页面可见性第二版的提案标准(PR),该规范定义了通过程序的方式来确定页面可见性的状态,从而有助于开发高效的web应用程序。第二版规范取代了第一版并添加了一些新的特性。欢迎公众于2017年11月14日前提交审阅意见。

页面可见性第二版规范

简介

页面可见性API以程序的方式来确定浏览器中网页当前的可见状态并捕获可见状态发生改变时的事件。Web开发人员在不了解页面可见性的情况下总是认为网页始终对用户可见,这不仅会导致浏览器更多资源的浪费而且开发人员也无法基于网页是否对用户可见做出及时的反馈。在掌握了页面可见性知识后开发者就能够做出用户体验更好的网页。

第二版规范相比较于第一版有如下改动:

使用样例

该例子以网页上的播放器为例,当页面可见时播放器能够自动播放音乐,当网页不可见时播放器暂停播放。

  1.  var videoElement = document.getElementById("videoElement");

  2.  // Autoplay the video if application is visible

  3.  if (document.visibilityState == "visible") {

  4.    videoElement.play();

  5.  }

  6.  // Handle page visibility change events

  7.  function handleVisibilityChange() {

  8.    if (document.visibilityState == "hidden") {

  9.      videoElement.pause();

  10.    } else {

  11.      videoElement.play();

  12.    }

  13.  }

  14.  document.addEventListener(visibilitychange, handleVisibilityChange, false);

同样的逻辑也可以被用来处理网页中的动画循环,分析执行,和其他类型的处理。

可见性状态及VisibilityState 枚举类

浏览器的页面可见性有两种状态:

VisibilityState枚举类:

  1.  enum VisibilityState {

  2.    "hidden",

  3.    "visible"

  4.  };

Document 接口的扩展

该规范扩展了Document接口:

  1.  partial interface Document {

  2.    readonly attribute boolean         hidden;

  3.    readonly attribute VisibilityState visibilityState;

  4.             attribute EventHandler    onvisibilitychange;

  5.  };

hidden 属性

页面是否处于hidden判决规则如下:

visibilityState 属性

visibilityState属性返回当前页面的可见状态,其中为hiddenvisible。返回状态规则如下:

返回visible

返回hidden

onvisiblitychange 事件

onvisiblitychangevisibilityState状态发生改变时的处理事件。

隐私和安全

页面可见性API可以让开发人员知道页面什么时候处于可见。现有的机制,如window中的focusblur事件可以检测页面什么时候处于非活跃状态。unload事件可以被检测到页面被关闭时的行为。