本系列目錄 《來做個網路瀏覽器吧！》文章列表

今天再來看一篇有趣的論文，題目是 Who Killed My Battery: Analyzing Mobile Browser Energy Consumption，是一個分析手機瀏覽器行為如何消耗電量的研究。

這研究如何重要呢？因為一般用手機不外乎就是上上網而已嗎。現代人用手機上網比打電話還來得重要了呢！更不用說一堆 APP 現在都是用 webview 做成，甚至直接是 web APP，那麼了解瀏覽器如何「偷」了你的電，就很重要啦！這篇瀏覽器是使用 Android 內建的 WebKit。

這邊作者用多用電表來檢測手機的耗電量。

這張圖可以看到量測的結果。

這邊是量測的機制，先架設好自動監測電表、手機、伺服器的環境，當伺服器收到要求，伺服器「開始傳資料」的時候設為紀錄起點，一直到瀏覽器渲染完畫面為終點，紀錄過程中消耗的電量。

注意的是傳資料這邊都靠 3G，理由是如果用 USB 雖然可以簡單排除無線傳播的消耗，但是 USB 卻會對手機充電，反而更難算。

作者也有針對 3G 上傳下載做功耗測量，後來發現「同樣大小」的資料，一次傳跟分很多次傳消耗的功差了好幾 %，這樣其實滿麻煩的，因為我們可以輕鬆得知一個網站總體積多大，然後如果只要知道總體積就能換算功耗的話就很方便。但實際上每個網站都由一堆檔案彼此連結呼叫，這樣計算起來就很麻煩，首先你要先算網站分成多少檔案，還要有不同體積對應功耗的對照表，可能還會有更多因素要考慮。最後作者索性直接都用「量量看」的方式來算功耗，而沒有去建立一個模型處理它。而這張表就是「一次性」資料傳送消耗的能量。

接著是實際量量看各大網站所需要的功耗，這邊不同手機當然會有差異，不過條件固定為同一支手機，瀏覽不同網站，看看趨勢還是很有用的。注意這邊是包含「下載」的功耗。

媽呀！蘋果真的超吃電的！
解釋一下，造成這邊的結果是因為，蘋果沒有手機版網頁，此外她也沒有針對 RWD 做優化，一律載入最高畫質的圖片，這會造成傳輸、解析上的消耗。

那如果沒有包含下載，只去看瀏覽器渲染出網頁的功耗呢？

單看這張圖其實看不出什麼，頂多發現 Youtube 渲染成本高一點。
但我們發現有沒有 cache 的形況下，消耗幾乎差不多，意思是動態產生 js、css 的代價很高！

這張圖顯示渲染圖片佔整個網站的消耗，可以發現所佔比例很高，不過這也很合理，圖片本來就吃資源。

再來我們看 javascript 所佔的消耗

看起來消耗很大，主要有兩個原因，一來是 JS 檔案很大（常常 bundle.js 就十幾 MB）這會使傳輸消耗增加，再來就是 JS 跑很多邏輯，導致運算上消耗很大。

這張圖是 CSS 上的消耗

微軟消耗很大是因為他的 CSS 檔案很大（不是客製化就會這樣），而亞馬遜這邊很大是因為他的 CSS 很複雜，對非常多項目做客製化，此外還包含動態效果。

再來我們看圖片格式有什麼差異？

可以發現 JPEG 所需要的功耗最少，這根圖片格式的解析有關係，而下面個這個表格，是比較網站使用原始圖片（包含 png、gif）和比較全部轉成 jpeg 格式後，功耗的差異。

從這邊我們了解到，將網站的圖片都換成 jpeg 對優化來說是比較好的。這是因為 jpeg 可以用硬體處理，所以比較快。

再來談談 offloading，意思是我們取得圖片之後還要轉換成 bitmap，這過程中瀏覽器要花很多資源，所以如果可以讓伺服器先幫我們把這些要計算的東西算好，自然消耗功率就比較少。可以看下圖。

看到這邊，大家多少了解一個網站會怎樣「偷」走你手機的電了！
身為網頁工程師，我們除了要注重畫面好不好看、畫面的 RWD、使用者體驗等等，我們常常忽略手機瀏覽網頁本身就是一件很吃電的事情，而如何優化手機上瀏覽網站的功耗，也是我們該注重的課題之一！

希望對大家有幫助，我們明天見！

關於作者

劉安齊

軟體工程師，熱愛寫程式，更喜歡推廣程式讓更多人學會

• 個人網站
• Github
• FB粉專--微中子