HTML and CSS Reference
This section covers the inputs that your main loop will receive from the browser. This includes user input as well as
the display synchronization event and time.
A monotonically increasing count of the number of milliseconds since the page was loaded is passed as a parameter
to the callback registered with window.requestAnimationFrame . You can query this time source on demand with
window.performance.now . Relying on different sources of time can lead to hard-to-track-down bugs. Be sure to only
use the time parameter passed into window.requestAnimationFrame and the time values read from
This is the game's heartbeat. It doesn't matter how your game is rendered (2D canvas, WebGL, or just plain DOM);
render updates must be performed inside the frame callback registered with window.requestAnimationFrame . By
relying on requestAnimationFrame to initiate rendering, your game will be in synchronization with the display's
v-blank and with the browser's internal rendering system. Expect requestAnimationFrame to be called every 16.6 ms
(60 FPS) in ideal circumstances, but, when system load is high or the user is looking at another tab, the rate will be
throttled down. Your main loop must execute correctly with any time gap between successive frame callback calls.
In the browser, user input is received via many different event streams. Each event stream is dedicated to a certain
type of event. Examples include
All of the above streams deliver events independently. Developing a system that unifies all of the different event
sources with the game logic update loop is essential to a good main loop.