Excessive rendering with multiple elements

[andershol]

If you have many fields on a page the will redraw many times. For example this simple test with 100 rows each with 10 text fields will redraw 3001 times in both Firefox and Chrome which could take minutes: https://jsbin.com/jivezitaku/edit?html,output

• If I replace TextField with an empty string, such that a simple div element is drawn, the page is only drawn once as expected.
• If I change the number of rows to 90 the page is redrawn 2701 in both Chrome and Firefox suggesting that the behavior is deterministic. But changing the number of fields per row to 5 makes Firefox redraw around 15 times and Chrome around 20 times (+/-5 times) suggesting that this is non-deterministic. The number of draws should have been 1 in all cases.

[ArthurClemens]

Thanks for your report. I hadn't noticed the performance penalty before.

Several observations:

• "Attaching" the input (DOM) element to the state triggers a redraw. This is the main culprit, because this will cause a redraw for each and every Text Field instance on the page. Looking at the tests it doesn't appear to be required (anymore), so I will remove this.
• When interacting with elements, browser events are fired. Mithril will call a redraw for each event. Generally this is not a problem because subsequent redraw calls within the same frame will be ignored. But clicking on an input field, typing a character and leaving the field will cause 4 separate events: onclick, onfocus, oninput and onblur. The only way to reduce this is to use Text Field's ignoreEvents option, but the practicability of this will be small.
• The component wrapper used in Polythene will cause a redraw when a state has been updated. However the Mithril version does not check if the new state differs from the previous state (the React version does this out of the box because it uses setState). I will add this check for Mithril.

[andershol]

I only noticed this after I tried using real data for something I did a while ago, so I was also surprised (especially that it was so non-linear -- going from 5 to 10 items per row). It sound like the changes you are planning will also help make normal pages a little faster and not just this kind of contrived huge page, so that is good. I assume Mithril will only call redraw for events that have been subscribed to, so if polythene did more of its styling updates with css, maybe it could avoid subscribing to the events. And of course, thanks a lot for all your work on this project.

[ArthurClemens]

I assume Mithril will only call redraw for events that have been subscribed to

No, Mithril redraws for all events.

[ArthurClemens]

You can see progress in this flems.

[andershol]

No, Mithril redraws for all events.

Okay, it was just an idea, and it is probably not that important as human-generated events are often far apart (several ms). But I don't think I understand the link to say that it will redraw for event handlers that are not used, and a little test also seems to say that it isn't so.

You can see progress in this flems.

Very nice. 👍