HTML/CSS UI Perfomance


Hello there!

I’m working on a client project that needs a UI dynamically created based on a database. So far I’ve used HTML/CSS for the prototype:

The problem is bad performance (stuttering), especially on IE11, which is the browser the application will be running on mostly. :unamused:

Is there something that can be done to improve the performance? The Gunsmith example ( runs fine, so I assume there are ways to get a decent performance with a HTML/CSS interface. Or am I doing something completly wrong in my project?

Project Overview:




How do you reproduce the stuttering in your app? I can’t seem to move the view around or make something animate.


The camera should move by clicking on one of the orange indicators on the map :slight_smile:


On my laptop, performance on both the CoD and your prototype look similar in Edge. Do you have a link to the project overview page?


The issue is most prominent on Internet Explorer. If I remove all HTML UI Elements it’s much better.

Project overview:


Hmm… I can’t see anything obvious. I was wondering if you were changing/updating/writing to the document every frame/interval?


No HTML changes via an update function.
I’ll try to disable the event listeners, maybe they are causing the hickups…


i have a project with a good deal of html and have no problem just put everything that accesses the dom or any event listeners in the initialize function because if u put anything in the update function which is called every frame u are re doing all the doms calls that u put in the update function every frame and dom calls are pretty expensive :grimacing: