页面可见性api_了解页面可见性API

页面可见性api

Almost everybody who uses chrome has said this statement, "chrome uses a lot of memory". Take me for example, I love to open a lot of tabs, some I keep pinned for a long time. This behaviour makes me sometimes experience breaks and tiny glitches.

几乎所有使用chrome的人都说过这一说法，“ chrome占用大量内存”。 以我为例，我喜欢打开很多标签，有些标签我固定了很长时间。 这种行为使我有时会遇到休息和小故障。

This happens because many websites consume lots of browser resources, for example, imagine you have 5 tabs opened (just five). In those tabs, one is running an expensive canvas animation, another is making a lot of calls to the server (polling). These actions need computer memory to function. What if we as developers could help reduce the stress on the users computer.

发生这种情况是因为许多网站消耗了大量浏览器资源，例如，假设您打开了5个选项卡（只有五个）。 在这些标签中，一个正在运行昂贵的画布动画，另一个正在对服务器进行大量调用（轮询）。 这些操作需要计算机内存才能起作用。 如果我们作为开发人员可以帮助减轻用户计算机的负担该怎么办。

What if we could pause some parts of our websites when a user isn't looking at it?

如果我们在用户不浏览网站时可以暂停网站的某些部分怎么办？

For a while, we had been missing a simple but useful feature in the browser. For a time, we used a vendor prefixed version of the API — but due to the standardization of HTML5 on 28 October 2014, we got that feature. This mystery API is the Visibility API.

一段时间以来，我们一直在浏览器中缺少一个简单但有用的功能。 有一时间，我们使用了API的供应商前缀版本-但是由于2014年10月28日 HTML5的标准化，我们获得了该功能。 这个神秘的API是Visibility API 。

什么是页面可见性API ( What is Page Visibility API )

The visibility API allows a developer to know when a page has lost or gained focus. The API sends a visibilitychange event of the visibility of the page.

可见性API使开发人员可以知道页面何时失去或获得焦点。 API发送页面可见性的visibilitychange事件。

The API is particularly useful for saving browser resources by giving developers the opportunity to not perform unnecessary tasks when the webpage is not visible.

该API通过为开发人员提供机会在网页不可见时不执行不必要的任务，从而特别节省了浏览器资源。

Before this API became official, developers had to detect this feature by adding a blur or focus event on the window.

在该API正式发布之前，开发人员必须通过在window上添加blur或focus事件来检测此功能。

页面可见性API的用法 ( Usage of the Page Visibility API )

The visibility API can help developers with a lot of things. It is most suitable for saving browser resources. So it can be used for things like.

可见性API可以帮助开发人员做很多事情。 最适合节省浏览器资源。 因此它可以用于类似的事情。

• Pausing a video when the page has lost user focus.
  页面失去用户焦点时暂停视频。
• Stop an HTML5 canvas animation from running when a user is not on the page.
  当用户不在页面上时，停止运行HTML5画布动画。
• Show a notification to the user only when the page is active.
  仅在页面处于活动状态时才向用户显示通知。
• Stop movement of a slider carousel when the page has lost focus.
  当页面失去焦点时，停止滑动滑块的旋转。

使用页面可见性API ( Using the Page Visibility API )

The API adds two properties to the browser's document object, the first is hidden which is a boolean. The second one is visibilityState which is a string.

该API向浏览器的document对象添加了两个属性，第一个是被hidden的布尔值。 第二个是visibilityState ，它是一个字符串。

We can listen for the visibilitychange event. For example, when a page loses focus, we can stop running an action.

我们可以听visibilitychange事件。 例如，当页面失去焦点时，我们可以停止运行动作。

document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        // stop running expensive task
    } else {
        // page has focus, begin running task
    }
});

The visibilityState property offers four different values. Each representing a different browser tab state. It is read-only which means it cannot be edited.

visibilityState属性提供四个不同的值。 每个代表不同的浏览器选项卡状态。 它是read-only ，这意味着它不能被编辑。

• visible: means the tab is visible or has focus.
  visible ：表示该标签可见或具有焦点。
• prerender: the page has loaded but the user has not viewed it.
  prerender ：页面已加载，但用户尚未查看。
• hidden: page is not visible on any screen.
  隐藏 ：页面在任何屏幕上都不可见。
• unloaded: means the user is about to close the current page.
  卸载 ：表示用户将要关闭当前页面。

For example, we could create a newsletter signup form that pops up as soon as the user is about to leave the page. If you use WordPress, you should be familiar with Optin-Monster. They use the same technology to show a newsletter signup form when a user wants leave the page.

例如，我们可以创建一个新闻通讯注册表单，该表单将在用户即将离开页面时立即弹出。 如果您使用WordPress，则应该熟悉Optin-Monster。 当用户想要离开页面时，他们使用相同的技术来显示新闻简报注册表单。

document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'unloaded') {
        triggerNewsletterSignupForm();
    }
});

浏览器支持 ( Browser Support )

Thanks to our lovely friends at CanIUse, we can see that the API support for all the major browsers today. Even IE has support from version 11.

Browser support as of May 2016

感谢CanIUse的好朋友 ，我们可以看到当今所有主要浏览器的API支持。 甚至IE都从版本11开始提供支持。 截至2016年5月的浏览器支持

奥托罗 ( Outro )

Building a good web application doesn't always have the most eye-catchy feature, it is about performance. Not giving the user a reason to close your website is one of the greatest accomplishments of web development.

构建良好的Web应用程序并不总是具有最引人注目的功能，它与性能有关。 不给用户关闭网站的理由是Web开发的最大成就之一。

Need more info on Page Visibility API, checkout Mozilla Developer Network.

需要有关页面可见性API的更多信息，请参见Mozilla开发人员网络 。

翻译自: https://scotch.io/tutorials/get-to-know-the-page-visibility-api

页面可见性api