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/