思考功耗与网站

Gerry McGovern 询问我是否对能源消耗和网站有任何见解。毕竟，他有一本书 讲述了数字对地球造成的成本。他想知道网络技术的具体情况，比如……

如果你在 HTML 中这样做，它将消耗 3 倍的能量，但如果你在 JavaScript 中这样做，它将消耗 10 倍的能量。

我认为，如果你真的去研究，并且知道如何精确测量，你就能找到这样的例子。假设我想在屏幕上移动一个元素。如果我在 JavaScript 中编写了一个 setInterval 循环，它以每毫秒递增相对定位元素的 left 位置，我 99% 确定这比使用 CSS @keyframes 动画在相同时间内更改 transform: translateX() 值更耗电。在这个例子中，我们通常更关注性能而不是能耗，但这立刻就很有趣：**良好的性能是否与更低的能耗相关？** 可能是的。

研究人员已经研究了这个问题。

我们发现性能分数与移动 Web 应用的能耗之间存在统计学意义上的负相关关系（中等至大的效应量），这意味着性能分数的提高往往会导致能耗的降低。

他们在 Android 上使用 Lighthouse 分数测试移动 Web 应用。我猜想这与其他平台和其他性能指标非常吻合。

我很高兴迄今为止的研究结果与我逻辑上预期的一致。导致性能不佳的事物往往也会消耗能量。想象一下图片。如果服务了过大或未优化的图片，你的性能分数将会受到影响。想象一下这样做的性能影响。服务器上放着两张图片，一张大，一张小。哪一张传输到某个用户的电脑需要消耗更多的电能？大图。哪一张需要更多的处理能力来解析和显示？大图。哪一张在屏幕上显示期间占用更多的内存（也消耗电能）？大图。

网络传输越少，耗电越少。

浏览器需要处理的工作越少，耗电越少。

一些每隔几秒自动刷新的广告？它不仅令人讨厌，而且浪费带宽，从而浪费电能。无论何时你不得不使用轮询（即重复发出网络请求）而不是基于事件的方法，比如 WebSockets？这都在使用你可能不需要使用的电能。

我们知道 CDN 也对性能有益。文件（比如图片）不必跨越世界传输，而是来自地理位置更接近的服务器，该服务器专为此任务而设计。这方面对我来说变得有点模糊。

以性能为目标：目标达成。以低能耗为目标，我们达成了吗？

它已经被研究过，但不幸的是，我无法仅从摘要中得知结论。在我看来，世界各地的服务器都存储着这些资源的副本，当资源发生变化时，并非只有一个服务器更新，而是世界各地的服务器都会更新，这一点使问题变得复杂。在节省请求效率带来的节省方面，必须在传播和重复存储之间找到平衡。

说到存储效率，我确信存储在磁盘上的数据比通过网络发送的文件消耗的电能少得多——但它仍然有成本。假设你每次更改文件时都保存一个副本。假设你每次部署网站时都保存一个完整副本。有用吗？当然。这会消耗电能吗？一定会的。这里面一定需要找到某种平衡。

Gerry 询问我有关特定技术的问题。我能想到 CSS 领域中另一件大事：深色模式！同样，它已经被研究过。深色模式可以节省电能。

深色模式确实可以将显示屏的功耗降低多达 58.5%，在我们测试的流行 Android 应用集中，这是在最大亮度下的效果！就整个手机电池续航时间减少而言，这意味着在最大亮度下可以节省 5.6% 到 44.7%，在 38% 亮度下可以节省 1.8% 到 23.5%。

那么比较技术呢？我怀疑这更多地取决于该技术（或语言）正在做什么，而不是语言本身。例如，我可以使用 <details> 元素在 HTML 中构建一个可以打开和关闭的小区域。这比通过在按钮上附加一个点击处理程序来创建该区域更节能吗？我有点怀疑。我敢打赌，浏览器正在执行的重新绘制/重新渲染步骤以及背后的语言与之关联不大。然而！如果我让浏览器下载一个 50 KB 的 JavaScript 库仅仅是为了实现我这个小小的打开/关闭元素，那么是的，它确实很重要，而且 JavaScript 版本效率较低。

这样，就像良好的性能通常与更低的能耗相关一样，我敢打赌遵循最小功耗原则通常也与更低的能耗相关。

厌倦了我对事物的猜测？可以理解。

Jack Lenox 在 Smashing 上发表的文章“如何通过改进网站性能来帮助拯救地球” 是一个更深入的研究。他指出了可以测试你网站的网站。网站碳排放计算器 就是一个例子，它说明

计算网站的碳排放量是一个挑战，但利用五项关键数据，我们可以做出相当准确的估计

1. 线路上的数据传输
2. 网络数据的能源强度
3. 数据中心使用的能源来源
4. 电力的碳排放强度
5. 网站流量

测试代码是开源的。