Page Visibility API提供了一种方法来响应页面转换为后台还是前台。这是避免在页面处于后台时更新UI的好方法，然后在页面可见时使用visibilitychange事件来更新内容。
blur每当页面不再处理焦点时，都会触发事件。在这种情况下，页面可能仍然可见，但不是当前聚焦的窗口。根据页面的不同，停止动画可能是一个好主意。
查找问题的最简单方法是Web Inspector的时间轴。该记录不应显示页面在后台时发生的任何事件。
降低网页耗电既然我们知道了网页耗电的主要原因，并给出了一些有关创建节能网页的一般规则，那么让我们来谈谈如何识别和修复导致耗电量过多的问题。
脚本如上所述，现代CPU可以将设备闲置时的耗电量从非常低的坡度提高到非常高的水平，以满足用户交互和其他任务的需求。因此，CPU成为电池寿命变化的主要原因。页面加载期间的CPU使用率是浏览器引擎在加载，解析和渲染资源以及执行JavaScript时所做的工作的组合。在许多最新浏览器的网页上，执行JavaScript所花费的时间远远超过了浏览器在其余加载过程中所花费的时间，因此，最小化JavaScript执行时间将最大程度地降低功耗。
衡量CPU使用率的最佳方法是使用Web Inspector。如我们在上一篇文章中所示，时间轴可以显示任何选定时间范围内的CPU活动：
为了有效地使用CPU，WebKit在可能的情况下将工作分配到多个内核上（使用Workers的页面也将能够使用多个内核）。Web Inspector提供了与页面主线程同时运行的线程的细分。例如，以下屏幕截图显示了滚动具有复杂渲染和视频播放功能的页面时的线程：
在寻找要优化的东西时，请专注于主线程，因为那是你的JavaScript运行的地方（除非你使用的是Workers），然后使用“JavaScript And Event”时间轴来了解触发脚本的原因。也许你在响应用户或滚动事件方面做了太多工作，或者触发了requestAnimationFrame中隐藏元素的更新。了解页面上使用的JavaScript库和第三方脚本所完成的工作。要进行更深入的研究，可以使用Web Inspector的JavaScript探查器来查看在哪里花费时间。
“WebKit线程”中的活动主要是由与JavaScript相关的工作触发的：JIT编译和垃圾回收，因此减少运行的脚本数量并减少JavaScript对象的创建和销毁可以降低这种情况。
WebKit调用的其他各种系统框架都使用线程，因此“其他线程”包括那些线程完成的工作；绘画是“其他线程”活动中使用最多的，接下来我们将讨论绘画。
绘画主线程CPU使用率也可以由大量布局和绘画触发；这些通常是由脚本触发，但比其他属性的CSS动画transform，opacity并且filter还可能导致他们触发。查看“Layout and Rendering”时间轴将帮助你了解导致触发活动的原因。
如果“Layout and Rendering”时间轴显示绘画，但你无法确定正在发生的变化，请启用“Paint Flashing”：
这将使这些绘画用红色标记突出显示。你可能需要滚动页面才能看到它们。请注意，WebKit会保留一些“过度绘制(overdraw)”的图块，以实现平滑的滚动，因此在视口中不可见的绘制仍可以继续工作，以使屏幕外的图块保持最新状态。如果时间轴上显示绘画，则说明它在做实际的工作。
除了导致CPU耗电外，绘画通常还会触发GPU工作。macOS和iOS上的WebKit使用GPU进行绘画，因此触发绘画可能会导致功耗显着增加。额外的CPU使用率通常会显示在CPU使用率时间轴的“其他线程”下。
GPU还用于2D画布和WebGL/WebGPU。为了最大程度地减少绘图，如果画布内容没有更改，请不要调用API，并尝试优化画布绘图命令。
许多Mac笔记本电脑有两个GPU，一个与CPU在同一个芯片上的“集成”GPU，功能不强但功耗更高，还有一个功能更强大但功耗更高的“独立”GPU。WebKit默认情况下将使用集成GPU。你可以使用powerPreference上下文创建参数请求独立GPU ，但是只有在你可以证明功耗成本合理的情况下，才可以这样做。
网络无线网络会以你意想不到的方式影响电池寿命。手机受到的影响最大，因为它们结合了功能强大的射频（WiFi和蜂窝网络芯片）和较小的电池。不幸的是，在实验室之外测量网络的电源影响并不容易，但是可以通过遵循一些简单的规则来减少能耗。
减少网络能耗的最直接方法是最大限度地利用浏览器的缓存。减少页面加载时间的所有最佳实践还通过减少无线电的开机时间而使电池受益。