Benchmark

Notes

inspired by pjanik’s blocks
animation frame and FPS calculation powered by d3.timer
3D based frameworks are producing a lot of DOM elements in SVG renderers thanks to shape triangulation
some test have limited number of objects because of high memory needs or incomplete/reference implementation (triangles)
click run link or run single test in the table
path is using d3-path
stackgl based on this block

Change log

2015-11-09 longer pause improved slightly webgl and two.js, minor fixes, updated Chrome sample result
2015-11-08 added art.js
2015-11-08 shorter test time and pause, disabled chart animation between tests, updated sample results, minor fixes
2015-11-07 release

Sample results

Chrome

Firefox

Edge

Mobile Chrome

<!DOCTYPE html>
<meta charset='UTF-8'>
<title>Benchmark</title>
<link rel="stylesheet" href="style.css">

#arrow {
        transform: rotate(30deg);
    }

#arrow polyline {
        animation-name: svg-arrow;
        animation-duration: 3s;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        transform: translate(44px, 32px) rotate(90deg);
        fill: #fff;
    }

#arrow path {
        animation-name: svg-path;
        animation-duration: 3s;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        stroke-dasharray: 4, 4;
        stroke-dashoffset: -2;
        fill: none;
        stroke: #fff;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@keyframes svg-arrow {
        0% {
            fill: #fff;
            transform: translate(44px, 0px) rotate(90deg);
        }

33% {
            transform: translate(44px, 32px) rotate(90deg);
            fill: #333;
        }

66% {
            fill: #333;
        }

100% {
            fill: #fff;
        }
    }

@keyframes svg-path {
        0% {
            stroke: #fff;
            stroke-dashoffset: -2;
            transform: translateY(-32px);
        }

33% {
            transform: translateY(0px);
            stroke-dashoffset: -34;
            stroke: #333;
        }

66% {
            transform: translateY(0px);
            stroke: #333;
            stroke-dashoffset: -34;
        }

100% {
            stroke: #fff;
            transform: translateY(32px);
            stroke-dashoffset: -66;
        }
    }

/* Why? Why? Because MS Edge. Cry, cry. :-( */
    _:-ms-lang(x), #arrow {
        display: none;
    }
</style>

<body>

window.requestAnimationFrame = function () {
        window.requestAnimationFrame = window._requestAnimationFrame;
    };
</script>

<div>
    <div class="cloak block pull-left">
        <div id="container" class="container" style="position: relative">
            <div id="message" class="block" style="padding: 0 8px">
                <table class="table-inline">
                    <thead>
                    <tr>
                        <th rowspan="2">Framework</th>
                        <th colspan="5" class="down">API Compatibility</th>
                    </tr>
                    <tr>
                        <th class="up"><a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics" target="_blank">svg</a>
                        </th>
                        <th class="up"><a href="https://en.wikipedia.org/wiki/Canvas_element" target="_blank">canvas</a>
                        </th>
                        <th class="up"><a href="https://en.wikipedia.org/wiki/WebGL" target="_blank">webgl</a></th>
                        <th class="up"><a href="https://github.com/d3/d3-path" target="_blank">path</a></th>
                        <th class="up"><a
                                href="https://github.com/mrdoob/three.js/blob/8ed08e983fcc78a50b8ac4ee917a23754cc6fd55/examples/js/renderers/CSS3DRenderer.js"
                                target="_blank">css</a></th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

<div class="cloak block pull-left aside">
        <div class="controls block-label top">
            <div id="filter-object">object: <span class="list"></span></div>
            <div id="filter-count">count: <span class="list"></span></div>
        </div>
        <svg id="pack" width="413" height="400" class="container"></svg>
    </div>
</div>

<div class="cloak block pull-right">
    <table id="result">
        <thead>
        <tr>
            <th rowspan="2">Framework</th>
            <th rowspan="2">Renderer</th>
            <th rowspan="2">Object</th>
            <th id="version" rowspan="2">Version</th>
            <th class="group">Count / FPS</th>
        </tr>
        <tr class="objects"></tr>
        </thead>
        <tbody></tbody>
    </table>

<div class="controls block-label  bottom pull-left">
        <span id="reset" class="btn click">reset</span>
        <a id="share" class="btn click" href="./" target="_blank">share</a>
    </div>

<div id="link" class="controls block-label bottom pull-right"><a href="#" target="_parent">open in a new window</a>
    </div>

<div id="note" class="block-label bottom pull-right">click FPS value to run single test</div>

d3.select('#message tbody').selectAll('tr').data([
                [{
                    title: 'art',
                    link: 'https://github.com/sebmarkbage/art/',
                    size: '18KB',
                    version: ArtCanvas.version
                }, 1, 1, null, null, null],
                [{
                    title: 'd3',
                    link: 'https://d3js.org/',
                    size: '53KB',
                    version: d3.version
                }, 2, 3, null, 3, null],
                [{
                    title: 'easel',
                    link: 'https://www.createjs.com/easeljs',
                    size: '24KB',
                    version: createjs.EaselJS.version
                }, null, 4, null, null, null],
                [{
                    title: 'pixi',
                    link: 'https://www.pixijs.com/',
                    size: '80KB',
                    version: PIXI.VERSION
                }, null, 5, 5, null, null],
                [{
                    title: 'stackgl',
                    link: 'https://stack.gl/',
                    size: '55KB',
                    version: stackgl.version
                }, null, null, 6, null, null],
                [{
                    title: 'three',
                    link: 'https://threejs.org/',
                    size: '157KB',
                    version: THREE.REVISION
                }, 7, 7, 7, null, 8],
                [{
                    title: 'two',
                    link: 'https://jonobr1.github.io/two.js/',
                    size: '28KB',
                    version: Two.Version.replace('v', '')
                }, 9, 9, 9, null, null]
            ])
            .enter().append('tr')
            .selectAll('td').data(function (d) {
                return d;
            })
            .enter().append('td')
            .style('text-align', function (d, i) {
                return i ? 'center' : null;
            })
            .html(function (d, i) {
                var c;

return (d && d.title) ? ('<a href="' + d.link + '" target="_blank"><b>' + d.title + '</b></a>' +
                '<small class="pull-right">' + d.size + '</small>' +
                '<br><small>' + d.version + '</small>') :
                        (i > 0 && d > 0) ? '<span class="api" style="background-color: ' +
                        (c = d3.rgb(Bench.color(1 - d / 8)), 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',0.5)') +
                        '"><b>' + d + '</b></span>' :
                        '<small>' + (d || '&mdash;') + '</small>';
            });

try {
        d3.select(self.frameElement).style('height', document.body.getBoundingClientRect().height + 'px');
    } catch (ign) {
    }
</script>
</body>

Updated missing url //cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js to //cdnjs.cloudflare.com/ajax/libs/easeljs/0.8.0/easeljs.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js

https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js

https://cdnjs.cloudflare.com/ajax/libs/two.js/0.5.0/two.min.js