performance.html revision a3b15d60042c81a524cebb94370e5a234a19d04b
<!DOCTYPE html>
<html>
<head>
<title>Performance tests of various datatables</title>
</head>
<body>
<div id="node"></div>
<script src="/build/yui/yui.js"></script>
<script>
var Y = YUI({
filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
}).use('node', function(Y) {
YNode = Y.Node;
YSub = Y.Lang.sub;
//createTableFromYNode();
// Y.one('#node table').remove();
//usingDOM();
// Y.one('#node table').remove();
superLongCrazyString();
});
//This table is generated through a series of node creations using Y.Node.create()
function createTableFromYNode() {
var TEMPLATE_TABLE = '<table></table>',
TEMPLATE_COL = '<col></col>',
TEMPLATE_THEAD = '<thead></thead>',
TEMPLATE_TBODY = '<tbody></tbody>',
TEMPLATE_TH = '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}"><div>{value}</div></th>',
TEMPLATE_TR = '<tr id="{id}"></tr>',
TEMPLATE_TD = '<td headers="{headers}" class="{classnames}"><div>{value}</div></td>',
TEMPLATE_VALUE = '{value}',
TEMPLATE_MSG = '<tbody></tbody>',
tblNode = YNode.create(TEMPLATE_TABLE),
tBodyNode = YNode.create(TEMPLATE_TBODY),
trNode = YNode.create(TEMPLATE_TR);
for (var i = 0; i <= 10000; ++i) {
if (i%10 === 0 && i !== 0) {
tBodyNode.append(trNode);
trNode = YNode.create(TEMPLATE_TR);
}
var tdNode = YNode.create(YSub(TEMPLATE_TD, {value:i}));
trNode.append(tdNode);
}
tblNode.append(tBodyNode);
Y.one('#node').append(tblNode);
}
function cloneTr() {
var TEMPLATE_TABLE = '<table></table>',
TEMPLATE_COL = '<col></col>',
TEMPLATE_THEAD = '<thead></thead>',
TEMPLATE_TBODY = '<tbody></tbody>',
TEMPLATE_TH = '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}"><div>{value}</div></th>',
TEMPLATE_TR = '<tr id="{id}"></tr>',
TEMPLATE_TD = '<td headers="{headers}" class="{classnames}"><div>{value}</div></td>',
TEMPLATE_VALUE = '{value}',
TEMPLATE_MSG = '<tbody></tbody>',
tblNode = YNode.create(TEMPLATE_TABLE),
tBodyNode = YNode.create(TEMPLATE_TBODY),
trNode = YNode.create(TEMPLATE_TR);
}
//This table is created in a similar way to the Y.Node.create() table, except it bypasses
//node and uses direct DOM methods
function usingDOM() {
var TEMPLATE_TABLE = '<table></table>',
TEMPLATE_COL = '<col></col>',
TEMPLATE_THEAD = '<thead></thead>',
TEMPLATE_TBODY = '<tbody></tbody>',
TEMPLATE_TH = '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}"><div>{value}</div></th>',
TEMPLATE_TR = '<tr id="{id}"></tr>',
TEMPLATE_TD = '<td headers="{headers}" class="{classnames}"><div>{value}</div></td>',
TEMPLATE_VALUE = '{value}',
TEMPLATE_MSG = '<tbody></tbody>',
tbl = document.createElement("table"),
tbody = document.createElement("tbody"),
tr = document.createElement("tr");
for (var i = 0; i <= 10000; ++i) {
if (i%10 === 0 && i !== 0) {
tbody.appendChild(tr);
tr = document.createElement("tr");
}
var td = document.createElement("td"),
liner = document.createElement('div');
liner.innerHTML = YSub(TEMPLATE_VALUE, {value:i});
td.appendChild(liner);
tr.appendChild(td);
}
tbl.appendChild(tbody);
document.getElementById('node').appendChild(tbl);
}
//This method generates a super long string, and performs 1 Y.Node.create() operation
function superLongCrazyString() {
var TEMPLATE = {
OPEN_TABLE: '<table>',
CLOSE_TABLE: '</table>',
OPEN_TBODY: '<tbody>',
CLOSE_TBODY: '</tbody>',
OPEN_TR: '<tr id="{id}">',
CLOSE_TR: '</tr>',
TH: '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}"><div>{value}</div></th>'
},
str = TEMPLATE.OPEN_TABLE + TEMPLATE.OPEN_TBODY,
table;
for (var i = 0; i < 10000; ++i) {
if (i%10 === 0) {
str += TEMPLATE.OPEN_TR;
}
str += YSub(TEMPLATE.TH, {value:i});
if (i%10 === 9) {
str += TEMPLATE.CLOSE_TR;
}
}
table = YNode.create(str);
Y.one('#node').append(table);
}
</script>
</body>
</html>
</script>