A summary of power tuning optimization for HTML 5 application development

Introduction to power optimization

In the WWW 2012–session:mobile Web Performance Conference paper, I found a paper published by the Stanford CS Department for HTML5 Mobile application development, who killed I battery:analyzing M Obile Browser energy consumption. In detail in the mobile browser, how to write a Web site can save power, measurement and research results for mobile end HTML5 application development provides an important reference value

Mobile browsers and web analytics

First, the measurement tool: The use of Agilent 34410A high-precision Digital Power multimeter, can be real-time measurement of equipment power consumption. The Android Developer phone 2 (ADP2) HTC Handset is selected for the development machine. They added some functional modules to the Web browser for easy measurement, the frame composition is as follows:

The typical Facebook phone-side web page opens, and the power changes seen on the Agilent meter are shown below:

Introduction to power optimization point

By such measurements, it is found that the main power points in the mobile device are:

1. Network transmission, whether it is 3G network or WiFi transmission is a hotspot of power consumption of mobile devices.

2. Page loading and rendering, because the page loading and rendering requires a lot of CPU and GPU time to perform, is another mobile device power consumption hotspot.

In Web pages, the main power points are:

1. Interpretation of JavaScript code execution

2. Matching and rendering of CSS rules

3. Image parsing and rendering according to the above analysis and experiment,

Summarize some of the following power optimization points that are valuable to developers:

1. Optimize the efficiency of JavaScript interpretation execution

Because JavaScript interpretation execution is a power consumption hotspot, optimizing its efficiency at the mobile end can significantly increase power consumption, with the following three points in the main set optimized:

1. Dynamic JavaScript execution increases the power consumption of the page, so use Ajax sparingly, unless necessary.

2. Load only useful functions on the current page, that is, only JavaScript that is relevant to this page is loaded. Traditional web development often loads a large JavaScript function, and each page can be used directly. But the actual user may have just looked at the current page and closed it, not into other pages.

3. Avoid the use of some common JavaScript libraries, especially those that are cropped and optimized without a mobile end. These include jquery.js.

Through the analysis of Wikipedia's JavaScript interpretation, power consumption is 15J before optimization, and only 9.5J after optimization, saving 43%

2. Reduce the power consumption of the CSS

As with JavaScript, in the CSS page, also just load this page about the CSS content, this I do web development, but also, all the pages of the CSS in two or even a CSS file, you can achieve reuse, but this is clearly not the mobile end of the choice to save power.

Through the analysis of the Apple.com mobile website, after optimizing the CSS style, the power consumption from 12J to 7J, saving 42%.

3. Optimize the resolution and loading of the picture

Through the analysis of mobile browsers, it is found that images in JPEG format are the most power saving. Traditional Web developers generally talk about small icons in PNG format, medium to make gif, large pictures will choose the JPEG format. However, on the mobile side, the browser, whether it is large map small, unified JPEG format is the most power consumption.

By analyzing Facebook and Amazon to convert all the pictures on their pages to JPEG, the results of the power dissipation are as follows: