10.08.2016, 07:35
|
|
Интересующийся
|
|
Регистрация: 09.08.2016
Сообщений: 20
|
|
|
warren buffet,
Почитал ману и что?
Во-первых не очень корректно давать на русскоязычном форуме ссылку на англоязычный текст, ибо не все владеют английским. Но поскольку так случилось что английским я по стечению обстоятельств владею, то...
во-вторых: в тексте по ссылке нет ни слова о том, почему insertRow предпочтительней appendChild.
Если создавать таблицу с нуля, то insertRow с точки зрения читабельности кода да, удобней. Если же таблица уже есть, то через cloneNode и appendChild удобней и грамотней копировать строки, а на больших объемах еще и в разы производительней.
|
|
10.08.2016, 09:12
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Сообщение от renatdmit
|
|
ибо не все владеют английским
|
Конечно не все, а кодеры - владеют. Или ты на русском пишешь <див ид="главный-див", а потом .главный-див {ширина:1000пикс;}, а потом еще документ.дайЭлементПоИд...
Да или нет? Так что ты владеешь и читай, ибо все что касается компов написано по-английски.
Новая таблица - это частный случай, конкретный. На практике строки удаляются и вставляются в готовую таблицу и аппендить там нечего, ибо есть предусмотренные методы.
Последний раз редактировалось warren buffet, 10.08.2016 в 09:17.
|
|
10.08.2016, 09:19
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
То есть тебе мало непонятного поведения input+datalist, тебе надо все сделать непонятным, чтобы веселее стало жить. Так вот, тогда не со мной спорь, а иди на w3c.org и там качай права касательно своего видения устройства веб-технологий.
|
|
10.08.2016, 11:04
|
|
Интересующийся
|
|
Регистрация: 09.08.2016
Сообщений: 20
|
|
Сообщение от warren buffet
|
|
Новая таблица - это частный случай, конкретный. На практике строки удаляются и вставляются в готовую таблицу и аппендить там нечего, ибо есть предусмотренные методы.
|
Вот как раз при вставлении строк в существующую таблицу методы cloneNode и append проще и работают в разы быстрее. |
|
10.08.2016, 11:27
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,141
|
|
|
Сообщение от renatdmit
|
|
Вот как раз при вставлении строк в существующую таблицу методы cloneNode и append проще и работают в разы быстрее.
|
Ты в это веруешь?
или способен показать наглядно преимущество? |
|
10.08.2016, 11:38
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от renatdmit
|
|
работают в разы быстрее.
|
 |
|
10.08.2016, 11:59
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Есть категория людей под названием нигилисты, которым все надо сделать не как у людей, через ж. В этом у них весь фан. Создать себе проблему и героически ее решать, чтобы казаться самому себе героем.
В разы быстрее - это скажем вместо 0.0003 будет 0.00005 и что с того? С таблицей с миллионом строк может стать заметной разница, но где оппонент такие таблицы-то видел на вебе и кто вообще такими сможет оперировать?
Но тут важен не выбор метода, а смысл темы. ТС просто не знал про инсерты и применил известный ему метод как просто известный и освоенный, а вовсе не с явным умыслом ускорить там чего-то блин.
Бенчмарк для страждущих правды. http://pastie.org/482023
Кстати, инсерт работает с таблицей, а для аппенда нужно еще tbody создать явно или явно получить. Иначе твой аппенд нафигачит строк в межклеточное пространство. |
|
10.08.2016, 12:04
|
|
Интересующийся
|
|
Регистрация: 09.08.2016
Сообщений: 20
|
|
|
Сообщение от MallSerg
|
Ты в это веруешь?
или способен показать наглядно преимущество?
|
Я никогда и ни во что не верую. Именно поэтому я и задал вопрос warren buffet, на который до сих пор не получил внятного ответа, ни единого аргумента в пользу insertRow кроме каких-то глупых ссылок и бестолкового хамства.
С мое стороны аргументы простые:
1) cloneNode + AppendChild позволяет не создавать в цикле ячейки через insertCells, ячейки просто копируются из любой строки
2) Скорость. Я провел тесты. Создайте в HTML таблицу с десятью колонками и одной строкой. Теперь проверьте работу двух алгоритмов: сначала попробуйте создать какое-либо большое количество строк с помощью InsertRows + insertCells, заполнив их какими-нибудь данными, ну например цифрами с 1 по 10 по номеру колонок. А затем то же количество колонок с помощью cloneNode и appendChild, также заполняя их содержимым. Я получил разницу в разы в пользу второго варианта.
Мой код:
<html>
<head>
</head>
<body>
<table>
<THEAD><TR><TH>Man</TH><TH>Woman</TH><TH>Girl</TH><TH>Boy</TH><TH>Dog</TH>
<TH>Man</TH><TH>Woman</TH><TH>Girl</TH><TH>Boy</TH><TH>Dog</TH></TR></THEAD>
<TBODY>
<TR><TD>Ivan</TD><TD>Maria</TD><TD>Olga</TD><TD>Victor</TD><TD>Sharic</TD>
<TD>Ivan</TD><TD>Maria</TD><TD>Olga</TD><TD>Victor</TD><TD>Sharic</TD></TR>
</TBODY>
</table>
<input type = button onclick = "throughInsert()" value = Insert />
<input type = button onclick = "throughAppend()" value = Append />
</body>
</html>
<script type="text/javascript">
var cnt = 10000;
function throughInsert()
{
table = document.querySelector("TABLE");
for(i = 2; i < cnt; i++)
{
row = table.insertRow(i);
row.insertCell().innerHTML = i;
for(j = 2; j<11; j++)
{
row.insertCell().innerHTML = j;
}
}
alert("finish");
}
function throughAppend()
{
tbody = document.querySelector("TABLE TBODY");
rowPatt = tbody.querySelector("TR");
for(i = 1; i < cnt; i++)
{
row = rowPatt.cloneNode(true);
row.cells[0].innerHTML = i;
for(j = 2; j<11; j++)
{
row.cells[j - 1].innerHTML = j;
}
tbody.appendChild(row);
}
alert("finish");
}
</script>
Последний раз редактировалось renatdmit, 10.08.2016 в 12:07.
|
|
10.08.2016, 12:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<script>
var Table = document.body.appendChild(document.createElement('table')), time = performance.now();
for(var i = 0; i < 1000; i++) {
var row=Table.insertRow(i);
for(var j=0; j< 1000; j++) {
var cell=row.insertCell(j);
cell.appendChild(document.createTextNode([i,j]));
}
}
alert(performance.now() - time);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<script>
var Table = document.body.appendChild(document.createElement('table')), time = performance.now();
for(var i = 0; i < 1000; i++) {
var row= document.createElement('tr');
for(var j=0; j< 1000; j++) {
var cell= document.createElement('td');
cell.appendChild(document.createTextNode([i,j]));
row.appendChild(cell)
}
Table.appendChild(row)
}
alert(performance.now() - time);
</script>
</body>
</html>
|
|
|
|
