{"json_modified": "2016-03-28T08:32:27.721604", "uuid": "13919767-e4f6-4a09-af80-9864498bcb47", "title": "Efficient animation for web games", "url": "/en-US/docs/Games/Techniques/Efficient_animation_for_web_games", "tags": ["Animation", "Games", "JavaScript"], "translations": [], "modified": "2016-01-11T11:55:18", "label": "Efficient animation for web games", "localization_tags": [], "locale": "en-US", "id": 88377, "last_edit": "2016-01-11T11:55:16", "summary": "This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on <a href=\"/en-US/docs/Web/Guide/CSS/Using_CSS_transitions\">CSS transitions</a> and <a href=\"/en-US/docs/Web/Guide/CSS/Using_CSS_animations\">CSS animations</a>, and JavaScript loops involving <a href=\"/en-US/docs/Web/API/Window/requestAnimationFrame\" title=\"You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. The callback rate may be reduced to a lower rate when running in background tabs or in hidden &lt;iframe&gt;s in order to improve performance and battery life.\"><code>window.requestAnimationFrame</code></a>.", "sections": [{"id": "Subnav", "title": "Subnav"}, {"id": "Help_the_browser_help_you", "title": "Help the browser help you"}, {"id": "Use_requestAnimationFrame", "title": "Use requestAnimationFrame"}, {"id": "Measure_performance", "title": "Measure performance"}, {"id": "A_take-away", "title": "A take-away"}], "slug": "Games/Techniques/Efficient_animation_for_web_games", "review_tags": ["technical"]}