原文地址：https://webkit.org/blog/8970/...
原文作者：Benjamin Poulain & Simon Fraser
譯者：劉輝 校驗：李剛鬆
現在用戶上網大多使用移動設備或者筆記本電腦。對這兩者來說，電池壽命都很重要。在這篇文章裏，我們將討論影響電池壽命的因素，以及作爲一個web開發者，我們如何讓網頁耗電更少，以便用戶有更多時間來關注我們的內容。
是什麼在耗電？
移動設備的電力消耗有以下幾個因素：
- CPU （核心處理器）
- GPU （圖形處理）
- 網絡 （wifi或者蜂窩移動網絡）
- 屏幕
屏幕功耗相對穩定，並且主要由用戶控制（通過屏幕使用時間和亮度），但是對於其他組件，例如CPU，GPU，網絡模塊，功耗是動態變化的，而且變化範圍很大。
<!--more-->
系統根據當前正在處理的任務調整CPU和GPU性能，包括在Web瀏覽器中用戶正在交互的網頁以及使用Web內容的其他應用程序。這是通過打開或關閉某些組件以及通過更改其時鐘頻率來完成的。總的來說，芯片所需的性能越高，其功率效率就越低。硬件可以非常快速地提升到高性能（但是需要很大的功率），然後迅速恢復到更高效的低功耗狀態。
良好用電的一般原則
爲了最大限度地延長電池壽命，你必須儘量減少硬件處於高功率狀態的時間，讓硬件儘可能的處於空閒狀態。
對於web開發者來說，有三種交互場景需要注意：
- 用戶主動與內容交互
- 頁面處於前臺，但是用戶沒有交互
- 頁面處於後臺
高效的用戶交互
用戶交互的時候肯定會耗電。頁面需要快速的加載，並且能夠快速的響應觸摸。在大多數場景中，減少首次渲染時間也會降低功耗。不過，在初始頁面加載後繼續加載資源和運行腳本時要小心。我們要儘快讓系統返回空閒狀態。總的來說，瀏覽器已經完成了佈局和渲染，js執行的越少，耗電越少。
一旦頁面加載完，用戶可能會滾屏或者點擊頁面，這同樣會產生耗電（主要是CPU和GPU）,這是必要的消耗。要確保儘快返回空閒狀態。並且，最好使用瀏覽器本身提供的功能。- 舉例：普通的頁面滾動肯定比用js自定義的滾動更高效。
讓空閒狀態耗電趨向於零
當用戶沒有和頁面交互時，儘可能的使頁面不耗電，例如：
- 儘量少用定時器以避免喚醒CPU,可以把基於定時器的任務合併，使用儘可能少的定時器。大量濫用定時器會導致CPU被頻繁喚醒，這比把這些任務合併處理要糟糕的多。
- 最大限度地減少動畫內容，如動畫圖像和自動播放視頻。要特別注意"loading"用的gif圖片或css動畫，這些動畫會不斷觸發渲染，即使看不到也會觸發。IntersectionObserver可以用來在可見時才運行動畫。
- 儘量用css做動畫和過渡，這些動畫不可見時，瀏覽器會進行優化，並且css動畫比js動畫要高效的多。
- 避免通過輪詢來獲取服務器更新，可以用websocket或者持久連接來代替輪詢。
看起來處於空閒狀態的頁面，如果正在後臺進行工作，其用戶交互的響應效率也會降低，因此最小化後臺活動也可以提高響應能力以及電池壽命。
頁面在後臺時CPU零使用
這幾種場景時，頁面變爲非活動狀態(不是用戶的首要焦點)，例如：
- 用戶切換到其他tab
- 用戶切換到其他app
- 瀏覽器窗口最小化
- 瀏覽器窗口失去焦點
- 瀏覽器窗口在其他窗口後面
- 窗口所在的空間不是當前空間（MacOS纔有空間的概念）
當頁面不活動時，webkit會自動做以下處理來減少耗電：
- 停止調用requestAnimationFrame
- CSS和SVG動畫會暫停
- 定時器會節流
此外，WebKit利用操作系統提供的能力來最大限度地提高效率：
- 在iOS上，不用的選項卡(tab頁)會完全暫停。
- 在macOS上，選項卡會響應App Nap功能，這意味着不可視更新的選項卡的Web進程優先級較低，並且其計時器會做節流處理。
但是，頁面可以通過計時器（setTimeout和setInterval），消息，網絡事件等觸發CPU喚醒。頁面在後臺時應避免這些喚醒，有兩個API對此有用：
- 頁面可見性API提供了一種響應頁面轉換爲後臺或前臺的方法。這是一種避免頁面在後臺時更新UI的好方法。用visibilitychange事件，在頁面可見時更新頁面內容。
- 頁面失去焦點時會發出blur事件。這時，頁面依然可見，但是不是聚焦窗口。可以考慮暫停動畫。
查找問題最簡單的方式就是用瀏覽器控制檯的時間線功能。頁面在後臺時，時間線記錄中不應該有任何事件發生。
找到問題所在
現在我們知道了web頁面主要的耗電因素，並且給出了一些創建高效頁面的一般規則。 接下來討論一下怎樣找出並解決導致功耗過大的問題。
腳本
如上所述，現代CPU能夠把功率從空閒態的非常低提升到非常高來滿足用戶交互和其他任務的要求。 也正因爲如此，CPU是導致電池壽命減少的主要原因。頁面加載期間CPU要做一連串工作包括加載、解析、渲染資源，並且執行js。在大多數現代web頁面上，執行js花費的時間遠遠高出瀏覽器用在其餘加載過程中花費的時間。因爲儘量減少js執行時間對省電有最大的效益。
測量CPU使用的最佳方法是使用Web Inspector，就像之前文章裏所說的，時間線面板可以顯示任意選定時間範圍內的CPU活動。
爲了高效地使用CPU，WebKit儘可能在多核上分配工作（使用Workers的頁面也可以使用多核）。Web Inspector提供與頁面主線程同時運行的線程的細分圖表。例如，以下屏幕截圖顯示了滾動具有複雜渲染和視頻播放的頁面時的線程：
在尋找優化點時，應關注主線程，因爲js運行在主線程上（除非您正在使用Workers）。我們可以使用時間線面板的 “JavaScript and Events” 項來了解觸發腳本的內容。也許你在響應用戶或滾動事件或從requestAnimationFrame觸發隱藏元素的更新時做了太多工作。你需要了解你在頁面上使用的JavaScript庫和第三方腳本所做的工作。如果要深入挖掘，你可以使用Web Inspector的JavaScript profiler來查看時間都用在哪些地方。
“WebKit線程”中的活動主要由與JavaScript相關的工作觸發：JIT編譯和垃圾收集。因此減少運行的腳本數量並減少短生命週期的JavaScript對象可以降低webkit線程的活動。
WebKit調用的各種其他系統框架都使用線程，“Other thread” 包括了這些工作; “Other thread” 最主要的工作是渲染，我們將在下面討論。
渲染
主線程CPU使用也可以通過大量佈局和繪製來觸發；這些通常由腳本觸發，但是除了transform，opacity和filter之外的屬性的CSS動畫也可以觸發它們。查看時間線面板的 “Layout and Rendering” 項將幫助你瞭解導致活動的原因。
如果 “Layout and Rendering” 顯示的渲染過程不能清楚展示頁面正在發生什麼變化，可以啓用 Paint Flashing：
這部分渲染將用紅色背景的高亮顯示，你可以滾動頁面查看。注意，WebKit會保留一些“透視”圖塊以允許平滑滾動，因此視口中不可見的圖形仍然可以正常工作以使屏幕外圖塊保持最新。如果渲染展示在時間軸中，說明它正在工作。
除了導致CPU耗電外，渲染通常還會觸發GPU工作。macOS和iOS上的WebKit使用GPU進行渲染，因此觸發渲染可以顯着增加耗電。額外的CPU使用通常顯示在時間線面板 “CPU” 項中的 “Other threads” 下。
GPU還用於canvas渲染，包括2D畫布和WebGL / WebGPU。爲了最小限度使用繪圖，canvas上顯示的內容沒有變化時不要調用canvas API，並嘗試優化canvas繪製代碼。
許多Mac筆記本電腦都有兩個GPU，一個與CPU相同內核的集成GPU，功能不強但功耗低，一個功能更強大但是功耗也更高的獨立GPU。 WebKit默認使用集成GPU；你可以使用powerPreference上下文創建參數請求獨立GPU，但只有在你可以證明電源成本合理時才執行此操作。
網絡
無線網絡會以意想不到的方式影響電池壽命。手機有功能更強大的無線模塊（WiFi和蜂窩網絡芯片）和更小的電池，因此受到的影響最大。 遺憾的是，在實驗室外測量網絡的功率影響並不容易，但可以通過遵循一些簡單的規則來減少。
降低網絡功耗的最直接方法是最大限度地利用瀏覽器的緩存。 減少頁面加載時間的所有最佳實踐也可以通過減少無線模塊需要打開的時間來使電池受益。
另一個重要方面是在時間上將網絡請求組合在一起。每當有新請求到來時，操作系統都需要打開無線模塊，連接到基站或蜂窩塔，並傳輸字節。在發送分組之後，在發送更多分組的情況下，無線電保持供電少量時間。
如果頁面非經常性的發送少量數據，則開銷可能會大於傳輸數據所需的能量。
可以從 Web Inspector 的時間線面板的 “Network Requests” 項中發現此類問題。例如，以下屏幕截圖顯示了幾秒鐘內發送的四個單獨請求：
同時發送所有請求將提高網絡用電效率。
總結
我們可以對網頁做很多優化來延長電池壽命。
在Web Inspector中測量對電池影響並降低損耗非常重要。 這樣做可以改善用戶體驗並延長電池壽命。
提高電池壽命的最直接方法是最大限度地降低CPU使用率。 新的Web Inspector提供了強大的工具可以全程監控。
爲了讓電池壽命更長，我們要：
- 在空閒時將CPU使用率降至零
- 在用戶交互期間最大化性能以快速恢復空閒