svgedit/test/utilities_performance_test.js

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

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

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

/**
 * Create an SVG element for a mock.
 * @param {module:utilities.SVGElementJSON} jsonMap
 * @returns {SVGElement}
 */
function mockCreateSVGElement (jsonMap) {
  const elem = document.createElementNS(NS.SVG, jsonMap.element);
  Object.entries(jsonMap.attr).forEach(([attr, value]) => {
    elem.setAttribute(attr, value);
  });
  return elem;
}

/**
 * Mock of {@link module:utilities.EditorContext#addSVGElementFromJson}.
 * @param {module:utilities.SVGElementJSON} json
 * @returns {SVGElement}
 */
function mockaddSVGElementFromJson (json) {
  const elem = mockCreateSVGElement(json);
  currentLayer.append(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');

/**
 * Toward performance testing, fill document with clones of element.
 * @param {SVGElement} elem
 * @param {Integer} count
 * @returns {undefined}
 */
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 {parentNode} = elem;
    parentNode.append(clone);
  }
}

QUnit.module('svgedit.utilities_performance');

const mockPathActions = {
  resetOrientation (path) {
    if (utilities.isNullish(path) || 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);
    return undefined;
  }
};

// //////////////////////////////////////////////////////////
// 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 ct = children.length;

    const strt = lastTime = now = Date.now();
    // Skip the first child which is the title.
    for (let index = 1; index < ct; 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 - strt;
    const avg = total / ct;
    assert.ok(avg < 2, 'svgedit.utilities.getStrokedBBox average execution time is less than 1 ms');
    console.log('Pass2 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + avg.toFixed(1) + ',\t min/max ' + min + ' ' + max);

    done();
  });
});