0
\$\begingroup\$

I have a need for my html5 game (using melonjs) to allow users to click tile areas on the map. The idea is it will show a css styled hover area. The browser tested is chrome.

I could do this natively in the game engine but the styling options available for canvas entities is limited. So I went with creating a dom element for each item in the canvas map. As the player moves, I update only the positions of the dom elements which are on the viewport.

Probably 70 total elements are created and only 2-3 are on the screen updating at any given time.

I'm pretty surprised how slow it's making my browser.

So my questions are:

  • why would updating 2-3 elements as the player moves be so slow?

  • is it better to remove elements when offscreen then readd when they are back on, even though they arent updating as they move off screen?

  • should I just scrap the dom solution altogether and rely on the api the canvas and game engines provide for styling

\$\endgroup\$
  • 1
    \$\begingroup\$ Have you done some profiling with the debugging tools of your web browser to figure out where exactly it spends most of its runtime? And can you add more details about what CSS features exactly you are using for styling and how you are using them? \$\endgroup\$ – Philipp May 23 at 14:17
  • \$\begingroup\$ As Philipp says, the rendering logic for DOM elements is quite complex and dependent on your HTML/CSS. Depending on the CSS properties you use you could end up recalculating the layout and repainting the entire page once for every element you're moving. Without sharing HTML/CSS/JS snippets it's very hard to diagnose this. \$\endgroup\$ – vassildador May 23 at 14:38
  • \$\begingroup\$ If those two force the page to be completely redrawn, then it's understandable that it's slow. There's an option to see every redraw happening. \$\endgroup\$ – Bálint May 23 at 14:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.