Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   сделать таблицу. (https://javascript.ru/forum/misc/35565-sdelat-tablicu.html)

danik.js 16.02.2013 14:41
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>

danik.js 16.02.2013 15:05
Хах, че за хрень. Deff, не мог бы помочь разобраться? У меня выходит что innerHTML медленней (Google Chrome):

Три последние эксперимента:
190,
280,
280

То есть innerHTML оказывается даже медленней. Почему так?

dima*** 16.02.2013 15:06
Ничего себе!!!Теперь всё понятно!Спасибо за понятное объяснение.:)
Лист в "закладки"!!!

Deff 16.02.2013 15:44
danik.js,
Не так выполняете - нужно последний тег - креaтить ( и внего в вставлять контекст, и только потом в DOM

Deff 16.02.2013 16:23 
<!DOCTYPE html>
<body>
<script>

var strTabl;
var div=document.createElement('div');
function createTable() {
    strTabl ="<tbody>\n";
    for (var k = 0; k < 4; k++) {
        strTabl+= "\n<tr>\n";
        for (var m = 0; m < 5; m++) {
         strTabl+= "<td" + (k == m ? " bgcolor=red" : "") + ">"+"строка " +k+"; яч "+m+"</td>";
        }  strTabl+=  "\n</tr>\n";
    }
    strTabl+= "\n</tbody>"
    var table=document.createElement('table');
    table.border='1';
    table.innerHTML = strTabl;
    div.appendChild(table);
}

function run() {

    var tstart = new Date();
    strTabl = '';
    for (var i = 0; i < 1000; i++) {
    createTable()
    }
    document.body.appendChild(div);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

danik.js 16.02.2013 16:41
Ок, что ты скажешь на это, Deff ? У меня второй пример работает немного быстрее.

<!DOCTYPE html>
<body>
<script>
 
var strTabl;
var div=document.createElement('div');
function createTable() {
    strTabl ="<tbody>\n";
    for (var k = 0; k < 4; k++) {
        strTabl+= "\n<tr>\n";
        for (var m = 0; m < 5; m++) {
         strTabl+= "<td" + (k == m ? " bgcolor=red" : "") + ">"+"строка " +k+"; яч "+m+"</td>";
        }  strTabl+=  "\n</tr>\n";
    }
    strTabl+= "\n</tbody>"
    var table=document.createElement('table');
    table.border='1';
    table.innerHTML = strTabl;
    div.appendChild(table);
}
 
function run() {
 
    var tstart = new Date();
    strTabl = '';
    for (var i = 0; i < 10000; i++) {
    createTable()
    }
    document.body.appendChild(div);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>



<!DOCTYPE html>
<body>
<script>

var div=document.createElement('div');
var textProp = ('innerText' in div) ? 'innerText' : 'textContent';
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[textProp]= "строка " +k+"; яч "+m;
            if (k == m) {
                data.style.backgroundColor = 'red';
                //data.style.borderColor = 'red';
                //data.style.color = 'red';
            }
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    div.appendChild(table);
}
 
function run() {
    var tstart = new Date();
    for (var i = 0; i < 10000; i++) {
        createTable();
    }
    document.body.appendChild(div);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

рони 16.02.2013 16:48
Вариант...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
</head>
<body>
<script>
function createTable( fragment ) {
    var table, row, data;
    table = document.createElement('table');
    table.border = 1;
    for (var k = 0; k < 4; k++) {
        row = table.insertRow(k);
        for (var m = 0; m < 5; m++) {
            data = row.insertCell(m);
            data.textContent  = "строка " +k+"; яч "+m;
            if (k == m) {
                data.style.backgroundColor = 'red';
                //data.style.borderColor = 'red';
                //data.style.color = 'red';
            }
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    return table;
}

function run() {
    var tstart = new Date();
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 10000; i++) {
        fragment.appendChild(createTable());
    }
    document.body.appendChild(fragment);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>
</html>

Deff 16.02.2013 16:49
danik.js,
В Опере = 1-й 1456 2-й 1945
Мозилла 1317 1999
Хром 1332 1752
(*Перезапуск делал по кнопке посмотреть это данные для поста 46

danik.js 16.02.2013 16:58
Да, я уже потестил. В хроме dom-методы работают быстрее чем парсинг html. В остальных браузерах парсинг происходит быстрее. Но не в разы как я предполагал. В два или менее раз. Поправил свой тест, там была идиотская ошибка.
Кстати innerText в хроме быстрее чем textContent (не помню - на запись или на чтение тестил)

Deff, в ИЕ8 не работает вариант с innerHTML. В нем же вроде какие-то траблы с innerHTML у таблиц?

Deff 16.02.2013 17:01
Для поста 45 и 47
в Хроме 182 и 142 - Ваш быстрее
Короче по любому если креатить тег перед запихиваием в DOM
элементы внутри отрытого тега по браузерам втискивать тестовой нодой чуть быстрее, кроме Хрома

danik.js 16.02.2013 17:03
Кстати, по теме: http://jsperf.com/table-creation/2

Deff 16.02.2013 17:04
Цитата:
Сообщение от danik.js
Deff, в ИЕ8 не работает вариант с innerHTML. В нем же вроде какие-то траблы с innerHTML у таблиц?
в ИЕ8 не работает вариант с innerHTML. Там да , там и таблы для ускорения нун делать по другому Вот забавная задачка => http://javascript.ru/forum/events/30...tml#post194863

danik.js 16.02.2013 17:14
Поправил тест, чтоб в лисе работал: http://jsperf.com/table-creation/3

рони, твой вариант медленней, как ни странно. Хотя в ие он работает быстрее. Кстати вариант с innerHTML не работает даже в IE9, так что он вообще не приемлем.

Deff 16.02.2013 17:21
Цитата:
Сообщение от danik.js
Хотя в ие он работает быстрее. Кстати вариант с innerHTML не работает
Просто он не правильный , ща поправлю

Deff 16.02.2013 17:38 
<!DOCTYPE html>
<body>
<script>

var strTabl;
var div=document.createElement('div');
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();
    } //alert(strTabl)
    div.innerHTML = strTabl;
    document.body.appendChild(div);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

Покороче (Ибо долго в ИЕ)
<!DOCTYPE html>
<body>
<script>

var strTabl;
var div=document.createElement('div');
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 < 100; i++) {
        createTable();
    } //alert(strTabl)
    div.innerHTML = strTabl;
    document.body.appendChild(div);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

dima*** 17.02.2013 11:26
Почему-то так не работает?:(
strTabl+= "<td" + (k == m ? " style=color:red" : "") + ">"+rew(k,m)+"</td>";

var strTabl="<table border=1><tbody>\n";
	    for (k = 0; k < u.length; k++) {
	        strTabl+= "\n<tr>\n";
	        for (m = 0; m < u.length; m++) {
				//strTabl+= "<td>"+rew(k,m)+"</td>";
	      strTabl+= "<td" + (k == m ? " style=color:red" : "") + ">"+rew(k,m)+"</td>";
		   }  
			strTabl+=  "\n</tr>\n";
	    }
	        strTabl+= "\n</tbody></table>";
document.write	(strTabl);

Deff 17.02.2013 11:30 
strTabl+= "<td" + (k == m ? " bgcolor=red" : "") + ">"+rew(k,m)+"</td>";

dima*** 17.02.2013 11:48
Deff-спасибо!Заработало!:)


Часовой пояс GMT +3, время: 15:03.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице