<head>
<style>
.tstCell{
border:1px solid silver;
float:left;
width:6em;
}
.tstHead{
border:1px solid silver;
float:left;
width:20em;
}
.tstRow{
clear:both;
}
</style>
<script>
//<!--
var gTestText = "This some text test string";
var gTestRun = 5000;
function TestHolder(title, htmlTest, domTest)
{
this._title = title;
this._htmlTest = htmlTest;
this._domTest = domTest;
}
function testRun()
{
var testParent = document.getElementById("testRoot");
var resTemplate = document.getElementById("templResult");
for(var i in TestRegistry)
{
var entry = TestRegistry[i];
//create test area for HTML test
var testArea = document.createElement("DIV"); //create new testing area
testParent.appendChild(testArea);
var estmtHtml = testInv(testArea, entry._htmlTest);
//clean results by removing testArea
testParent.removeChild(testArea);
//create test area for DOM test
testArea = document.createElement("DIV"); //create new testing area
testParent.appendChild(testArea);
var estmtDOM = testInv(testArea, entry._domTest);
//clean results by removing testArea
testParent.removeChild(testArea);
var res = resTemplate;
var resultParent = res.parentNode;
var res = res.cloneNode(true);
var divTitle = document.createElement("DIV");
divTitle.className = "tstHead";
divTitle.innerHTML = entry._title;
res.appendChild(divTitle);
var divPercent = document.createElement("DIV");
divPercent.className = "tstCell";
divPercent.innerHTML = ((estmtHtml / estmtDOM )* 100 - 100).toFixed(2) + '%';
divPercent.title = "dom:" + estmtDOM + "ms, html:" + estmtHtml;
res.appendChild(divPercent);
res.style.display="block";
resultParent.appendChild(res);
}
}
function testInv(parent, createAdapter)
{
var start = new Date();
for(var i = 0; i < gTestRun; ++i)
{
createAdapter(parent);
}
var end = new Date();
return end.getTime() - start.getTime();
}
var TestRegistry = new Array(
new TestHolder("insert new element and text", createAsHTML, createAsDOM)
,new TestHolder("removeChild vs innerHTML='' ",removeAsHTML,removeAsDOM)
,new TestHolder("set event handler", addEventAsHTML, addEventAsDOM)
,new TestHolder("test in depth of tree linear", deepTreeAsHTML, deepTreeAsDOM)
,new TestHolder("test in depth of tree (using helpr)", deepTreeAsHTML, deepTreeAsDOMWithHelper)
);
/****************************************************************************
** here test pairs come **
/***************************************************************************/
//
// Test pair of element creation
//
function createAsHTML(parent)
{
parent.innerHTML = "<div>"+gTestText+"</div>";
}
function createAsDOM(parent)
{
var d = document.createElement("DIV");
var text = document.createTextNode(gTestText);
d.appendChild(text);
parent.appendChild(d);
}
//
// Pair of test functions to measure remove capability. To smoth effect of difference
// in adding new DOM elements, both function uses same way to create test data.
//
function removeAsHTML(parent)
{
var d = document.createElement("DIV");
var text = document.createTextNode("some text");
d.appendChild(text);
parent.appendChild(d);
parent.innerHTML = "";
}
function removeAsDOM(parent)
{
var d = document.createElement("DIV");
var text = document.createTextNode("some text");
d.appendChild(text);
parent.appendChild(d);
for(var ch = parent.firstChildNode; ch; ch = parent.firstChildNode)
parent.remove(ch);
}
//
// Pair of test functions to measure adding events.
//
function sayHelloEventHandler()
{
alert('hello');
}
function addEventAsHTML(parent)
{
parent.innerHTML = "<div onclick='sayHelloEventHandler'> </div>"
}
function addEventAsDOM(parent)
{
var d = document.createElement("DIV");
if( d.addEventListener )
d.addEventListener('click',sayHelloEventHandler, false);
else if(d.attachEvent)
d.attachEvent('onclick',sayHelloEventHandler);
else alert("event are not supported");
}
//
// Pair of test functions to measure deep tree creation,
//
function deepTreeAsHTML(parent)
{
parent.innerHTML = "<table><tbody><tr><td><span>Mother has washed the frame</span></td></tr><tr><td><span>Mother has washed the frame(2)</span></td></tr></tbody></table>";
}
function deepTreeAsDOM(parent)
{
var levElem = document.createElement("table");
var tbl = levElem;
var temp = document.createElement("tbody");
var tbody = temp;
levElem.appendChild( temp );
levElem = temp;
temp = document.createElement("tr");
levElem.appendChild( temp );
levElem = temp;
temp = document.createElement("td");
levElem.appendChild( temp );
levElem = temp;
temp = document.createElement("span");
levElem.appendChild( temp );
levElem = temp;
temp = document.createTextNode("Mother has washed the frame");
levElem.appendChild(temp);
levElem = tbody
temp = document.createElement("tr");
levElem.appendChild( temp );
levElem = temp;
temp = document.createElement("td");
levElem.appendChild( temp );
levElem = temp;
temp = document.createElement("span");
levElem.appendChild( temp );
levElem = temp;
temp = document.createTextNode("Mother has washed the frame(2)");
levElem.appendChild(temp);
parent.appendChild(tbl);
}
function treeHelper(tag)
{
var retval = document.createElement(tag);
for(var i = 1; i < arguments.length;++i )
{
retval.appendChild(arguments[i]);
}
return retval;
}
function deepTreeAsDOMWithHelper(parent)
{
parent.appendChild(
treeHelper("table",
treeHelper("tbody",
treeHelper("tr",
treeHelper("td",
treeHelper("span", document.createTextNode("Mother has washed the frame"))
)
),
treeHelper("tr",
treeHelper("td",
treeHelper("span", document.createTextNode("Mother has washed the frame(2)"))
)
)
)
)
);
}
//-->
</script>
</head>
<body>
<div class="tstRow">
<div class="tstHead" >
Test
</div>
<div class="tstCell">
Result
</div>
</div>
<div class="tstRow">
<div class="tstRow" style="display:none" id="templResult">
</div>
</div>
<div id="testRoot" style="display:none">
</div>
<div class="tstRow">
<input type="button" onclick="testRun()" value="start test"/>
</div>
</body>