JSFiddle - React, Tailwind, and code Playground

by Frank van Puffelen

HTML

<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>

JavaScript

var ref = new Firebase('https://stackoverflow.firebaseio.com/payload-vs-latency'),
    small = ref.child('small'),
    big = ref.child('big'),
    locations = ref.child('locations'),
    numPlayers = 100,
    numLocations = 100;

function createTestData() {
    var i, j,
        player,
        location,
        blob = 'abcdefghijklmnopqrstuvwxyz0123456789';
    for (i = 0; i < 9; i++) {
        blob = blob + blob;
    }
    for (i=0; i < numPlayers; i++) {
        player = { name: 'Player '+i, index: i };
        small.child('player:'+i).set(player);
        player.blob = blob;
        big.child('player:'+i).set(player);
    }
    for (i=0; i < numLocations; i++) {
        location = { name: 'Location '+i, index: i, players: [] };
        for (j = 0; j < 10; j++) {
            location.players.push('player:'+ Math.round(Math.random() * numPlayers));
        }
        locations.child('location:'+i).set(location);
    }
}

function rnd(max) {
    return Math.trunc(Math.random() * max);
}

function loadLocationsAndPlayerData(locationsRef, playersRef, locationsToLoadCount, callback) {
    var i, j,
        startTime = Date.now(),
        firstLocationTime,
        firstPlayerTime,
        doneTime,
        location,
        player,
        loadedLocations = [],
        loadedPlayers = []
        ;
    for (i=0; i < locationsToLoadCount; i++) {
        locationsRef
            .child('location:'+rnd(numLocations))
            .once('value', function(locationSnapshot) {
                if (!firstLocationTime) firstLocationTime = Date.now();
                location = locationSnapshot.val();
                if (!location) console.error('Could not load location: '+locationSnapshot.key());
                loadedLocations.push(location);
                if (!location.players) console.error('Location has no players', location);
                location.players.forEach(function(playerId) {
                    playersRef
                        .child(playerId)
             ...