5 ms·
The rendering slowness is probably because every cell is rendered as an individual little HTML5 canvas (two, one for off state and one for on state). Some brow
by jmatjs 8y ago
The rendering slowness is probably because every cell is rendered as an individual little HTML5 canvas (two, one for off state and one for on state).
Some browsers have no problem at all with so many little canvases, but in firefox it causes a slowdown.
A solution that will hopefully be faster is to make one big canvas instead of many little ones, and blit the cells on it every frame instead of using CSS visibility to swap between on and off states for each cell. Such rewrite of the rendering engine is a todo.
- abritinthebay 8y agoAny reason for not using canvas or some kind of framework like Vue/preact/etc?
- uuu8728dw8d8d 8y agoSnarky comments will be ignored. ╭∩╮⎛○⏜⏟〤○⎞╭∩╮
- abritinthebay 8y agoWasn't snark, Mr Hostility. DOM manipulation is a very expensive operation and is abstracted by a lot of useful libraries - was wondering if there was a specific reason to not use them. Canvas is another type of abstraction - and blitting to the screen is easier with it - so same applies.
- JustSomeNobody 8y agoNot the OP but maybe because they wrote it in what they know and actually shipped.
- kroltan 8y agoThe problem here is not a lack of framework, but the overkill usage of elements. I think even a game-like approach of using a single canvas and re-rendering the whole screen when something changes would be more efficient than manual DOM mutations.
- 52-6F-62 8y agoI was having the same problem using Chrome. It seems there are just simply too many elements generated for some of the examples. It would probably be possible to draw an interactive version to a single canvas— but probably more complex on the development end. --- Beyond that, it's awesome!