svgedit/test/svgutils_performance_test.js

/* eslint-env qunit */
import '../editor/pathseg.js';
import {NS} from '../editor/svgedit.js';
import * as utilities from '../editor/svgutils.js';
import * as transformlist from '../editor/svgtransformlist.js';
import * as math from '../editor/math.js';

// log function
QUnit.log(function (details) {
  if (window.console && window.console.log) {
    window.console.log(details.result + ' :: ' + details.message);
  }
});

const currentLayer = document.getElementById('layer1');

function mockCreateSVGElement (jsonMap) {
  const elem = document.createElementNS(NS.SVG, jsonMap['element']);
  for (const attr in jsonMap['attr']) {
    elem.setAttribute(attr, jsonMap['attr'][attr]);
  }
  return elem;
}
function mockAddSvgElementFromJson (json) {
  const elem = mockCreateSVGElement(json);
  currentLayer.appendChild(elem);
  return elem;
}

// const svg = document.createElementNS(NS.SVG, 'svg');
const groupWithMatrixTransform = document.getElementById('svg_group_with_matrix_transform');
const textWithMatrixTransform = document.getElementById('svg_text_with_matrix_transform');

function fillDocumentByCloningElement (elem, count) {
  const elemId = elem.getAttribute('id') + '-';
  for (let index = 0; index < count; index++) {
    const clone = elem.cloneNode(true); // t: deep clone
    // Make sure you set a unique ID like a real document.
    clone.setAttribute('id', elemId + index);
    const parent = elem.parentNode;
    parent.appendChild(clone);
  }
}

QUnit.module('svgedit.utilities_performance', {
  beforeEach () {
  },
  afterEach () {
  }
});

const mockPathActions = {
  resetOrientation (path) {
    if (path == null || path.nodeName !== 'path') { return false; }
    const tlist = transformlist.getTransformList(path);
    const m = math.transformListToTransform(tlist).matrix;
    tlist.clear();
    path.removeAttribute('transform');
    const segList = path.pathSegList;

    const len = segList.numberOfItems;
    // let lastX, lastY;

    for (let i = 0; i < len; ++i) {
      const seg = segList.getItem(i);
      const type = seg.pathSegType;
      if (type === 1) { continue; }
      const pts = [];
      ['', 1, 2].forEach(function (n, j) {
        const x = seg['x' + n], y = seg['y' + n];
        if (x !== undefined && y !== undefined) {
          const pt = math.transformPoint(x, y, m);
          pts.splice(pts.length, 0, pt.x, pt.y);
        }
      });
      // path.replacePathSeg(type, i, pts, path);
    }

    // utilities.reorientGrads(path, m);
  }
};

// //////////////////////////////////////////////////////////
// Performance times with various browsers on Macbook 2011 8MB RAM OS X El Capitan 10.11.4
//
// To see 'Before Optimization' performance, making the following two edits.
// 1. utilities.getStrokedBBox - change if( elems.length === 1) to if( false && elems.length === 1)
// 2. utilities.getBBoxWithTransform - uncomment 'Old technique that was very slow'

// Chrome
// Before Optimization
//	 Pass1 svgCanvas.getStrokedBBox total ms 4,218, ave ms 41.0,	 min/max 37 51
//	 Pass2 svgCanvas.getStrokedBBox total ms 4,458, ave ms 43.3,	 min/max 32 63
// Optimized Code
//	 Pass1 svgCanvas.getStrokedBBox total ms 1,112, ave ms 10.8,	 min/max 9 20
//	 Pass2 svgCanvas.getStrokedBBox total ms		34, ave ms	0.3,	 min/max 0 20

// Firefox
// Before Optimization
//	 Pass1 svgCanvas.getStrokedBBox total ms 3,794, ave ms 36.8,	 min/max 33 48
//	 Pass2 svgCanvas.getStrokedBBox total ms 4,049, ave ms 39.3,	 min/max 28 53
// Optimized Code
//	 Pass1 svgCanvas.getStrokedBBox total ms	 104, ave ms 1.0,	 min/max 0 23
//	 Pass2 svgCanvas.getStrokedBBox total ms		71, ave ms 0.7,	 min/max 0 23

// Safari
// Before Optimization
//	 Pass1 svgCanvas.getStrokedBBox total ms 4,840, ave ms 47.0,	 min/max 45 62
//	 Pass2 svgCanvas.getStrokedBBox total ms 4,849, ave ms 47.1,	 min/max 34 62
// Optimized Code
//	 Pass1 svgCanvas.getStrokedBBox total ms		42, ave ms 0.4,	 min/max 0 23
//	 Pass2 svgCanvas.getStrokedBBox total ms		17, ave ms 0.2,	 min/max 0 23

QUnit.test('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function (assert) {
  const done = assert.async();
  assert.expect(2);
  const {getStrokedBBox} = utilities;
  const {children} = currentLayer;

  let lastTime, now,
    min = Number.MAX_VALUE,
    max = 0,
    total = 0;

  fillDocumentByCloningElement(groupWithMatrixTransform, 50);
  fillDocumentByCloningElement(textWithMatrixTransform, 50);

  // The first pass through all elements is slower.
  const count = children.length;
  const start = lastTime = now = Date.now();
  // Skip the first child which is the title.
  for (let index = 1; index < count; index++) {
    const child = children[index];
    /* const obj = */ getStrokedBBox([child], mockAddSvgElementFromJson, mockPathActions);
    now = Date.now(); const delta = now - lastTime; lastTime = now;
    total += delta;
    min = Math.min(min, delta);
    max = Math.max(max, delta);
  }
  total = lastTime - start;
  const ave = total / count;
  assert.ok(ave < 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms');
  console.log('Pass1 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ',\t min/max ' + min + ' ' + max);

  // The second pass is two to ten times faster.
  setTimeout(function () {
    const count = children.length;

    const start = lastTime = now = Date.now();
    // Skip the first child which is the title.
    for (let index = 1; index < count; index++) {
      const child = children[index];
      /* const obj = */ getStrokedBBox([child], mockAddSvgElementFromJson, mockPathActions);
      now = Date.now(); const delta = now - lastTime; lastTime = now;
      total += delta;
      min = Math.min(min, delta);
      max = Math.max(max, delta);
    }

    total = lastTime - start;
    const ave = total / count;
    assert.ok(ave < 2, 'svgedit.utilities.getStrokedBBox average execution time is less than 1 ms');
    console.log('Pass2 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ',\t min/max ' + min + ' ' + max);

    done();
  });
});