Slow rendering

I’m trying to implement a simple logic game in F#/Bolero. Game board is represented by a 30 * 30 html table. Table cells can have background and/or single char in them, nothing fancy.

Source: https://github.com/ptupitsyn/klopodavka-fs Try it: https://klopodavka.netlify.com/ (click on cells with dots in them)

Clicking on a valid cell changes it’s state. Handling the click takes ~35 ms on i7-9700k, which is tolerable, but on older hardware and on mobile it can take over a second, which is unusable.

• I tried profiling in Chrome, but the whole call tree consists of wasm-function
• I am sure it is the Bolero rendering, not the underlying game logic - if I render 5 rows of 30, it is ~6 times faster

I am new to F# and Bolero, so questions are:

• Am I doing something wrong?
• Is it possible to profile and see actual function names?

[Tarmil]

Yes, you should wrap them in a component and override this.ShouldRender(oldModel, newModel) to ensure that it doesn’t get re-rendered unnecessarily.

Also, collections of items like this should use the key attribute to help the renderer. Unfortunately this is not possible yet with ecomp (see #87) with the released package, but it’s fixed on master and I’ll do a release soon 🙂

[OnurGumus]

@ptupitsyn Perhaps you can wrap each td into an elmish component and control the rendering. Because it seams you are rerendering 900 cells for each click which is an ouch! It is documented in bolero docs how to wrap it to an elmish component.