escape-perf.js

var Benchmark = require('benchmark');

function control(_string) {
		const string = _string + '';
		const length = string.length;
		let characters = '';

		for (let i = 0; i < length; i++) {
			switch (string.charCodeAt(i)) {
				case 38:
					characters += '&amp;';
					break;
				case 39:
					characters += '&#039;';
					break;
				case 34:
					characters += '&quot;';
					break;
				case 60:
					characters += '&lt;';
					break;
				case 62:
					characters += '&gt;';
					break;
				default:
					characters += string[i];
			}
		}
		return characters;
}

var UNSAFE_CHARS_PATTERN = /[<>&"']/g;

// Mapping of unsafe HTML and invalid JavaScript line terminator chars to
// their Unicode counterparts which are safe to use in JavaScript strings.
var UNICODE_CHARS = {
  '<'     : '&lt;',
  '>'     : '&gt;',
  '"'     : '&quot;',
  "'"     : '&#39;',
  '&'     : '&amp;'
};

function treatment(_str) {
  const str = _str + '';
  return str.replace(UNSAFE_CHARS_PATTERN, function(unsafeChar) {
    return UNICODE_CHARS[unsafeChar];
  });
}

function escape(s) {
	s = ''+s;
	const len = s.length;

	for (var i = 0, out = ''; i < len; i++) {
		switch (s[i]) {
			case '&': out += '&amp;';  break;
			case '<': out += '&lt;';   break;
			case '>': out += '&gt;';   break;
			case '"': out += '&quot;'; break;
			case "'": out += '&#039;'; break;
			case '/': out += '&#x2f;'; break;
			default:  out += s[i];
		}
	}

	return out;
}

const shortStr = 'asdf';
const longStr  = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper efficitur dolor imperdiet tristique. Mauris a condimentum tortor, quis bibendum ante. Cras purus massa, molestie vitae tristique nec, mollis ut justo. Nulla faucibus convallis diam, sed finibus diam eleifend ac. Aliquam sed sodales enim. Nulla volutpat fringilla eros, ac consectetur eros tempor id. Proin diam nisi, rutrum non luctus in, vestibulum vel ex.';
const shortHtml = '<foo>bar</foo>';
const longHtml = '<div><span>other component!</span><div><div><span>other component!</span><div><div><span>other component!</span><div></div></div></div></div></div></div>';

(new Benchmark.Suite)
	.add('control(shortStr)', function() {
		control(shortStr);
	})
	.add('treatment(shortStr)', function() {
		treatment(shortStr);
	})
	.add('escape(shortStr)', function() {
		escape(shortStr);
	})
	.on('cycle', function(event) {
		console.log(String(event.target));
	})
	.on('complete', function() {
		console.log('Fastest is ' + this.filter('fastest').map('name') + "\n");
	})
	.run({ 'async': false });

(new Benchmark.Suite)
	.add('control(longStr)', function() {
		control(longStr);
	})
	.add('treatment(longStr)', function() {
		treatment(longStr);
	})
	.add('escape(longStr)', function() {
		escape(longStr);
	})
	.on('cycle', function(event) {
		console.log(String(event.target));
	})
	.on('complete', function() {
		console.log('Fastest is ' + this.filter('fastest').map('name') + "\n");
	})
	.run({ 'async': false });

(new Benchmark.Suite)
	.add('control(shortHtml)', function() {
		control(shortHtml);
	})
	.add('treatment(shortHtml)', function() {
		treatment(shortHtml);
	})
	.add('escape(shortHtml)', function() {
		escape(shortHtml);
	})
	.on('cycle', function(event) {
		console.log(String(event.target));
	})
	.on('complete', function() {
		console.log('Fastest is ' + this.filter('fastest').map('name') + "\n");
	})
	.run({ 'async': false });

(new Benchmark.Suite)
	.add('control(longHtml)', function() {
		control(longHtml);
	})
	.add('treatment(longHtml)', function() {
		treatment(longHtml);
	})
	.add('escape(longHtml)', function() {
		escape(longHtml);
	})
	.on('cycle', function(event) {
		console.log(String(event.target));
	})
	.on('complete', function() {
		console.log('Fastest is ' + this.filter('fastest').map('name') + "\n");
	})
	.run({ 'async': false });