网页内容如何影响功耗

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

因为我们知道所有使用电池供电设备的人都在不断关注他们的电池电量,并且网站是这些电池电量的重要消耗者,所以我们可能应该比现在更多地考虑这些问题。

我希望浏览器本身成为我们在这里的主要盟友,它会做一些聪明的事情来降低功耗,而我们开发者不需要过多地考虑它。但多年来我们已经了解到,这始终是共同的责任。我们经常需要帮助浏览器尽其所能完成其工作(例如响应式图像和 will-change)。

Benjamin Poulain 和 Simon Fraser 文章中的一些直接提示

  • 尽量减少计时器的使用以避免唤醒 CPU。尝试将基于计时器的操作合并到几个不频繁的计时器中。许多不协调的计时器会触发频繁的 CPU 唤醒,这比将这些工作合并成更少的块要糟糕得多。
  • 尽量减少持续动画内容,例如动画图像和自动播放视频。尤其要警惕避免“加载”旋转 GIF 或 CSS 动画,即使您看不到它们,它们也会持续触发绘制。可以使用 IntersectionObserver 仅在动画可见时运行动画。
  • 尽可能使用声明式动画(CSS 动画过渡)。浏览器可以在动画内容不可见时对其进行优化,并且它们比脚本驱动的动画更高效。
  • 避免网络轮询以从服务器获取定期更新。使用 WebSocketsFetch 与持久连接,而不是轮询。

我希望看到更多类似于 macOS 如何轻松查看需要大量功耗的应用程序的开发者工具

WebKit DevTools 确实有它

我们曾经有一个 电池状态 API,但它已弃用,所以现在不是故事的重点。

我刚刚参加了 Web Unleashed 大会,Kyle Simpson 在他的主题演讲中相当直接地谈到了这一点。他的主要观点是我们应该更直接地询问用户并征求他们的偏好。嘿,用户,您是否处于想要尽可能少用电量的情况下? 告诉我们,我们会尽一切努力实现这一点(即使是在站点级别)。

直接链接 →