performance.html 6.7 KB
<!DOCTYPE html>
<html>
<head>
<title>Performance testcase</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="../../js/tinymce/tinymce.dev.js"></script>
<script>
var editor;

var performanceTests = {
	'tinymce.Editor.getContent (text blocks)': {
		setup: function() {
			var html;

			if (!this.html) {
				html = [];
				for (var i = 0; i < 400; i++) {
					html.push('<p id="x" title="my title abc" class="myclass">');

					for (var a = 0; a < 100; a++)
						html.push('word' + i + ',' + a + ' abc');

					html.push('</p>');
				}

				this.html = html.join('');
			}

			editor.setContent(this.html);
		},

		run: function() {
			return editor.getContent();
		}
	},

	'tinymce.Editor.getContent (text blocks with entities)': {
		setup: function() {
			var html;

			if (!this.html) {
				html = [];
				for (var i = 0; i < 400; i++) {
					html.push('<p id="x" title="my title &aring;&auml;&ouml;" class="myclass">');

					for (var a = 0; a < 100; a++)
						html.push('word' + i + ',' + a + ' &aring;&auml;&ouml;');

					html.push('</p>');
				}

				this.html = html = html.join('');
			} else
				html = this.html;

			editor.setContent(html);
		},

		run: function() {
			return editor.getContent();
		}
	},

	'tinymce.html.DomParser (validate: false)': {
		setup: function() {
			var html;

			if (!this.html) {
				html = [];
				for (var i = 0; i < 400; i++) {
					html.push('<p id="x" title="my title &aring;&auml;&ouml" class="myclass">');
					html.push('<strong>bold</strong><em>italic</em>');

					for (var a = 0; a < 100; a++)
						html.push('word' + i + ',' + a + ' &aring;&auml;&ouml;');

					html.push('</p>');
				}

				this.html = html = html.join('');
			}

			editor.setContent(this.html);
		},

		run: function() {
			return new tinymce.html.DomParser({validate: false}).parse(this.html);
		}
	},

	'tinymce.html.DomParser (validate: true)': {
		setup: function() {
			var html;

			if (!this.html) {
				html = [];
				for (var i = 0; i < 400; i++) {
					html.push('<p id="x" title="my title &aring;&auml;&ouml" class="myclass">');
					html.push('<strong>bold</strong><em>italic</em>');

					for (var a = 0; a < 100; a++)
						html.push('word' + i + ',' + a + ' &aring;&auml;&ouml;');

					html.push('</p>');
				}

				this.html = html = html.join('');
			}

			editor.setContent(this.html);
		},

		run: function() {
			return new tinymce.html.DomParser().parse(this.html);
		}
	},

	'tinymce.html.SaxParser (validate: false)': {
		setup: function() {
			var html;

			if (!this.html) {
				html = [];
				for (var i = 0; i < 400; i++) {
					html.push('<p id="x" title="my title &aring;&auml;&ouml" class="myclass">');

					for (var a = 0; a < 100; a++)
						html.push('word' + i + ',' + a + ' &aring;&auml;&ouml;');

					html.push('</p>');
				}

				this.html = html = html.join('');
			}

			editor.setContent(this.html);
		},

		run: function() {
			return new tinymce.html.SaxParser({validate: false}).parse(this.html);
		}
	},

	'tinymce.html.SaxParser (validate: true)': {
		setup: function() {
			var html;

			if (!this.html) {
				html = [];
				for (var i = 0; i < 400; i++) {
					html.push('<p id="x" title="my title &aring;&auml;&ouml" class="myclass">');

					for (var a = 0; a < 100; a++)
						html.push('word' + i + ',' + a + ' &aring;&auml;&ouml;');

					html.push('</p>');
				}

				this.html = html = html.join('');
			}

			editor.setContent(this.html);
		},

		run: function() {
			return new tinymce.html.SaxParser().parse(this.html);
		}
	},

	'tinymce.html.Entities.decode': {
		run: function() {
			for (var i = 0; i < 10000; i++) {
				tinymce.html.Entities.decode('text&aring;&auml;&uml;&lt;&gt;&amp;text');
			}
		}
	},

	'tinymce.util.URI (absolute/relative)': {
		run: function() {
			for (var i = 0; i < 200; i++) {
				new tinymce.util.URI('http://www.site.com/dir1/dir2/file.html').toRelative('http://www.site.com/dir1/dir3/file.html');
				new tinymce.util.URI('http://www.site.com/dir1/dir2/file.html').toRelative('http://www.site.com/dir3/dir4/file.html'); 
				new tinymce.util.URI('http://www.site.com/dir1/dir2/').toAbsolute('../dir3');
				new tinymce.util.URI('http://www.site.com/dir1/dir2/').toAbsolute('../dir3', 1);
			}
		}
	},

	'tinymce.dom.DOMUtils.parseStyle/serializeStyle': {
		run: function() {
			for (var i = 0; i < 1000; i++) {
				tinymce.DOM.serializeStyle(
					tinymce.DOM.parseStyle('border:1px solid red; background-image:url(some/dir/file.gif); font-size: 15px; color:rgb(1,2,3)')
				);
			}
		}
	},

	'tinymce.html.Styles': {
		setup: function() {
			this.styles = new tinymce.html.Styles({
				url_converter : function(url) {
					return '|' + url + '|';
				}
			});
		},

		run: function() {
			for (var i = 0; i < 1000; i++) {
				this.styles.serialize(this.styles.parse("key:rgb(1,2,3) url(a) url('b') url(\"c\") \"st\\\"r'st'r\" 'st\\'r\"str\"str'"));
				this.styles.serialize(this.styles.parse("key:rgb(1,2,3) rgb(1,2,3) rgb(1,2,3) rgb(1,2,3)"));
				this.styles.serialize(this.styles.parse("font-size: 10px; font-weight: bold; font-family: Arial"));

				//tinymce.DOM.serializeStyle(tinymce.DOM.parseStyle("key:rgb(1,2,3) url(a) url('b') url(\"c\") \"st\\\"r'st'r\" 'st\\'r\"str\"str'"));
				//tinymce.DOM.serializeStyle(tinymce.DOM.parseStyle("key:rgb(1,2,3) rgb(1,2,3) rgb(1,2,3) rgb(1,2,3)"));
				//tinymce.DOM.serializeStyle(tinymce.DOM.parseStyle("font-size: 10px; font-weight: bold; font-family: Arial"));
			}
		}
	}
};

tinymce.init({
	mode : "exact",
	elements : "elm1",
	add_unload_trigger : false,
	init_instance_callback : function(ed) {
		var count = 0;

		editor = ed;

		tinymce.each(performanceTests, function(test, title) {
			tinymce.DOM.add('tests', 'li', null, '<a id="test_' + (++count) + '" href="#">' + title + '</a>');
			tinymce.DOM.bind(tinymce.DOM.get('test_' + count), 'click', function(e) {
				var count = 0, numberOfRuns;

				numberOfRuns = parseInt(document.getElementById('runs').value);

				e.preventDefault();
				e.target.innerHTML = title + ' (Running)';

				function runTest() {
					var i, time, times = [], sum = 0;

					if (test.setup)
						test.setup();

					time = +new Date;
					test.run();
					time = (+new Date) - time;
					times.push(time);

					if (count++ >= numberOfRuns) {
						for (i = 0; i < times.length; i++)
							sum += times[i];

						e.target.innerHTML = title + ' (Avarage: ' + (sum / times.length) + 'ms)';
					} else {
						e.target.innerHTML = title + ' (Runned ' + count + " of " + numberOfRuns + ", " + time + "ms)";
						setTimeout(runTest, 10);
					}
				};

				setTimeout(runTest, 10);
			});
		});
	}
});
</script>
</head>
<body>
	<h1>Performance tests</h1>
	<p style="margin-left: 10px">Runs: <input id="runs" type="text" value="10" size="3" /></p>
	<ul id="tests"></ul>
	<textarea id="elm1"></textarea>
</body>
</html>