Test performance on a (simulated) slow network

by down_quark

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/themes/tundra/tundra.css">
<div id="wrap">
    <div id="header">Test refresh while preserving scroll position:
        <button onclick="grid.refresh({keepScrollPosition:1})">refresh</button>
    </div>
    <div id="tabContainer"></div>
</div>

CSS

html, body {
    font:90% helvetica, arial, sans-serif;
    height:100%;
    margin:0;
    overflow:hidden;
    width:100%
}
#wrap, #tabContainer, #container, #main {
    height:100%;
    width:100%
}
#grid, #grid * {
    border:0
}
.dgrid-row {
    display:inline-block;
    width:50%
}
.dgrid-column-set-cell.dgrid-column-set-0 {
    width:134px
}
.dgrid-column-0-0-0 {
    text-align:right
}
.dgrid-column-1-0-0.field-id {
    font-weight:bold
}
.dgrid-cell-padding {
    padding:3px
}
.heading {
    font-weight:bold;
    margin-left:5px;
    padding-bottom:0.25em
}

JavaScript

require({
    packages: [{
        name: "dgrid",
        location: "http://dojofoundation.org/packages/dgrid/js/dgrid"
    }, {
        name: "put-selector",
        location: "http://dojofoundation.org/packages/dgrid/js/put-selector"
    }, {
        name: "xstyle",
        location: "http://dojofoundation.org/packages/dgrid/js/xstyle"
    }]
});
require([
    "dojo/json",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/xhr",
    "dojo/store/JsonRest",
    "dojo/store/util/QueryResults",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/TabContainer",
    "dgrid/ColumnSet",
    "dgrid/Keyboard",
    "dgrid/OnDemandGrid",
    "dgrid/extensions/DijitRegistry",
    "dojo/domReady!"], function (JSON, declare, lang, xhr, JsonRest, QueryResults, BorderContainer, ContentPane, TabContainer, ColumnSet, Keyboard, OnDemandGrid, DijitRegistry) {
    var bc, i, results, store, tabPane, total, perfData = [],
        today = new Date().getTime(),
        columns = [
            [
                [{
                    field: 'url',
                    label: 'Image',
                    sortable: false,
                    formatter: function (u) {
                        return '<img src="' + u + '#' + new Date().getTime() + '">';
                    }
                }]
            ],
            [
                [{
                    field: 'id',
                    label: 'ID',
                    formatter: function (i) {
                        return 'ID: ' + i;
                    }
                }],
                [{
                    field: 'floatNum',
                    label: 'Float',
                    formatter: function (f) {
                        return 'Float: ' + f;
                    }
                }],
                [{
                    field: 'price',
                    label: 'Price',
                    formatter: function (p) {
                        return 'Price: $' + p;
       ...