JSFiddle - React, Tailwind, and code Playground

by pj_js15

HTML

<table></table>

CSS

table td {
    border: 1px solid #aaa;
}

JavaScript

var dataRows = 2000; // enter ammount of returned rows
var chunkSize = 200; // define single chunk size, optimize for best performance bu trying different values, if your DOM manipulation is heavy use less, if its lightweight you can use more, use 1 to see in slowmo how it works

// We are simulating big returned object here
var data = {}
for (var i = 0; i < dataRows; i++) {
    data[i] = {
        'id': i,
        'name': 'I am data for row ' + i
    };
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function renderRecords(data) {
    var dataLength = Object.keys(data).length;
    var i = 0;

    function renderInQueue() {
        console.time('Rendering in queue');
        for (t = 0; t < chunkSize; t++) {
            if (i < dataLength) {
                var row = '<tr><td>' + data[i].id +
                    '</td><td>' + data[i].name + '</td></tr>'
                $('table').append(row);
            }
            i++;
        }

        if (i < dataLength) {
            requestAnimationFrame(renderInQueue);
        } else {
            console.log('Done rendering');
            console.timeEnd('Rendering in queue');
        }
    }

    renderInQueue();
}

// run the script of rendering
renderRecords(data);