How to remove the lag between painting of elements on click event ?

Question

In the following code i have 17000 elements , and if you do some quick clicks on those black boxes, it takes few seconds before all that and it's neighbouring elements get colored. So what can i do about it ? Any help is much appreciated!

https://code.sololearn.com/WT8VYoy95BON/?ref=app

Answer 1

I haven't tested this. But have you considered not filling the CSS grid? You can make the boxes appear as a CSS background image with linear gradient. Then when you need to color a box, you place a box in the grid at that location and color it.

This way there are less elements to create lag.

Hope this helps. Good luck!

Answer 2

Ronald J. Tempel nice idea , i will look into it, ty!

Answer 3

Ronald J. Tempel i tried it but seems like it won't work(visible lag) after creating few thousands of those and another problem is to delete the overlapping elements (which i believe still won't solve the issue), i think i might need to look into canvas or maybe some library!So if you know something else that can help :)

https://code.sololearn.com/WpuCztleZHiI/?ref=app