手机自身的电源管理已经相当不错了，那为何网页上还要增加一个HTML5 Battery电池状态API呢？
随着HTML5以及CSS3技术支持与发展，以及手机越来越高性能带来的可行性。移动端的页面显然会越来越烧电。例如，流畅的动画效果，模糊阴影等视觉体验。因此可能会出现这样的情况，用户电量快不行了，又没有电源来一发，你的网页还呼呼的烧电，显然，这不是用户所愿意看到的。
因此，如果网页能够感知手机的电源，我们似乎能够为用户做的更多。
屏幕
- 页面白色背景变灰一点，或整体暗度降低；
- 移除gif动图
- 移除一些不关键的动画
- 如果可能的话，避免DOM操作
网络
手机网络或者wifi等的使用也是烧电的，我们可以：
- 停止使用频繁的Ajax操作
- HTML5离线存储技术
- HTML5 WebStorage本地存储技术
- 不要请求一些不重要的图片（如装饰性图片）
听觉和触觉输出
声音(HTML5 audio API)啊，震动（HTML5 vibrate API）什么的只会让手机早泄的更快。渐弱这些效果，或者干脆不用。
线程
借助Page Visibility API等，对于非激活态的选项卡页面，例如游戏页面什么的，都暂停掉。等其他一些省电的处理。这一里一外的用户体验，势必让产品更加人性化。
由此可见，HTML5 Battery API还是很有用的。
下面我们来学习一下Battery的使用！
注意：目前唯有手机QQ浏览器使用的x5内核比较良好的支持该API。但也只是部分属性支持，比如chargingTime 和dischargingTime 属性，显示的永远都是infinity（无限）。chargingtimechange 事件和dischargingtimechange 事件无法触发。
属性1：charging 表示电池是否在充电
属性2：chargingTime 表示电池充满需要的时间
属性3：dischargingTime 表示电池可用时间
属性4：level 表示电池当前的电量0 ~ 1
事件1：chargingchange 充电状态改变触发
事件2：chargingtimechange 所需充电时间改变触发
事件3：dischargingtimechange 剩余电量的是使用时间改变触发
事件4：levelchange 当前电量改变时触发
案例代码：
var battery = navigator.battery ||navigator.webkitBattery ||navigator.mozBattery ||navigator.msBattery;
if(battery){
console.log(battery);
log('是否在充电：'+battery.charging);
log('充电时间：'+battery.chargingTime);
log('当前电量能用多长时间：'+battery.dischargingTime);
log('电量百分比：'+(battery.level*100)+'%');
battery.addEventListener("chargingchange", function(e) {
// 充电状态改变的时候会触发，例如发现正在充电，果断不使用节能模式。
log( battery.charging ? "电源已接通":"电源已断开");
}, false);
battery.addEventListener("levelchange", function (e) {
// 电池电量的百分比改变时候触发
log('电量百分比：'+(battery.level*100)+'%');
}, false);
battery.addEventListener("chargingtimechange",function(e){
// 还需要充电的时间改变的时候触发
log('充电时间：'+battery.chargingTime);
},false);
battery.addEventListener("dischargingtimechange",function(e){
// 剩余电量的使用时间改变时候触发
log('当前电量能用多长时间：'+battery.dischargingTime);
},false);
}else{
console.log(battery);
document.write('你的浏览器不支持Battery API');
}
function log(str){
document.write(str+'<br>');
};