dima***, ну сам подумай. Если одна табличка генерируется за 1-2мс, то 10штук - за 10-20мс. Ты моргнуть не успеешь за это время
<!DOCTYPE html>
<body>
<script>
function createTable() {
var table, row, data;
table = document.createElement('table');
table.border = 1;
for (var k = 0; k < 4; k++) {
row = document.createElement('tr');
for (var m = 0; m < 5; m++) {
data = document.createElement('td');
data.innerHTML = "строка " +k+"; яч "+m;
if (k == m) {
data.style.backgroundColor = 'red';
//data.style.borderColor = 'red';
//data.style.color = 'red';
}
row.appendChild(data);
}
table.appendChild(row);
}
document.body.appendChild(table);
}
function run() {
var tstart = new Date();
for (var i = 0; i < 10; i++) {
createTable();
}
alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>
UPD: На моем Core i5 3210М (мобильный) 2.5ГГц Хром выдает 4мс. Попробую переделать скрипт:
<!DOCTYPE html>
<body>
<script>
function createTable( fragment ) {
var table, row, data;
table = document.createElement('table');
table.border = 1;
for (var k = 0; k < 4; k++) {
row = document.createElement('tr');
for (var m = 0; m < 5; m++) {
data = document.createElement('td');
data.innerHTML = "строка " +k+"; яч "+m;
if (k == m) {
data.style.backgroundColor = 'red';
//data.style.borderColor = 'red';
//data.style.color = 'red';
}
row.appendChild(data);
}
table.appendChild(row);
}
fragment.appendChild(table);
}
function run() {
var tstart = new Date();
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
createTable(fragment);
}
document.body.appendChild(fragment);
alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>
UPD2: разницы практически нет. А нука если не 10 а 1000 таблиц генерить:
<!DOCTYPE html>
<body>
<script>
function createTable() {
var table, row, data;
table = document.createElement('table');
table.border = 1;
for (var k = 0; k < 4; k++) {
row = document.createElement('tr');
for (var m = 0; m < 5; m++) {
data = document.createElement('td');
data.innerHTML = "строка " +k+"; яч "+m;
if (k == m) {
data.style.backgroundColor = 'red';
//data.style.borderColor = 'red';
//data.style.color = 'red';
}
row.appendChild(data);
}
table.appendChild(row);
}
document.body.appendChild(table);
}
function run() {
var tstart = new Date();
for (var i = 0; i < 1000; i++) {
createTable();
}
alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>
<!DOCTYPE html>
<body>
<script>
function createTable( fragment ) {
var table, row, data;
table = document.createElement('table');
table.border = 1;
for (var k = 0; k < 4; k++) {
row = document.createElement('tr');
for (var m = 0; m < 5; m++) {
data = document.createElement('td');
data.innerHTML = "строка " +k+"; яч "+m;
if (k == m) {
data.style.backgroundColor = 'red';
//data.style.borderColor = 'red';
//data.style.color = 'red';
}
row.appendChild(data);
}
table.appendChild(row);
}
fragment.appendChild(table);
}
function run() {
var tstart = new Date();
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
createTable(fragment);
}
document.body.appendChild(fragment);
alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>
UPD3: documentFragment тут роли не играет. Ок, добавлю для сравнения innerHTML на 1000 таблиц:
<!DOCTYPE html>
<body>
<script>
function createTable() {
var strTabl="<table border=1><tbody>\n";
for (var k = 0; k < 4; k++) {
strTabl+= "\n<tr>\n";
for (var m = 0; m < 5; m++) {
strTabl+= "<td" + (k == m ? " style=color:red" : "") + ">"+"строка " +k+"; яч "+m+"</td>";
} strTabl+= "\n</tr>\n";
}
strTabl+= "\n</tbody></table>";
document.write(strTabl);
}
function run() {
var tstart = new Date();
for (var i = 0; i < 1000; i++) {
createTable();
}
alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>
И еще улучшенный вариант innerHTML, самый быстрый:
<!DOCTYPE html>
<body>
<script>
var strTabl;
function createTable() {
strTabl +="<table border=1><tbody>\n";
for (var k = 0; k < 4; k++) {
strTabl+= "\n<tr>\n";
for (var m = 0; m < 5; m++) {
strTabl+= "<td" + (k == m ? " style=color:red" : "") + ">"+"строка " +k+"; яч "+m+"</td>";
} strTabl+= "\n</tr>\n";
}
strTabl+= "\n</tbody></table>";
}
function run() {
var tstart = new Date();
strTabl = '';
for (var i = 0; i < 1000; i++) {
createTable();
}
document.write(strTabl);
alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>