HTML5应用开发功耗调优化小结

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/

For more complete information about compiler optimizations, see our Optimization Notice.