I’m using Stimulus to handle a fairly complex bit of UI, and finding performance to be an issue.
I have 2 “summary” controllers on my page. Each summary controller represents a simple view of some details about a user, and also contains a link to edit these details.
Clicking edit fetches new HTML (with stimulus attributes) from the server - this is very quick, around 20ms. I then “replace” the existing summary controller’s HTML with the new edit HTML (
this.element.innerHTML = newContent), which destroys the controller for the summary, and adds the new one for the edit.
Digging into this, I’m seeing these kinds of numbers:
So there we’re looking at 850ms for processMutations to resolve, and that is my cause of the lag from the user clicking the edit link to seeing the resolving new UI.
Are there optimisations I can do to make this more performant? As an experiment I tried appending my new edit HTML to an existing empty div at the bottom of the page (so that the existing summary controller isn’t destroyed), but that doesn’t seem to make much difference?
Any helpers here would be welcome, before I get forced into re-writing this lot in react!