功耗优化介绍
在 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,功耗的优化结果如下图:
来源: http://www.bianceng.cn/web/Html/201308/37229.htm