jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

Javascript VS HTML5 canvas perfomance test. Create table. (v2)

Revision 2 of this benchmark created on July 30, 2014

Description

These javascript tests desgned to compare UI perfomance of javascript DOM model, kineticjs library, pixijs library and zebrajs library. To compare perfomance, test methods calculate time of creating a small sample table.

Preparation HTML

<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/js-perf-globals.js"></script>
<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/custom-table.js"></script>
<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/js-table.js"></script>
<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/kinetic-v5.1.0.min.js"></script>
<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/kineticjs-table.js"></script>
<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/pixi.js"></script>
<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/pixijs-table.js"></script>
<script type="text/javascript" src="http://repo.zebkit.org/latest/zebra.min.js"></script>
<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/zebrajs-table.js"></script>
<script type="text/javascript" src="http://www.alfrescodev.com/samples/js-canvas-test/js/js-perf-fill.js"></script>


<h3>Javascript perfomance test</h3>
<div id="main-content" style="text-align: center;">
    <div>
        <div id="description-area" style="text-align: left; padding-left: 20px;" class="info-block">
            These javascript tests desgned to compare UI perfomance
            of javascript DOM model, kineticjs library, pixijs library
            and zebrajs library. To compare perfomance, test methods
            calculate time of filling a small sample table.
        </div>
    </div>
    <div>
        <div id="controls-area" class="info-block"></div>
    </div>
    <div>
        <div id="test-results" class="info-block"></div>
    </div>
    <div id="js-test-table"></div>
    <div id="kinetic-test-table"></div>
    <div id="pixi-canvas-test-table"></div>
    <div id="pixi-webgl-test-table"></div>
    <div id="zebra-test-table"></div>
</div>

Setup

var JS_TABLE_CONTAINER_ID = 'js-test-table';
            var KINETIC_TABLE_CONTAINER_ID = 'kinetic-test-table';
            var PIXI_TABLE_CONTAINER_ID1 = 'pixi-canvas-test-table';
            var PIXI_TABLE_CONTAINER_ID2 = 'pixi-webgl-test-table';
            var ZEBRA_TABLE_CONTAINER_ID = 'zebra-test-table';
            var MIN_BENCHMARK_REPEATS = 20;
            var CONTROLS_AREA_ID = 'controls-area';
            var ROWS_COUNT = 30;
            var COLS_COUNT = 10;
            var CELL_PADDING = 10;
            var CELL_WIDTH = 50;
    
            //var jsTable = null;
            //var kineticJsTable = null;
            //var pixijsTable = null;
            //var zebrajsTable;
    
            function log(msg) {
                document.getElementById('test-results').innerHTML += msg + '<br />';
            }
    
            var tests = new Array();
            var testI = 0;
    
            var ti = 0;
    
            tests[ti] = function(){
                jsTable = new JsTable(ROWS_COUNT, COLS_COUNT, CELL_PADDING, CELL_WIDTH);
                jsTable.createJsTable(JS_TABLE_CONTAINER_ID);
            }
            tests[ti].title = 'Create javascript table test';
            tests[ti].setUp = null;
            ++ti;
    
            tests[ti] = function(){
                jsTable.fillJsTable();
            }
            tests[ti].title = 'Fill javascript table test';
            tests[ti].setUp = function(ti) {
                if (jsTable == null)
                    tests[ti - 1]();
            };
            ++ti;
    
            tests[ti] = function(){
                kineticJsTable = new KineticJsTable(KINETIC_TABLE_CONTAINER_ID, ROWS_COUNT,
                        COLS_COUNT, CELL_PADDING, CELL_WIDTH);
                kineticJsTable.createKineticJsTable();
            }
            tests[ti].title = 'Create kineticJs table test';
            tests[ti].setUp = null;
            ++ti;
    
            tests[ti] = function(){
                kineticJsTable.fillTable();
            }
            tests[ti].title = 'Fill kineticJs table test';
            tests[ti].setUp = function(ti) {
                if (kineticJsTable == null)
                    tests[ti-1]();
            };
            ++ti;
    
            tests[ti] = function(){
                if (pixijsTable == null)
                    pixijsTable= new PixijsTable(PIXI_TABLE_CONTAINER_ID1, ROWS_COUNT,
                            COLS_COUNT, CELL_PADDING, CELL_WIDTH, true);
                pixijsTable.createTable();
            }
            tests[ti].title = 'Create WebGL pixiJs table test';
            tests[ti].setUp = null;
            ++ti;
    
            tests[ti] = function(){
                pixijsTable.fillTable();
            }
            tests[ti].title = 'Fill WebGL pixiJs table test';
            tests[ti].setUp = function(ti) {
                tests[ti - 1]();
            };
            ++ti;
    
            tests[ti] = function(){
                if (cPixijsTable == null)
                    cPixijsTable= new PixijsTable(PIXI_TABLE_CONTAINER_ID2, ROWS_COUNT,
                            COLS_COUNT, CELL_PADDING, CELL_WIDTH, false);
                cPixijsTable.createTable();
            }
            tests[ti].title = 'Create canvas 2d context pixiJs table test';
            tests[ti].setUp = null;
            ++ti;
    
            tests[ti] = function(){
                cPixijsTable.fillTable();
            }
            tests[ti].title = 'Fill canvas 2d context pixiJs table test';
            tests[ti].setUp = function(ti) {
                tests[ti - 1]();
            };
            ++ti;
    
            tests[ti] = function(){
                if (zebrajsTable == null)
                    zebrajsTable = new ZebrajsTable(ZEBRA_TABLE_CONTAINER_ID, ROWS_COUNT,
                            COLS_COUNT, CELL_PADDING, CELL_WIDTH);
                zebrajsTable.createTable();
            }
            tests[ti].title = 'Create zebraJs table test';
            tests[ti].setUp = null;
            ++ti;
    
            tests[ti] = function(){
                zebrajsTable.fillTable();
            }
            tests[ti].title = 'Fill zebraJs table test';
            tests[ti].setUp = function(ti) {
                if (zebrajsTable == null)
                    tests[ti - 1]();
            };
            ++ti;

Test runner

Ready to run.

Testing in
Test		Ops/sec
Create javascript table	`tests[0]();`	ready
Create kineticJs table	`tests[2]();`	ready
Create PixiJs WebGL table	`tests[4]();`	ready
Create PixiJs canvas table	`tests[6]();`	ready
Create zebraJs table	`tests[8]();`	ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published on July 27, 2014
Revision 2: published on July 30, 2014