功耗优化介绍
在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，功耗的优化结果如下图：