Hi, so I’m currently having a very strange performance issue with my elm app. To summarize whats been a long week for me, I’m making a chat app that needs to be able to show around 300 messages. I implemented Element.Lazy so that the browser wouldn’t need to re-create the virtual nodes for each message, but eventually found out that its benefits only applied to certain Msgs. For certain events, if I clicked a button to trigger a Msg, the response would happen right away with no frame drops. Other events would cause the browser to “Recalculate Style” for several seconds and drop the frames to less than 0 fps before responding. I found out the difference was conditional visual attributes, i.e.
el [Bg.color <| if model.toggle then color1 else color2] none
This exmaple has 3 buttons and a long list of either paragraphs or columns wrapped in lazy nodes. The first button changes its own background color and text, the second changes only its own text, and the third switches the list between paragraphs and columns.
The second button always responds quickly because it only changes some text. The first responds quickly when the long list contains columns, but slowly if its paragraphs. Just like the second button, its changes its own text, but also changes model.toggle1 which changes its own background color.
Any Msg that changes a value in the model that’s used as part of a condition for a visual attribute (background color, font size, padding, etc.) when there are paragraphs in a Element.Lazy node seem to cause those paragraphs’ virtual nodes to be re-calculated (this is my best understanding without knowing the internals of elm ui). This doesnt seem to happen with attributes like onClick, pointer, or Element.html with any Html.Attribute value (I havent gone through every possible attribute, mostly because Ive been stressing about this for a week and Im exhausted).
I tested my elm app with 1000 messages, and when I removed any uses of paragraph, the delay went from 3.5 seconds to 0.4 seconds, which is way better, but if I kept the paragraphs and instead removed any relevant conditional statements involving, usually, background colors for a specific event, the delay and frame drops would disappear for the event, but stay for others. Since the browser would still “Recalculate Style” for 0.4 seconds for events with conditional attributes, I assume the issue isn’t specific to paragraphs, but, without knowing the internals of elm ui, I can’t figure out much more.