現(xiàn)在用戶(hù)上網(wǎng)大多使用移動(dòng)設(shè)備或者筆記本電腦。對(duì)這兩者來(lái)說(shuō)，電池壽命都很重要。在這篇文章里，我們將討論影響電池壽命的因素，以及作為一個(gè)web開(kāi)發(fā)者，我們?nèi)绾巫尵W(wǎng)頁(yè)耗電更少，以便用戶(hù)有更多時(shí)間來(lái)關(guān)注我們的內(nèi)容。

是什么在耗電？

移動(dòng)設(shè)備的電力消耗有以下幾個(gè)因素：

CPU （核心處理器）

GPU （圖形處理）

網(wǎng)絡(luò) （wifi或者蜂窩移動(dòng)網(wǎng)絡(luò)）

屏幕

屏幕功耗相對(duì)穩(wěn)定，并且主要由用戶(hù)控制（通過(guò)屏幕使用時(shí)間和亮度），但是對(duì)于其他組件，例如CPU，GPU，網(wǎng)絡(luò)模塊，功耗是動(dòng)態(tài)變化的，而且變化范圍很大。

系統(tǒng)根據(jù)當(dāng)前正在處理的任務(wù)調(diào)整CPU和GPU性能，包括在Web瀏覽器中用戶(hù)正在交互的網(wǎng)頁(yè)以及使用Web內(nèi)容的其他應(yīng)用程序。這是通過(guò)打開(kāi)或關(guān)閉某些組件以及通過(guò)更改其時(shí)鐘頻率來(lái)完成的?？偟膩?lái)說(shuō)，芯片所需的性能越高，其功率效率就越低。硬件可以非?？焖俚靥嵘礁咝阅埽ǖ切枰艽蟮墓β剩缓笱杆倩謴?fù)到更高效的低功耗狀態(tài)。

良好用電的一般原則

為了最大限度地延長(zhǎng)電池壽命，你必須盡量減少硬件處于高功率狀態(tài)的時(shí)間，讓硬件盡可能的處于空閑狀態(tài)。

對(duì)于web開(kāi)發(fā)者來(lái)說(shuō)，有三種交互場(chǎng)景需要注意：

1.用戶(hù)主動(dòng)與內(nèi)容交互

2.頁(yè)面處于前臺(tái)，但是用戶(hù)沒(méi)有交互

3.頁(yè)面處于后臺(tái)

高效的用戶(hù)交互

用戶(hù)交互的時(shí)候肯定會(huì)耗電。頁(yè)面需要快速的加載，并且能夠快速的響應(yīng)觸摸。在大多數(shù)場(chǎng)景中，減少首次渲染時(shí)間也會(huì)降低功耗。不過(guò)，在初始頁(yè)面加載后繼續(xù)加載資源和運(yùn)行腳本時(shí)要小心。我們要盡快讓系統(tǒng)返回空閑狀態(tài)。總的來(lái)說(shuō)，瀏覽器已經(jīng)完成了布局和渲染，js執(zhí)行的越少，耗電越少。

一旦頁(yè)面加載完，用戶(hù)可能會(huì)滾屏或者點(diǎn)擊頁(yè)面，這同樣會(huì)產(chǎn)生耗電（主要是CPU和GPU）,這是必要的消耗。要確保盡快返回空閑狀態(tài)。并且，最好使用瀏覽器本身提供的功能。- 舉例：普通的頁(yè)面滾動(dòng)肯定比用js自定義的滾動(dòng)更高效。

讓空閑狀態(tài)耗電趨向于零

當(dāng)用戶(hù)沒(méi)有和頁(yè)面交互時(shí)，盡可能的使頁(yè)面不耗電，例如：

1.盡量少用定時(shí)器以避免喚醒CPU,可以把基于定時(shí)器的任務(wù)合并，使用盡可能少的定時(shí)器。大量濫用定時(shí)器會(huì)導(dǎo)致CPU被頻繁喚醒，這比把這些任務(wù)合并處理要糟糕的多。

2.最大限度地減少動(dòng)畫(huà)內(nèi)容，如動(dòng)畫(huà)圖像和自動(dòng)播放視頻。要特別注意"loading"用的gif圖片或css動(dòng)畫(huà)，這些動(dòng)畫(huà)會(huì)不斷觸發(fā)渲染，即使看不到也會(huì)觸發(fā)。IntersectionObserver可以用來(lái)在可見(jiàn)時(shí)才運(yùn)行動(dòng)畫(huà)。

3.盡量用css做動(dòng)畫(huà)和過(guò)渡，這些動(dòng)畫(huà)不可見(jiàn)時(shí)，瀏覽器會(huì)進(jìn)行優(yōu)化，并且css動(dòng)畫(huà)比js動(dòng)畫(huà)要高效的多。

4.避免通過(guò)輪詢(xún)來(lái)獲取服務(wù)器更新，可以用websocket或者持久連接來(lái)代替輪詢(xún)。

看起來(lái)處于空閑狀態(tài)的頁(yè)面，如果正在后臺(tái)進(jìn)行工作，其用戶(hù)交互的響應(yīng)效率也會(huì)降低，因此最小化后臺(tái)活動(dòng)也可以提高響應(yīng)能力以及電池壽命。

頁(yè)面在后臺(tái)時(shí)CPU零使用

這幾種場(chǎng)景時(shí)，頁(yè)面變?yōu)榉腔顒?dòng)狀態(tài)(不是用戶(hù)的首要焦點(diǎn))，例如：

1.用戶(hù)切換到其他tab

2.用戶(hù)切換到其他app

3.瀏覽器窗口最小化

4.瀏覽器窗口失去焦點(diǎn)

5.瀏覽器窗口在其他窗口后面

6.窗口所在的空間不是當(dāng)前空間（MacOS才有空間的概念）

當(dāng)頁(yè)面不活動(dòng)時(shí)，webkit會(huì)自動(dòng)做以下處理來(lái)減少耗電：

1.停止調(diào)用requestAnimationFrame

2.CSS和SVG動(dòng)畫(huà)會(huì)暫停

3.定時(shí)器會(huì)節(jié)流

此外，WebKit利用操作系統(tǒng)提供的能力來(lái)最大限度地提高效率：

1.在iOS上，不用的選項(xiàng)卡(tab頁(yè))會(huì)完全暫停。

2.在macOS上，選項(xiàng)卡會(huì)響應(yīng)App Nap功能，這意味著不可視更新的選項(xiàng)卡的Web進(jìn)程優(yōu)先級(jí)較低，并且其計(jì)時(shí)器會(huì)做節(jié)流處理。

但是，頁(yè)面可以通過(guò)計(jì)時(shí)器（setTimeout和setInterval），消息，網(wǎng)絡(luò)事件等觸發(fā)CPU喚醒。頁(yè)面在后臺(tái)時(shí)應(yīng)避免這些喚醒，有兩個(gè)API對(duì)此有用：

1.頁(yè)面可見(jiàn)性API提供了一種響應(yīng)頁(yè)面轉(zhuǎn)換為后臺(tái)或前臺(tái)的方法。這是一種避免頁(yè)面在后臺(tái)時(shí)更新UI的好方法。用visibilitychange事件，在頁(yè)面可見(jiàn)時(shí)更新頁(yè)面內(nèi)容。

2.頁(yè)面失去焦點(diǎn)時(shí)會(huì)發(fā)出blur事件。這時(shí)，頁(yè)面依然可見(jiàn)，但是不是聚焦窗口?？梢钥紤]暫停動(dòng)畫(huà)。

查找問(wèn)題最簡(jiǎn)單的方式就是用瀏覽器控制臺(tái)的時(shí)間線(xiàn)功能。頁(yè)面在后臺(tái)時(shí)，時(shí)間線(xiàn)記錄中不應(yīng)該有任何事件發(fā)生。

找到問(wèn)題所在

現(xiàn)在我們知道了web頁(yè)面主要的耗電因素，并且給出了一些創(chuàng)建高效頁(yè)面的一般規(guī)則。接下來(lái)討論一下怎樣找出并解決導(dǎo)致功耗過(guò)大的問(wèn)題。

腳本

如上所述，現(xiàn)代CPU能夠把功率從空閑態(tài)的非常低提升到非常高來(lái)滿(mǎn)足用戶(hù)交互和其他任務(wù)的要求。也正因?yàn)槿绱?，CPU是導(dǎo)致電池壽命減少的主要原因。頁(yè)面加載期間CPU要做一連串工作包括加載、解析、渲染資源，并且執(zhí)行js。在大多數(shù)現(xiàn)代web頁(yè)面上，執(zhí)行js花費(fèi)的時(shí)間遠(yuǎn)遠(yuǎn)高出瀏覽器用在其余加載過(guò)程中花費(fèi)的時(shí)間。因?yàn)楸M量減少js執(zhí)行時(shí)間對(duì)省電有最大的效益。

測(cè)量CPU使用的最佳方法是使用Web Inspector，就像之前文章里所說(shuō)的，時(shí)間線(xiàn)面板可以顯示任意選定時(shí)間范圍內(nèi)的CPU活動(dòng)。

為了高效地使用CPU，WebKit盡可能在多核上分配工作（使用Workers的頁(yè)面也可以使用多核）。Web Inspector提供與頁(yè)面主線(xiàn)程同時(shí)運(yùn)行的線(xiàn)程的細(xì)分圖表。例如，以下屏幕截圖顯示了滾動(dòng)具有復(fù)雜渲染和視頻播放的頁(yè)面時(shí)的線(xiàn)程：

在尋找優(yōu)化點(diǎn)時(shí)，應(yīng)關(guān)注主線(xiàn)程，因?yàn)閖s運(yùn)行在主線(xiàn)程上（除非您正在使用Workers）。我們可以使用時(shí)間線(xiàn)面板的 “JavaScript and Events” 項(xiàng)來(lái)了解觸發(fā)腳本的內(nèi)容。也許你在響應(yīng)用戶(hù)或滾動(dòng)事件或從requestAnimationFrame觸發(fā)隱藏元素的更新時(shí)做了太多工作。你需要了解你在頁(yè)面上使用的JavaScript庫(kù)和第三方腳本所做的工作。如果要深入挖掘，你可以使用Web Inspector的JavaScript profiler來(lái)查看時(shí)間都用在哪些地方。

“WebKit線(xiàn)程”中的活動(dòng)主要由與JavaScript相關(guān)的工作觸發(fā)：JIT編譯和垃圾收集。因此減少運(yùn)行的腳本數(shù)量并減少短生命周期的JavaScript對(duì)象可以降低webkit線(xiàn)程的活動(dòng)。

WebKit調(diào)用的各種其他系統(tǒng)框架都使用線(xiàn)程，“Other thread” 包括了這些工作; “Other thread” 最主要的工作是渲染，我們將在下面討論。

渲染

主線(xiàn)程CPU使用也可以通過(guò)大量布局和繪制來(lái)觸發(fā)；這些通常由腳本觸發(fā)，但是除了transform，opacity和filter之外的屬性的CSS動(dòng)畫(huà)也可以觸發(fā)它們。查看時(shí)間線(xiàn)面板的 “Layout and Rendering” 項(xiàng)將幫助你了解導(dǎo)致活動(dòng)的原因。

如果 “Layout and Rendering” 顯示的渲染過(guò)程不能清楚展示頁(yè)面正在發(fā)生什么變化，可以啟用 Paint Flashing：

這部分渲染將用紅色背景的高亮顯示，你可以滾動(dòng)頁(yè)面查看。注意，WebKit會(huì)保留一些“透視”圖塊以允許平滑滾動(dòng)，因此窗體中不可見(jiàn)的圖形仍然可以正常工作以使屏幕外圖塊保持最新。如果渲染展示在時(shí)間軸中，說(shuō)明它正在工作。

除了導(dǎo)致CPU耗電外，渲染通常還會(huì)觸發(fā)GPU工作。macOS和iOS上的WebKit使用GPU進(jìn)行渲染，因此觸發(fā)渲染可以顯著增加耗電。額外的CPU使用通常顯示在時(shí)間線(xiàn)面板 “CPU” 項(xiàng)中的 “Other threads” 下。

GPU還用于canvas渲染，包括2D畫(huà)布和WebGL / WebGPU。為了最小限度使用繪圖，canvas上顯示的內(nèi)容沒(méi)有變化時(shí)不要調(diào)用canvas API，并嘗試優(yōu)化canvas繪制代碼。

許多Mac筆記本電腦都有兩個(gè)GPU，一個(gè)與CPU相同內(nèi)核的集成GPU，功能不強(qiáng)但功耗低，一個(gè)功能更強(qiáng)大但是功耗也更高的獨(dú)立GPU。WebKit默認(rèn)使用集成GPU；你可以使用powerPreference上下文創(chuàng)建參數(shù)請(qǐng)求獨(dú)立GPU，但只有在你可以證明電源成本合理時(shí)才執(zhí)行此操作。

網(wǎng)絡(luò)

無(wú)線(xiàn)網(wǎng)絡(luò)會(huì)以意想不到的方式影響電池壽命。手機(jī)有功能更強(qiáng)大的無(wú)線(xiàn)模塊（WiFi和蜂窩網(wǎng)絡(luò)芯片）和更小的電池，因此受到的影響最大。遺憾的是，在實(shí)驗(yàn)室外測(cè)量網(wǎng)絡(luò)的功率影響并不容易，但可以通過(guò)遵循一些簡(jiǎn)單的規(guī)則來(lái)減少。

降低網(wǎng)絡(luò)功耗的最直接方法是最大限度地利用瀏覽器的緩存。減少頁(yè)面加載時(shí)間的所有最佳實(shí)踐也可以通過(guò)減少無(wú)線(xiàn)模塊需要打開(kāi)的時(shí)間來(lái)使電池受益。

另一個(gè)重要方面是在時(shí)間上將網(wǎng)絡(luò)請(qǐng)求組合在一起。每當(dāng)有新請(qǐng)求到來(lái)時(shí)，操作系統(tǒng)都需要打開(kāi)無(wú)線(xiàn)模塊，連接到基站或蜂窩塔，并傳輸字節(jié)。在發(fā)送分組之后，在發(fā)送更多分組的情況下，無(wú)線(xiàn)電保持供電少量時(shí)間。

如果頁(yè)面非經(jīng)常性的發(fā)送少量數(shù)據(jù)，則開(kāi)銷(xiāo)可能會(huì)大于傳輸數(shù)據(jù)所需的能量。

可以從 Web Inspector 的時(shí)間線(xiàn)面板的 “Network Requests” 項(xiàng)中發(fā)現(xiàn)此類(lèi)問(wèn)題。例如，以下屏幕截圖顯示了幾秒鐘內(nèi)發(fā)送的四個(gè)單獨(dú)請(qǐng)求：

同時(shí)發(fā)送所有請(qǐng)求將提高網(wǎng)絡(luò)用電效率。

總結(jié)

我們可以對(duì)網(wǎng)頁(yè)做很多優(yōu)化來(lái)延長(zhǎng)電池壽命。

在Web Inspector中測(cè)量對(duì)電池影響并降低損耗非常重要。這樣做可以改善用戶(hù)體驗(yàn)并延長(zhǎng)電池壽命。

提高電池壽命的最直接方法是最大限度地降低CPU使用率。新的Web Inspector提供了強(qiáng)大的工具可以全程監(jiān)控

為了讓電池壽命更長(zhǎng)，我們要：

在空閑時(shí)將CPU使用率降至零

在用戶(hù)交互期間最大化性能以快速恢復(fù)空閑

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

原文作者：Benjamin Poulain & Simon Fraser

喜歡小編的可以點(diǎn)個(gè)贊關(guān)注小編哦，小編每天都會(huì)給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準(zhǔn)備了新出的前端編程學(xué)習(xí)資料，免費(fèi)分享給大家！ 如果你也想學(xué)習(xí)前端，可以加群950919261獲取資料。感謝您的閱讀