Use the DIV tag with background image instead of the IMG tag. The difference is particularly noticeable when using individual sprites instead of sprite sheets, as changing the IMG’s src property is very slow.
Many individual sprites are faster than sprite sheets in nearly every case. The exceptions were the fully hardware accelerated browsers on Windows, where sprite sheets offer a 5-10% advantage. Unless you are only targeting those browsers, we recommend staying with individual sprites. For browsers with the CANVAS tag, we expect an optimum balance of download and draw performance is to download sprite sheets but then use CANVAS to cut them up.
Update DOM elements rather than using innerHTML to load the parent. For several browsers, Firefox 4, Chrome 10 and 11, and IE9, innerHTML was faster, particularly for rotated sprites. However, for those browsers CANVAS tag performance was far superior to DOM manipulation, so update and switch to CANVAS when possible.
For axis-aligned images with integer position values, the CANVAS tag was superior across all desktop browsers. This had not been the case with floating point values -- and indicates software blitting in their render pipelines -- but if you are snapping and drawing axis aligned images, use CANVAS when you are able to.
For browsers that support 3D transforms -- we are currently testing on Chrome and Safari -- using translate3d(x,y,z) is equal to or faster than translate(x,y).
Last edited by ramsingla,