I'm moving fewer than 10
position: absolute elements around the screen. An enormous amount of CPU time (profiled in Chrome as
(program) i.e. native code) is used where I do the following:
style.left = monster.x + 'px'; style.top = monster.y + 'px';
style belongs to the DOM element representing the monster in question.
This is a string concatenation cost since as soon as I remove that
+ 'px', the problem disappears. Of course, then absolute positioning doesn't work onscreen since the
px is required by the browser.
I'm running this logic via
requestAnimationFrame which runs about 60FPS... am currently amending such that position updates only occur every 2-3 frames as this will certainly help. Am also modifying so that only when the numeric value changes, is the style property set anew, rather than setting the style property on every active frame.
Even so, is this how CSS sprite updates are done? Is it always this slow? The only alternatives I can see are to use canvas (usually also slow, for different reasons) or WebGL. I'd prefer CSS for simplicity.