Javascript requestanimationframe

To help developers monitor performance during development.The Ideal Frame Rate for Game LoopsThe Limitations of Hardware and Display Refresh RatesYour game loop architecture must account for hardware constraints. Not all devices can handle high frame rates due to:CPU processing powerBrowser JavaScript engine efficiency (V8 Engine or others)Display refresh rate limitsMobile battery considerationsWebGL integration can offload rendering to the GPU, but computational graphics still face bottlenecks based on the user’s hardware.Games built with PixiJS or Babylon.js automatically adjust their loop execution speed based on device capabilities.Balancing High FPS with System Resource UsagePerformance tuning requires finding the sweet spot between visual quality and resource consumption.Web Workers can handle background tasks without affecting your main game loop performance.Consider these strategies:Implement frame skipping when necessaryUse time-based movement instead of frame-basedOptimize sprite animation and asset loadingMonitor JavaScript performance metrics during developmentCommon Approaches to Implementing Game LoopsUsing Basic Loops (Inefficient Methods)The naïve while (true) loop approach and why it failsThe simplest approach – a continuous while(true) loop – causes major issues:function startGame() { while(true) { updateGame(); renderGame(); }}This blocks the JavaScript event model completely. The browser becomes unresponsive because:The event loop gets stuckDOM manipulation can’t occurUser inputs are never processedThe browser may crash entirelyNo professional JavaScript game design pattern uses this approach.Using setInterval() for a timed loopMany beginners try setInterval() for their game loop:setInterval(function() { updateGameLogic(); renderFrame();}, 16); // ~60fpsWhile better than the while loop, this method has serious flaws:Doesn’t sync with browser rendering cyclesContinues running when the tab isn’t activeProduces inconsistent timingLeads to lag compensation issuesGame engines like Construct 3 abandoned this approach years ago.Introduction to requestAnimationFrame()How requestAnimationFrame() synchronizes with the browser’s renderingThe Web Animation API introduced requestAnimationFrame() as the solution to frame management:function gameLoop() { updateGameState(); renderGame(); requestAnimationFrame(gameLoop);}requestAnimationFrame(gameLoop);This method aligns your game loop with the browser’s natural rendering cycle.Mozilla Developer Network documentation highlights these benefits:Browser optimizes animations behind the scenesPauses when users switch tabs (saving resources)Adapts to screen refresh rate automaticallyProvides smooth frame transitionsAdvantages over setInterval() and traditional loopsUsing requestAnimationFrame() offers significant performance advantages:Natural synchronization with display refresh ratesReduced CPU usage when the game isn’t visibleBetter battery life on mobile devicesConsistent timing between frame updatesImproved compatibility across modern browsersThis is why all serious JavaScript game libraries like React Game Kit, GreenSock Animation Platform, and Kontra.js use this approach.Example of a basic game loop using requestAnimationFrame()Here’s a practical implementation with delta time calculation:let lastTimestamp = 0;function gameLoop(timestamp) { // Calculate time since last frame const

Skip to main content This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Troubleshooting common performance issues Article12/11/2024 In this article -->Users expect interactive and smooth pages. Each stage in the pixel pipeline represents an opportunity to introduce jank (interruptions of rendering). Learn about tools and strategies to identify and fix common problems that slow down runtime performance.SummaryDon't write JavaScript that forces the browser to recalculate layout. Separate read and write functions, and perform reads first.Don't over-complicate your CSS. Use less CSS and keep your CSS selectors simple.Avoid layout as much as possible. Choose CSS that doesn't trigger layout at all.Painting may take up more time than any other rendering activity. Watch out for paint bottlenecks.JavaScriptJavaScript calculations, especially ones that trigger extensive visual changes, may stall application performance. Don't let badly timed or long-running JavaScript interfere with user interactions.JavaScript: ToolsTake a recording in the Performance tool and look for suspiciously long Evaluate Script events. If you notice quite a bit of jank (interruptions of rendering) in your JavaScript, you may need to take your analysis to the next level and collect a JavaScript CPU profile. CPU profiles show where runtime is spent within the functions of your page. Learn how to create CPU profiles in Speed up JavaScript runtime ("Allocation sampling" profiling type).JavaScript: ProblemsThe following are common JavaScript problems and potential solutions.ProblemExampleSolutionExpensive input handlers affecting response or animation.Touch, parallax scrolling.Let the browser handle touch and scrolls, or bind the listener as late as possible. See Expensive Input Handlers in The Runtime Performance Checklist by Paul Lewis.Badly timed JavaScript affecting response, animation, load.User scrolls right after page load, setTimeout / setInterval.Optimize JavaScript runtime: use requestAnimationFrame, spread DOM manipulation over frames, use Web Workers; see Using Web Workers.Long-running JavaScript affecting response.The DOMContentLoaded event stalls, because it's swamped with JavaScript work.Move pure computational work to Web Workers; see Using Web Workers. If you need DOM access, use requestAnimationFrame. Garbage-y scripts affecting response or animation.Garbage collection may happen anywhere.Write less garbage-y scripts. See Garbage Collection in Animations in The Runtime Performance

Jerrica: a small, bare bones, 100% scheduled, web audio native, MOD playerIt's Showtime, Synergy!DemoA Final Hyperbase by Firefox and TipFAQWhat is Jerrica? What do you mean by "100% scheduled" and "web audio native"?Jerrica is a small bare bones MOD Player meant to be embedded in JavaScript games.By "100% scheduled" we mean that all the timing of audio events is handled using the web audio scheduler. Jerrica doesn't use setTimeout, setInterval, or other timing hacks. It is recommended that its processMusic function is called once per frame via requestAnimationFrame, but that's simply to ensure that sound events are always scheduled well ahead of when they need to occur.By "web audio native" we mean that all audio effects are achieved via the web audio API. Many audio players manipulate audio at the sample level, treating web audio as a "dumb pipe" for an audio buffer. Jerrica doesn't do that. After loading the samples from the MOD file, Jerrica only ever uses web audio functions to manipulate the sounds, for example via the playbackRate AudioParam.Okay, but what's a MOD?Oh God.Back before your parents met at Revision '99 (1999), MOD files were a popular sample-based music format for computers and consoles.Can I hear what a MOD being played by Jerrica sounds like?Of course!Here is a demo of Jerrica playing the mother of all tracker files, "A Final Hyperbase".Jerrica was also recently used in Montrose's Halloween 2022 Newgrounds submission, A Halloween Cat-Tastrophe.How do I use Jerrica?Give your JavaScript access to the createTrack function in jerrica.js.Call createTrack with an audio context and a Uint8Array containing your mod file and save the result to a track variable.Connect the track object's output web audio GainNode to a destination.Call the track object's processMusic function often.var track = createTrack(ac,buffer);track.output.connect(ac.destination);function frame() {requestAnimationFrame(frame); track.processMusic();}frame();console.log('hello');Why is this a bad idea?The scheduled nature of the playback means that Jerrica is both less timing accurate than other players and yet more sensitive to subtle timing issues in both the MOD pattern and sample definitions. Sound quality is very much a function of how your platform approaches down and up sampling. I've probably implemented several effects wrong. When you realize this you will compensate by hacking your MOD file. When you upgrade to a newer version where I've fixed the error, your MOD will sound wrong all over again. This cycle will continue until--best case--you send me Internet death threats or--worst case--you are compelled to write your own player.Why is this a good idea?The fact that nothing important happens in the main event loop means that the performance impact of using Jerrica is basically non-existent. The returned track object exposes basically all of the moving parts and manipulating playback is thus very straight-forward. The library is small (

Is wider than game gameScale = height / GAME_HEIGHT; gameOffsetX = (width - GAME_WIDTH * gameScale) / 2; gameOffsetY = 0; } else { // Screen is taller than game gameScale = width / GAME_WIDTH; gameOffsetX = 0; gameOffsetY = (height - GAME_HEIGHT * gameScale) / 2; }}// Listen for resize eventswindow.addEventListener('resize', resizeCanvas);// Initial sizingresizeCanvas();This approach keeps your game properly scaled regardless of screen size.Handling fullscreen modeAdd fullscreen support:const fullscreenButton = document.getElementById('fullscreenButton');fullscreenButton.addEventListener('click', toggleFullscreen);function toggleFullscreen() { if (!document.fullscreenElement) { // Enter fullscreen if (canvas.requestFullscreen) { canvas.requestFullscreen(); } else if (canvas.webkitRequestFullscreen) { canvas.webkitRequestFullscreen(); } else if (canvas.msRequestFullscreen) { canvas.msRequestFullscreen(); } } else { // Exit fullscreen if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }}// Handle fullscreen changesdocument.addEventListener('fullscreenchange', resizeCanvas);document.addEventListener('webkitfullscreenchange', resizeCanvas);document.addEventListener('mozfullscreenchange', resizeCanvas);document.addEventListener('MSFullscreenChange', resizeCanvas);Libraries like Babylon.js include these features out of the box for WebGL applications.ConclusionWrapping up, what is JavaScript game loop brings us to the core function that keeps games ticking smoothly. It synchronizes state updates and graphics rendering, creating seamless interactions. Understanding this helps us, as developers, to tackle challenges like CPU load and frame rate consistency, which are critical for real-time applications.By mastering components like requestAnimationFrame and maintaining stable loop cycles, we push web games to new performance levels. This approach isn’t just about code—it’s about crafting engaging user experiences. With these insights, building dynamic, browser-based games becomes not only feasible but truly exciting.The JavaScript game loop is a powerful tool in our web development toolkit. As technologies evolve, keeping up with performance techniques will remain crucial. Exploring these methods helps ensure the games we design are responsive, efficient, and ready for the future. Stay curious and keep coding!

On deviceif (shouldReduceQuality()) { enableLowPowerMode();}Progressive Web Apps that include games often implement these battery-saving features.Handling touch input differencesTouch needs different handling than mouse:// Handle both mouse and touchlet inputX = 0;let inputY = 0;let isPointerDown = false;// Mouse eventscanvas.addEventListener('mousedown', e => { isPointerDown = true; updatePointerPosition(e.clientX, e.clientY);});canvas.addEventListener('mousemove', e => { if (isPointerDown) { updatePointerPosition(e.clientX, e.clientY); }});canvas.addEventListener('mouseup', () => { isPointerDown = false;});// Touch eventscanvas.addEventListener('touchstart', e => { isPointerDown = true; updatePointerPosition(e.touches[0].clientX, e.touches[0].clientY); e.preventDefault(); // Prevent scrolling});canvas.addEventListener('touchmove', e => { updatePointerPosition(e.touches[0].clientX, e.touches[0].clientY); e.preventDefault();});canvas.addEventListener('touchend', () => { isPointerDown = false;});function updatePointerPosition(clientX, clientY) { const rect = canvas.getBoundingClientRect(); inputX = clientX - rect.left; inputY = clientY - rect.top;}Libraries like Kontra.js handle input normalization automatically.Is requestAnimationFrame supported in all browsers?Browser compatibilitySupport for requestAnimationFrame is now universal in modern browsers, but older browsers might need a polyfill:// requestAnimationFrame polyfillif (!window.requestAnimationFrame) { window.requestAnimationFrame = (function() { return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })();}The Mozilla Developer Network documentation confirms excellent support across all modern browsers.Alternative approaches for legacy supportFor very old browsers:// Fallback timing systemclass GameTimer { constructor(targetFPS = 60) { this.targetFPS = targetFPS; this.lastTime = 0; this.isRunning = false; this.useRAF = !!window.requestAnimationFrame; } start(loopFn) { this.isRunning = true; this.lastTime = performance.now(); if (this.useRAF) { const rafLoop = (timestamp) => { if (!this.isRunning) return; const deltaTime = timestamp - this.lastTime; this.lastTime = timestamp; loopFn(deltaTime / 1000); requestAnimationFrame(rafLoop); }; requestAnimationFrame(rafLoop); } else { // Fallback to setInterval const intervalMs = 1000 / this.targetFPS; this.intervalId = setInterval(() => { const now = performance.now(); const deltaTime = now - this.lastTime; this.lastTime = now; loopFn(deltaTime / 1000); }, intervalMs); } } stop() { this.isRunning = false; if (!this.useRAF && this.intervalId) { clearInterval(this.intervalId); } }}However, most indie game development now focuses on modern browsers where requestAnimationFrame is well-supported.How do I handle resizing and fullscreen in my game loop?Responsive canvas sizingKeep your canvas properly sized:const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');function resizeCanvas() { // Get the display size const displayWidth = window.innerWidth; const displayHeight = window.innerHeight; // Check if canvas size needs to change if (canvas.width !== displayWidth || canvas.height !== displayHeight) { // Set canvas size to match display canvas.width = displayWidth; canvas.height = displayHeight; // Update game scale/viewport updateGameViewport(displayWidth, displayHeight); }}function updateGameViewport(width, height) { // Calculate game scale to maintain aspect ratio const gameAspect = GAME_WIDTH / GAME_HEIGHT; const screenAspect = width / height; if (screenAspect > gameAspect) { // Screen

'background.jpg', 'sounds.mp3' ]); // Show loading screen showLoadingScreen(); // Wait for assets to load assetsPromise.then(() => { // Initialize game state gameState = createInitialState(); // Set up input setupInputHandlers(); // Hide loading screen hideLoadingScreen(); // Start the game loop lastTimestamp = performance.now(); requestAnimationFrame(gameLoop); });}// Start when the page loadswindow.addEventListener('load', initGame);This ensures your HTML5 game won’t start until everything is ready. The CreateJS library uses a similar approach for asset loading.Handling scene transitions and state changesStructured scene management keeps your code organized:const SCENES = { MAIN_MENU: 'mainMenu', GAMEPLAY: 'gameplay', PAUSE: 'pause', GAME_OVER: 'gameOver'};let currentScene = SCENES.MAIN_MENU;let sceneTransition = { active: false, from: null, to: null, progress: 0, duration: 1.0 // seconds};function updateGame(deltaTime) { // Handle scene transition if active if (sceneTransition.active) { sceneTransition.progress += deltaTime / sceneTransition.duration; if (sceneTransition.progress >= 1.0) { // Transition complete currentScene = sceneTransition.to; sceneTransition.active = false; initScene(currentScene); } return; } // Update current scene switch (currentScene) { case SCENES.MAIN_MENU: updateMainMenu(deltaTime); break; case SCENES.GAMEPLAY: updateGameplay(deltaTime); break; // Other scenes... }}function changeScene(newScene, transitionDuration = 1.0) { if (currentScene !== newScene && !sceneTransition.active) { sceneTransition = { active: true, from: currentScene, to: newScene, progress: 0, duration: transitionDuration }; }}This approach allows for smooth transitions between game states. WebGL games built with Three.js often use similar state management.Frequently Asked Questions About JavaScript Game LoopsHow do I achieve consistent physics across different devices?Time-based movement vs. frame-based movementAlways use time-based updates instead of frame counting:// BAD: Frame-based (speed varies with frame rate)function updateBad() { player.x += 5; // 5 pixels per frame}// GOOD: Time-based (consistent regardless of frame rate)function updateGood(deltaTime) { player.x += 300 * deltaTime; // 300 pixels per second}This prevents physics from running faster on high-end devices and slower on budget phones.Dealing with variable performanceHandle performance variations with these techniques:Fixed timestep physics (as shown above)Interpolation for smooth renderingDynamic quality settingsModern game development frameworks like Phaser.js handle most of this automatically.How can I optimize my game loop for mobile browsers?Battery-friendly techniquesMobile browsers need special attention:Use requestAnimationFrame (automatically pauses when tab inactive)Reduce update frequency for background elementsImplement quality settings based on device capabilityUse touch events instead of mouse events// Detect low-power mode or low batteryfunction shouldReduceQuality() { // Check if battery API is available if ('getBattery' in navigator) { navigator.getBattery().then(battery => { if (battery.level 0.2 && !battery.charging) { return true; } }); } // Check if device is low-end const isLowEndDevice = navigator.hardwareConcurrency 4 || navigator.deviceMemory 4; return isLowEndDevice;}// Adjust quality based