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

　　HTML5的优化一直是困扰我的难题，特别是在移动端开发游戏和应用，所以对此进行了一些总结：

功耗优化点介绍

在移动设备中主要的功耗点在：

1. 网络的传输， 不管是3G网络还是WiFi传输都是移动设备功耗热点。

2. 页面的加载和渲染，由于页面加载和渲染需要大量的CPU和GPU时间去执行，是移动设备的另一个功耗热点。

在Web开发中，主要的功耗点在于：

1. JavaScript代码的解释执行

2. CSS规则的匹配和渲染

3. 图片的解析和渲染 

总结出以下一些对开发者有价值的功耗优化点：

1. 优化JavaScript解释执行的效率

由于JavaScript解释执行是一个功耗热点，所以在移动端优化其效率是可以显著提升功耗的，主要集中的以下三点来优化：

1. 尽量避免使用一些通用的JavaScript库，尤其未经移动端裁剪和优化的库，其中就包括JQuery.js。

2. 仅加载对当前页面执行有用函数，即只加载和本页面有关的JavaScript。传统Web开发经常加载一张大的JavaScript函数，每个页面都可以直接用。但是实际用户可能仅仅看了当前页面就关闭了，并不进入其他页面。

3. 动态的JavaScript执行会增加页面的功耗，所以除非在必要的情况下，尽量少用AJAX。

2. 降低CSS的功率消耗

和JavaScript一样，在CSS的页面中，同样仅仅加载本页面有关的CSS内容，这点本人在做Web开发时，也同样，将所有页面的CSS写在两个甚至一个CSS文件中，可以实现重用，但是这样在移动端显然不是节省功耗的选择。

3. 优化图片的解析和加载

通过对移动浏览器的分析，发现JPEG格式的图片是最节省功耗的。传统的网页开发者一般把小图标做成png格式，中等的做成gif，大图片才会选择JPEG格式。但是在移动端，浏览器不管是大图小图，统一是JPEG格式功耗最省。

转载一个英特尔专家做的实验：

通过分析Facebook和Amazon，将其页面上的所有图片转换为JPEG，功耗的优化结果如下图：