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: Cyber Threat Center | Dashboard 20210107 - PLAYCANVAS

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 (Call of Duty Gunsmith - PLAYCANVAS) 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: PlayCanvas 3D HTML5 Game Engine

Thanks!

Simon

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: https://playcanvas.com/project/546260/overview/cyber-dashboard

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: