HTML/CSS UI Perfomance


#1

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: https://playcanv.as/p/HekuiL0K/

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 (https://playcanv.as/p/XPWoTZ4F/) 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: https://playcanvas.com/project/546260/overview/cyber-dashboard

Thanks!

Simon


#2

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


#3

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


#4

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?


#5

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


#6

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


#7

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


#8

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: