277 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			HTML
		
	
	
			
		
		
	
	
			277 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			HTML
		
	
	
<!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 åäö" class="myclass">');
 | 
						|
 | 
						|
					for (var a = 0; a < 100; a++)
 | 
						|
						html.push('word' + i + ',' + a + ' åäö');
 | 
						|
 | 
						|
					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 åäö" class="myclass">');
 | 
						|
					html.push('<strong>bold</strong><em>italic</em>');
 | 
						|
 | 
						|
					for (var a = 0; a < 100; a++)
 | 
						|
						html.push('word' + i + ',' + a + ' åäö');
 | 
						|
 | 
						|
					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 åäö" class="myclass">');
 | 
						|
					html.push('<strong>bold</strong><em>italic</em>');
 | 
						|
 | 
						|
					for (var a = 0; a < 100; a++)
 | 
						|
						html.push('word' + i + ',' + a + ' åäö');
 | 
						|
 | 
						|
					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 åäö" class="myclass">');
 | 
						|
 | 
						|
					for (var a = 0; a < 100; a++)
 | 
						|
						html.push('word' + i + ',' + a + ' åäö');
 | 
						|
 | 
						|
					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 åäö" class="myclass">');
 | 
						|
 | 
						|
					for (var a = 0; a < 100; a++)
 | 
						|
						html.push('word' + i + ',' + a + ' åäö');
 | 
						|
 | 
						|
					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åä¨<>&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('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>
 |