页面可见性的重要性
要说到网页可见性，这是搞网站建设时很重要的一个原则。你想想现在互联网飞速发展，我们对网站美观程度的要求自然也就高了，所以怎样让页面看着漂亮就显得至关重要了。HTML5它有好些新的特性来搞定这个问题，就是根据网页能否被看到然后自己自动做出相应的调整，致力于给用户提供更好的使用感受。
visibilitychange事件介绍
让我给你介绍下visibilitychange事件！这玩意儿能帮咱们时时刻刻监控网页是否隐藏起来了。你想想，以前打开新的标签页或者把浏览器窗口变小，页面就看不到了，但是visibilitychange能捕捉到这种变故，然后让开发员根据实际情况做相应处理。
document.hidden属性详解
来聊聊HTML5新增的那个叫文档.hidden的东西。用它可以知道现在我们看的是哪个网页。当网页在后台或者缩小到最小时，这个值为真的；而当我们正在观看时，它就会变成假的。所以开发者们通过这个特性很容易弄清楚页面是否在看。
document.visibilityState属性解析
别只知道document.hidden这个东西哦～还有个document.visibilityState，看起来有点儿复杂，但其实它只是给我们提供了网页显示或隐藏的信息。简单来说，三种可能的状态：visible就是说你正看着的网页；hidden那肯定是你没注意到的页面或者最小化了；然后是prerender，就是刷新网页时的状态啦（别以为没啥区别，其实很容易察觉滴！）。
如何利用页面可见性进行优化
// 各种浏览器兼容 var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// 添加监听器，在title里显示状态变化
document.addEventListener(visibilityChange, function() {
document.title = document[state]; }, false);
// 初始化
document.title = document[state];
咱们做网页开发时怎么应用这个方法？举个网页上的小例子，像动画、定时请求啥的这些功能挺占内存，但是没人看的话，岂不成了浪费电能么！所以，我们只要盯住visibilitychange事件，看看有没有必要开始启动那些功能，既省电还加速！
添加visibilitychange事件监听
想要实现这些功能挺简单的！只需要在你的代码中添加对‘visibilitychange’事件的处理，然后看下`document.hidden`或者`document.visibilityState是否改变’，就可以据此执行相应操作。这样子，无论你怎么切换浏览器标签页，都能根据当前的可视状态进行精确操作~
总结与展望
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});
document.addEventListener("msvisibilitychange", function() {
console.log( document.msVisibilityState);
});
document.addEventListener("mozvisibilitychange", function() {
console.log( document.mozVisibilityState);
});
document.addEventListener("webkitvisibilitychange", function() {
console.log( document.webkitVisibilityState);
});
看了这个文章，你就会知道如何辨认那些看不到的网页啦～有了HTML5这项新功能，网站跑得飞快，使用感也超棒，还省下不少资源。别急，未来的Web技术一定还有更多好玩的东西等着我们发现。希望大家把所学知识用到实际中去，为我们粉丝提供更好的上网环境。
评论0