【譯】Web內容如何影響電池的使用

原文地址： 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使用率降至零
• 在用戶交互期間最大化性能以快速恢復空閒