Render Chunking Comparisons

With table rows: Render All vs Render Chunks via stack chunking vs Render Chunks via infinite scroll

by Gerald Fullam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<section class="well">
    <header>
         <h1>Table Demo <em class="pull-right">Turn console on</em></h1>

    </header>
    <div class="row">
        <div class="input-group">
            <input type="text" id="row_count" class="form-control" placeholder="Enter Table Rows" /> <span class="input-group-btn">
        <button id ="setRows" class="btn btn-default" type="button">Go!</button>
      </span> 
        </div>
        <!-- /input-group -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-xs-7">
            <div class="btn-toolbar">
                 <h2>Render Algorithm</h2>

                <div class="algorithm btn-group">
                    <button data-algo="normal" class="btn btn-primary">Normal</button>
                    <button data-algo="chunks" class="btn btn-default">Chunks</button>
                    <button data-algo="scroll" class="btn btn-default">Scroll</button>                    
                </div>
            </div>
        </div>
        <!-- /.col-xs-7 -->
        <div class="col-xs-5">
            <div class="btn-toolbar">
                 <h2>Cache</h2>

                <div class="cache btn-group">
                    <button data-cache="off" class="btn btn-primary">Off</button>
                    <button data-cache="on" class="btn btn-default">On</button>
                </div>
            </div>
        </div>
        <!-- /.col-xs-5 -->
    </div>
        <div class="btn-toolbar filters">
             <h2>Table Filters</h2>

            <div class="row">
                <div data-axis="x" class="filter-x btn-group" role="group"> <span class="btn pull-left">X</span>

                    <button type="button" data-filter="0-10" class="btn btn-default">0-10%</button>
                    <button type="button" data-filter="11-25" class="btn btn-default">11-25%</button>
                    <button...

CSS

div.container {
    width: 90%;
    border: thin solid black;
    border-radius: 8px;
    margin: 1em auto;
}
table > thead td {
    font-weight: bold;
}
h1 {
    font-size: 20px;
    margin-top: 0;
}
h1 > em {
    font-size: 14px;
}
h2 {
    font-size:18px;
    color:#999;
    text-transform: uppercase;
}
.btn-toolbar {
    margin: 1em;
}
.filter-y, .filter-z {
    margin-top: 1em;
}

JavaScript

// Cache
var $table,
    $rows;

// Dynamic table generator
// This is not essential to demonstrate filter and render techniques. It's just used to make a table programmatically.
function generateTable (rowCount) {
    $('table tbody').empty();
    var setNum   = function () {
            return Math.round(Math.random() * 100) / 1;
        },
        setRange = function (num) {
            return (num > 75) ? '76-100' : (
                (num > 50 && num < 76) ? '51-75' : (
                    (num > 25 && num < 51) ? '26-50' : (
                        (num > 10 && num < 26) ? '11-25' : '0-10'
                    )
                )
            );
        };

    for (var i = 0; i < rowCount; i++) {
        var $nr = $('<tr><td></td><td></td><td></td><td></td></tr>'),
            x   = setNum(),
            y   = setNum(),
            z   = setNum(),
            x_range = setRange(x),
            y_range = setRange(y),
            z_range = setRange(z);

        $nr
            .attr('data-x-range', x_range)
            .attr('data-y-range', y_range)
            .attr('data-z-range', z_range)
            .find('td:nth-child(1n)').html('#' + (i + 1)).end()
            .find('td:nth-child(2n)').html(x + '%').end()
            .find('td:nth-child(3n)').html(y + '%').end()
            .find('td:nth-child(4n)').html(z + '%');

        $('table').append($nr);

        if (i === rowCount - 1) {
            $('body').css('opacity', '1.0');
            $('#count').html($('table tbody tr').length);
            $table = $('table');
            $rows  = $('table tbody tr');
        }
    }
}

// Render in chunks via call stack chunking
function showChunked($el, chunk, i) {
        chunk = chunk || 100;
        i     = i     || 0;
    var length = $el.length;
    $el.slice(i, i + chunk).each(function() {
        $(this).show();
    }).promise().done(function() {
        i += chunk;
        if (i <= length) {
            _.defer(function() {
                showChunked($el,...