JSFiddle - React, Tailwind, and code Playground

by SimoneGianni

HTML

<script src="https://cdn.firebase.com/js/client/2.2.6/firebase.js"></script>
<div id="buttons">
    <button id="populate">Populate with mock data</button>
    <button id="runValue">Run with onValue before</button>
    <button id="runOnlyChild">Run only on children</button>
    <button id="clean">Clean log</button>
    <div id="pleaseReload">Please reload to make sure there is no cache or left-behinds</div>
    <hr/>
</div>
<div id="log"></div>

CSS

#log span {
    display: inline-block;
    margin: 2px;
}

#log span.timer {
    display: inline-block;
    width: 80px;
    text-align: right;
    border-top: 1px dashed red;    
}


#log {
    margin-top: 40px;  
}


#buttons {
    position: fixed;
    top:0px;
    width: 100%;
    background: white;
}

#pleaseReload {
     display: none;
}
}

JavaScript

var start = 0;
var pretime = -1;
function timerStart() {
    start = performance.now();
    pretime = -1;
}

function log() {
    var now = Math.floor(performance.now() - start);
    $('#log').append('<span class="timer">' + now + '</span>');
    if (pretime == -1) pretime = now;
    $('#log').append('<span class="timer">+ ' + (now - pretime) + '</span>');
    pretime = now;
    
    var txt = '';
    for (var i = 0; i < arguments.length; i++) {
        txt += JSON.stringify(arguments[i]);
        txt += ' ';
    }
    $('#log').append('<span>' + txt + '</span><br/>');    
}

function askReload() {
    $('#buttons button').remove();
    $('#pleaseReload').show();
}

var baseUrl = "https://perf-test-simone-gianni.firebaseio-demo.com";
var rows = 100;

$('#clean').click(function() { $('#log *').remove(); });

$('#populate').click(function() {
    askReload();
    timerStart();
    log("Starting mock data population");
    var dones = 0;
    var root = new Firebase(baseUrl);
    var groupFb = root.child('group');
    groupFb.remove();
    for (var i = 0; i < rows; i++) {
        var uFb = groupFb.child('u'+i);
        uFb.set(
            {name: 'User name ' + i, surname: 'User surname ' + i},
            function() {
                log("Created mock user " + (dones++));
                if (dones == rows) {
                    log("Done!!");
                }
            });
    }
});

$('#runValue').click(function() {
    askReload();
    test(true); 
});

$('#runOnlyChild').click(function() {
    askReload();
    test(false);
});


function test(withValueBefore) {
    timerStart();
    log("Starting test");
    var root = new Firebase(baseUrl);
    var connecFb = root.child('connect').set(true, function() {
        timerStart();
        log("Connected");
        var groupFb = root.child('group');
        if (withValueBefore) {
            groupFb.on('value', function() { log("Done group.on(value)"); });    
        }
        for (var i = 0; i < rows; i++) {
     ...