Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
Chapter 5. Animation > 5.11. Animation Best Practices
5.11. Animation Best Practices
As you create your own animations, here are some best practices to keep in mind:
• Use a requestAnimationFrame() polyfill method.
• Separate updating and drawing.
• Use time-based motion.
• Use clipping or blitting for restoring complex backgrounds.
• Keep one or more offscreen buffers for backgrounds.
• Don’t implement traditional double buffering: the browser does it for you.
• Avoid CSS shadows and rounded corners.
• Avoid Canvas shadows.
• Do not allocate memory during animations.
• Use profiling and timelines to monitor and improve performance.
You should use a requestAnimationFrame() polyfill function for your animations. That polyfill function should take into account the bugs specific to Firefox 4.0 and Chrome 10, as discussed in this chapter. requestAnimationFrame() is preferable to setTimeout() or setInterval() because requestAnimationFrame() is implemented specifically for animations.
