Mass data rendering performance with JavaScript

Question

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?

Answer 1

The solution here might be to paginate your data on client side. That way, you can sort your object array with JS and simply insert a section of the data into the DOM at a time.

Client side pagination library options have be discussed here .

Answer 2

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.