Power Considerations of Web Image Animations

Developers have substantially improved the performance and power usage of websites and the browsers themselves in recent years. However, this improvement is limited to the factors that browsers can control. Web developers also have a significant ability to improve the performance and power of their websites by making efficient use of resources.

This article explores the power and performance considerations of a common bottleneck on otherwise idle websites: web image animations, specifically in the form of fading and sliding image carousels. A poorly written image carousel on a website can increase total system power by 10%, and if the page is left open, even in the background, that page can noticeably reduce battery life. We analyze several factors related to web image animations that affect performance and power usage, namely the methods of performing periodic activity and the methods of manipulating styles, and present recommendations for the most power efficient methods.

Measuring Power

In this paper we measure power usage on Windows* and OS X* using Intel® Power Gadget. Intel® Power Gadget is a cross platform tool for measuring CPU package power, along with CPU frequency and temperature, via GUI and command-line logging. Web developers can likewise use Intel® Power Gadget to easily measure the power usage of their websites. The most common use case is to log power usage for a sufficient period of time, then compare the average package power or cumulative energy usage across different website configurations.

Periodic Activity

The most significant factor in the power and performance of web image animations is the method and frequency of performing periodic activity. The obvious option is to use the setTimeout or setInterval functions, which allow a callback function to be called in a specified number of milliseconds. However, these may not be the ideal option for performing image animations. These methods allow a very small period to be specified, but a period less than ~16 milliseconds is unlikely to provide any noticeable visual improvement, specifically because a 16 millisecond period results in ~60 frames per second. Additionally, using a period of less than 16 milliseconds will prevent the CPU for going into deeper sleep states, which unnecessarily increases energy usage of the system. There are other potential issues with setTimeout/setInterval based animation methods. One potential issue is that the execution time of a setTimeout/setInterval callback is likely to take several milliseconds. Because callbacks are called synchronously, the choice of a period of only a few milliseconds may cause the animation to run slower than anticipated, which will significantly increase the power usage and may affect the visual quality of the animation. Another potential issue is that setTimeout/setInterval based callbacks are more likely to have programming issues that are elicited by timer throttling. When a page is occluded, most modern web browsers will throttle the period of timers, which may cause issues with animation callbacks that are expecting to be called at a regular period. 

A better option for performing periodic activity is to explicitly allow the browser to decide on the specific period by using requestAnimationFrame or CSS animations. In the case of requestAnimationFrame, the programming paradigm is essentially the same as that of setTimeout/setInterval. requestAnimationFrame is called with a specified callback function, and the browser will call the callback after a period appropriate for animation in the current context; the period will typically be ~16 milliseconds for active pages, and will be throttled for inactive pages. Note that requestAnimationFrame must be called again within the callback if you want the animation to continue. The primary advantage of using requestAnimationFrame is that the browser will choose a period that will provide good visual quality when a page is active, and periodic updates when the page is inactive, while minimizing energy consumption across all contexts. Also, because the programmer does not have an expectation for the frequency that a callback will be called, requestAnimationFrame callbacks are constructed using timestamps to determine the current progress of the animation; this helps to avoid any programming issues that may result from timer throttling. See Figure 1 below for a sample usage of requestAnimationFrame to perform a simple animation that is supported across browsers.

var requestAnimationFrame = ( function() {
	return	window.requestAnimationFrame		||
			window.webkitRequestAnimationFrame	||
			window.mozRequestAnimationFrame		||
			window.oRequestAnimationFrame		||
			window.msRequestAnimationFrame		||
			function(callback) {
				window.setTimeout(callback, 1000 / 60);
			}
})();

var start = new Date().getTime();
var animationTime = 300; // ms
requestAnimationFrame(animateImage);

function animateImage() {
	var elapsed = (new Date()).getTime() - start;
	if (elapsed < animationTime) {
		elem.style.opacity = 1.0 - elapsed / animationTime;
		requestAnimationFrame(animateImage);
	}
}

Figure 1. Performing an image animation using requestAnimationFrame.

 

requestAnimationFrame provides energy savings for active pages by choosing an animation period large enough to allow the CPU to enter deeper sleep states. requestAnimationFrame may also provide energy savings for inactive pages by more aggressively throttling timers than a browser would when using setTimeout/setInterval. Figure 2 lists CPU power reduction when using requestAnimationFrame compared to a common setInterval implementation on Chrome, Firefox, Safari, and Internet Explorer on Windows 8 and OS X 10.9.

 

Windows 8

OS X 10.9

Win 8

OS X 10.9

Win 8

OS X 10.9

 

Browser Version

Active Page

Occluded Page

Chrome

29.0.1547.66 m

29.0.1547.65

1.13

1.11

1.00

1.00

Firefox

23.0.1

23.0.1

1.09

1.03

1.02

0.99

Safari

5.1.7

7.0 (9537.66)

2.32

0.99

1.06

1.00

Internet Explorer

10.0.9200.16660

 

1.04

 

1.05

 

Figure 2. CPU power reduction when using requestAnimationFrame compared to setInterval for fade and slide image carousel animations. Values represent ratio of average power of setInterval over requestAnimationFrame. Collected on 2013 iMac. Images were animated for 300 milliseconds every 5 seconds; setInterval used a period of 3 milliseconds.

 

CSS animations are another option to allow the browser to select an appropriate animation period. CSS animations are constructed by specifying @keyframes with the start and end CSS styles. JavaScript can be used to specify the duration of an animation and to start and stop the animations. Like requestAnimationFrame, CSS animations allow the browser to select an animation period that will provide good visual quality while minimizing power consumption in all contexts. CSS animations may also allow for easier implementations of CSS-based animations than would be possible with JavaScript using setTimeout/setInterval or requestAnimationFrame. See Figure 3 for a sample usage of CSS animations to perform a simple animation; note that you may need to specify WebKit prefixes for full cross browser support.

<style>
@keyframes fadein {
	from { opacity:0.0; }
	to   { opacity:1.0; }
}
</style>
<script>
elem.addEventListener('animationend', function(){
	this.style.animationDuration = '';
	this.style.animationName = '';
}, false);
elem.style.animationDuration = '300ms';
elem.style.animationName = 'fadein';
</script>

Figure 3. Performing an image animation using CSS animations.

 

Animation Methods

The method of manipulating the style of an image while animating can also impact the power and performance of the animation. The most obvious method is to change the style through the DOM, yet this may not always be the most optimal method. The most optimal method depends on the specific animation being performed; we analyzed multiple methods of manipulating style for image fade and slide animations.

Image fading consists of progressively reducing the opacity of an image that is visually stacked over another image with full opacity. We analyzed the following image animation methods: DOM manipulation, CSS animation, and HTML5 canvas. DOM manipulation consists of setting element.style.opacity (see Figure 4 below). CSS animations consist of defining CSS keyframes with the appropriate opacity styles (see Figure 3 above). Using HTML5 canvas for image fading is convoluted because canvas is 2 dimensional, whereas fading from one image to another requires one image be stacked above the other; to work around this limitation, we set a CSS background image for the canvas, and draw the foreground image (context.drawImage) to the canvas at a reducing opacity (context.globalAlpha). We profiled the energy usage of these methods across all major browsers on Windows and OS X. Power data indicates that DOM manipulation is slightly but consistently more efficient than other methods of performing image fading. However, the power reduction of DOM manipulation is <1% on average, thus the power utilization of the animation method isn’t likely to significantly effect the power use or performance of the website as a whole.

imageTop.style.opacity = 0;
imageTop.style.zIndex = 1;
imageBottom.style.zIndex = 0;
var start = new Date().getTime();
requestAnimationFrame(fadeImage);

function fadeImage() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	var elapsed = (new Date()).getTime() - start;
	if (elapsed < animationTime) {
		imageTop.style.opacity = (elapsed / animationTime);
			requestAnimationFrame(fadeImage);
	} else {
			imageTop.style.opacity = 1;
	}
}

Figure 4. Performing image fade animation using DOM manipulation.

 

Image sliding consists of visually sliding an image out of view to the left within a container while simultaneously sliding an image into view from the right. We again analyzed image sliding animations with DOM manipulation, CSS animation, and HTML5 canvas. There are multiple possible methods of DOM manipulation to perform image sliding, and all methods appear to be roughly equal in terms of power and performance; however, we found using absolute positions and setting element.style.left for both images to be slightly but consistently more power efficient than other methods of DOM manipulation, and thus analyzed this method specifically. CSS animations consist of defining CSS keyframes for both images with the appropriate left styles. The HTML5 canvas method consists of drawing both images with context.drawImage at the appropriate horizontal offsets (see Figure 5 below). We again profiled the energy usage of these methods across all major browsers on Windows and OS X. Power data indicates that HTML5 canvas is consistently the most power efficient, reducing energy consumption up to 3% compared to other methods.
 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var start = new Date().getTime();
requestAnimationFrame(slideImage);

function slideImage() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	var elapsed = (new Date()).getTime() - start;
	if (elapsed < animationTime) {
		var offset = width * (elapsed / animationTime);
		ctx.drawImage(imageLeft, -offset, 0);
		ctx.drawImage(imageRight, width - offset, 0);
		requestAnimationFrame(slideImage);
	} else {
		ctx.drawImage(imageRight, 0, 0);
	}
}

Figure 5. Performing image slide animation using HTML canvas.

 

Conclusion

Web developers have a significant ability to improve the power and performance of their websites, which affect the energy use of the users entire system. Web image animations can have a notable impact on the power consumption of an otherwise idle website, and the methods chosen to perform these are important factors in reducing power consumption. The most significant factor in web image animations is the method of performing periodic activity. While setTimeout/setInterval is the most obvious choice, requestAnimationFrame is likely to provide similar visual quality while reducing power consumption for both active and inactive pages; CSS animations are an alternative method that provides similar benefits. The method of manipulating styles in an animation has a smaller impact on power usage, yet developers can likely reduce energy use by selecting the optimal method for a particular animation. For image fading, we have found that DOM manipulation is the most efficient method of animation, whereas for image sliding we have found that HTML5 canvas is the most efficient method. Web developers can use similar methods to measure the power usage of their websites and to use this data to tune their websites for power.

Para obtener más información sobre las optimizaciones del compilador, consulte el aviso sobre la optimización.