I am developing a special grid solution for a software product in javascript. The data are collected with a PHP script on the server side and pushed to JavaScript via a JSON array. In my script I have to parse this array and render the grid rows. And here is my problem. If I receive for example 4000 rows, javascript is rendering this very fast, but I think the bottleneck is the browser…
My question is, is it possible to render only the visible parts? I need to scroll to the other information, but the browser does not need to render it if it is not visible. is it possible to render something outside of the viewport?
I need to set width and positions and this is only possible if I added the new element to the viewport and this is very slow by a huge mass on data… How could I solve this problem?
DOM updates are the slowest part of the chain. Process the result in memory and insert it into the DOM in one go if you can.