[技术翻译]Web网页内容是如何影响电池使用寿命的？

本周再来翻译一些技术文章，本次预计翻译三篇文章以下：

• 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt)

• 05.[译]Web网页内容是如何影响电池功耗的(How Web Content Can Affect Power Usage)

• 06.[译]在现代JavaScript中编写异步任务(https://web.dev/off-main-thread/)

我翻译的技术文章都放在一个github仓库中，若是以为有用请点击star收藏。我为何要建立这个git仓库？目的是经过翻译国外的web相关的技术文章来学习和跟进web发展的新思想和新技术。git仓库地址：https://github.com/yzsunlei/javascript-article-translate

用户将大部分的网络在线时间花费在移动设备上，其他的大部分是使用不受限制的便携式计算机。对于二者而言，电池寿命都是相当重要的。在这篇文章中，咱们将讨论影响电池寿命的因素，以及你做为一名Web开发人员如何使你的页面更节能，以便用户能够花更多时间与你的内容互动。

什么消耗电量？

移动设备上的大部分电量由这几个主要组件消耗：

• CPU（主处理器）
• GPU（图形处理）
• 联网（Wi-Fi和蜂窝无线芯片）
• 屏幕

屏幕功耗相对恒定，而且大多在用户的控制下（经过屏幕的开启时间和亮度），可是其余组件（CPU，GPU和网络硬件）在功耗方面具备很高的动态范围。

系统会根据当前正在处理的任务来调整CPU和GPU的性能，这些任务固然包括渲染用户正在使用其Web浏览器和其余使用Web内容的应用程序与之交互的网页。这能够经过打开或关闭某些组件并更改其时钟频率来完成。广义上讲，芯片要求的性能越高，其功率效率就越低。硬件能够很是快速地提高到高性能（可是要付出很高的功耗），而后能够迅速返回到更有效的低功耗状态。

良好用电的通常原则

所以，为了最大程度地延长电池寿命，你须要减小在高功率状态下花费的时间，并使硬件尽量多地回到空闲状态。

对于Web开发人员，须要考虑三种交互状态：

• 用户正在与内容进行交互时。
• 当页面位于最前面，但未与之交互时。
• 页面不是最前面的内容时。

高效的用户互动

显然，在用户与页面进行交互时消耗电量是很正常的。你但愿页面快速加载并快速响应触摸交互。在许多状况下，减小首次渲染时间和与用户互动的时间的相同优化也将减小功耗。可是，对于在初始页面加载后继续加载资源和运行脚本要谨慎。目标应该是尽快回到空闲状态。一般，运行的JavaScript越少，页面的效率就越高，由于脚本是在浏览器已经完成的布局和绘制页面的基础上工做的。

页面加载完成后，诸如滚动和点击之类的用户交互也将增长硬件功耗（主要是CPU和GPU），这再次有意义，可是请确保在用户中止交互后当即回到空闲状态。另外，请尝试停留在浏览器的“快速路径”上-例如，内置的页面滚动将比JavaScript中实现的自定义滚动更加节能。

将闲置电源使用率降至零

当用户不与页面交互时，请尝试使页面使用尽量少的电量。例如：

尽可能减小使用计时器，以避免唤醒CPU。尝试将基于计时器的工做合并为几个不常用的计时器。许多不协调的计时器会频繁的触发CPU唤醒，这比将工做收集成更少的块要糟糕得多。

尽可能减小动画内容，例如动画图像和自动播放的视频。特别要避免“加载”GIF或CSS动画，这些GIF或CSS动画会不断触发绘制，即便你看不到它们也是如此。IntersectionObserver用于仅可在可见时运行动画。

尽量使用声明性动画（CSS Animations和Transitions）。当动画内容不可见时，浏览器能够优化这些内容，而且它们比脚本驱动的动画更有效。

避免进行网络轮询以从服务器获取按期更新。推荐使用具备持久链接的WebSockets或Fetch，而不是轮询。

在应处于空闲状态时正在工做的页面也将对用户交互的响应下降，所以将后台活动最小化也能够提升响应速度和电池寿命。

后台时CPU使用率为零

在多种状况下，页面变为非活动状态（不是用户的焦点时），例如：

• 用户切换到其余选项卡。
• 用户切换到其余应用程序。
• 浏览器窗口最小化。
• 浏览器窗口是可见的，但不是焦点窗口。
• 浏览器窗口在另外一个窗口后面。
• 窗口所在的空间不是当前空间。

当页面变为非活动状态时，WebKit会自动采起动做来节省电量：

• requestAnimationFrame 已中止。
• CSS和SVG动画已暂停。
• 计时器受到限制。

另外，WebKit会利用操做系统提供的功能来最大化效率：

• 在iOS上，若是可能，选项卡将彻底挂起。
• 在macOS上，标签页会进入App Nap，这意味着未进行视觉更新的标签页的Web进程的优先级较低，而且计时器受到限制。

可是，页面能够经过计时器（setTimeout和setInterval），消息，网络事件等触发CPU唤醒。在后台时，应尽量避免这些事件。有两个对此有用的API：

• 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和蜂窝网络芯片）和较小的电池。不幸的是，在实验室以外测量网络的电源影响并不容易，可是能够经过遵循一些简单的规则来减小能耗。

减小网络能耗的最直接方法是最大限度地利用浏览器的缓存。减小页面加载时间的全部最佳实践还经过减小无线电的开机时间而使电池受益。

另外一个重要方法是将网络请求组合在一块儿。每当有新请求出现时，操做系统就须要打开无线电，链接到基站或蜂窝塔并传输字节。传输完数据包后，若是须要继续传输更多数据包，无线电将保持少许供电。

若是页面频繁地传输少许数据，则开销可能大于传输数据所需的能量：

传输2个数据包之间有延迟的网络功率开销，能够从“Network Requests”时间线中的Web检查器中发现此类问题。例如，如下屏幕截图显示了在几秒钟内发送的四个单独的请求（多是分析）：

同时发送全部请求将提升网络用电效率。

结论

网页能够成为电池寿命的好公民。

衡量Web Inspector中的电池影响并下降这些能耗很重要。这样作能够改善用户体验而且延长电池寿命。

延长电池寿命的最直接方法是最大程度地减小CPU使用率。新的Web Inspector提供了一种能够随时间进行监视的工具。

为了达到更长的电池寿命，目标是：

• 空闲时将CPU使用率降至零
• 在用户交互过程当中最大化性能，以快速恢复闲置状态

原文连接：https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/