HTML5應用開發功耗調優化小結
功耗優化介紹
在WWW 2012 – Session: Mobile Web Performance會議論文中發現一篇對HTML5移動應用開發非常有參考意義的由斯坦福CS系發表的一篇論文，Who Killed My Battery: Analyzing Mobile Browser Energy Consumption。裏面詳細談到了在mobile browser中，如何寫網站可以節省功耗，測量和研究的結果爲移動端HTML5應用開發提供了重要的參考價值
移動瀏覽器和網站分析
首先介紹一下測量工具：採用安捷倫34410A高精度數字功率萬用表，可以實時測量設備的功耗情況。開發機選用Android Developer Phone 2 (ADP2) HTC手機。他們對web瀏覽器添加了一些功能模塊便於測量，架構圖如下：
典型的Facebook手機端網頁打開，在安捷倫測量儀上可以看到的功耗變化如下圖：
功耗優化點介紹
通過這樣的測量，發現在移動設備中主要的功耗點在：
1. 網絡的傳輸， 不管是3G網絡還是WiFi傳輸都是移動設備功耗熱點。
2. 頁面的加載和渲染，由於頁面加載和渲染需要大量的CPU和GPU時間去執行，是移動設備的另一個功耗熱點。
在Web網頁中，主要的功耗點在於：
1. JavaScript代碼的解釋執行
2. CSS規則的匹配和渲染
3. 圖片的解析和渲染 根據上面的分析和實驗，
總結出以下一些對開發者有價值的功耗優化點：
1. 優化JavaScript解釋執行的效率
由於JavaScript解釋執行是一個功耗熱點，所以在移動端優化其效率是可以顯著提升功耗的，主要集中的以下三點來優化：
1. 動態的JavaScript執行會增加頁面的功耗，所以除非在必要的情況下，儘量少用AJAX。
2. 僅加載對當前頁面執行有用函數，即只加載和本頁面有關的JavaScript。傳統Web開發經常加載一張大的JavaScript函數，每個頁面都可以直接用。但是實際用戶可能僅僅看了當前頁面就關閉了，並不進入其他頁面。
3. 儘量避免使用一些通用的JavaScript庫，尤其未經移動端裁剪和優化的庫。其中就包括JQuery.js。
通過對WiKipedia的JavaScript解釋執行的分析，在優化前，功耗爲15J, 優化後僅爲9.5J, 功耗節省了43%
2. 降低CSS的功率消耗
和JavaScript一樣，在CSS的頁面中，同樣僅僅加載本頁面有關的CSS內容，這點本人在做Web開發時，也同樣，將所有頁面的CSS寫在兩個甚至一個CSS文件中，可以實現重用，但是這樣在移動端顯然不是節省功耗的選擇。
通過的Apple.com移動網站的分析，在優化CSS的樣式後，功耗從12J降低到7J，節省了42%。
3. 優化圖片的解析和加載
通過的移動瀏覽器的分析，發現JPEG格式的圖片是最節省功耗的。傳統的網頁開發者一般講小圖標做成png格式，中等的做成gif，大圖片纔會選擇JPEG格式。但是在移動端，瀏覽器不管是大圖小圖，統一是JPEG格式功耗最省。
通過分析Facebook和Amazon，將其頁面上的所有圖片轉換爲JPEG，功耗的優化結果如下圖：
1. http://www2012.wwwconference.org/
2. http://www2012.wwwconference.org/program/workshops/