页面激活判断

浏览器有多个标签页的时候，当前激活的只有一个，其它的几个页面会失活，他们的setInterval等方法就会停滞，一些事件会累积，不会被处理。那这里也就提出了一个问题，判断当前页面是激活状态还是失活？

如果换句话说就好理解了，判断页面是激活状态还是失焦状态？从激活和失焦，我们就很容易想到focus和blur。

e.g.

<script>
(function() {
    window.onload = function() {
        document.title = "当前窗口已加载激活";
    };
    window.onfocus = function() {
        document.title = "当前窗口被激活";
    };
    window.onblur = function() {
        document.title = "当前窗口已失焦";
    };
})();
</script>

根据不同情况，就可以做不同处理了。

还有另一个方法，新的API，document.visibilityState，通过这个api可以判断当前页面是否可见。

Document.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境。由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染。

可用的值如下：
'visible': 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化。
'hidden': 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态'。
'prerender': 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden)。 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的。
'unloaded': 页面从内存中卸载清除. 注意: 浏览器支持是可选的。
当此属性的值改变时, 会递交 visibilitychange 事件给Document。

典型用法是防止当页面正在渲染时加载资源, 或者当页面在背景中或窗口最小化时禁止某些活动。
e.g.

document.addEventListener('visibilitychange', function(){
    document.title = document.visibilityState;
});

发现这个问题好low。。。