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>
|