SVG path updating (v2)

Revision 2 of this benchmark created by muffin on

Description

Updating path line in fixed area. (simulation of line chart)

Setup

var ns = "http://www.w3.org/2000/svg";
    var svg = document.createElementNS(ns, "svg");
    var path = document.createElementNS(ns, "path");
    path.points = [];
    svg.appendChild(path);
    document.body.appendChild(svg);
    
    var gap = 2;
    var lineWidth = 25;
    var step = 2;
    var lineHeight = 10;
    
    var values = [];
    for (var i = 0; i < 10000; i++) {
      values.push({x: Math.random() * 100, y: Math.random() * 100});
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Update path through SVG API
var path = document.createElementNS(ns, "path");
var pathSegList = path.pathSegList;
for (var i = 0, len = values.length; i < len; i++) {
        var point = values[i];
        if (i === 0) {
                pathSegList.appendItem(path.createSVGPathSegMovetoAbs(point.x, point.y));
        } else {
                pathSegList.appendItem(path.createSVGPathSegLinetoAbs(point.x, point.y));
        }
}
ready
Update path through forming 'd' attribute
var path = document.createElementNS(ns, "path");
var d = '';
for (var i = 0, len = values.length; i < len; i++) {
    var point = values[i];
    if (i === 0) {
                d += 'M' + point.x + ',' + point.y;
        } else {
                d += ' L' + point.x + ',' + point.y;
        }
}
path.setAttribute('d', d);
ready

Revisions

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

  • Revision 1: published by Smal Sergey on
  • Revision 2: published by muffin on