Время цикла Javascript для клонирования thead
Я попытался создать фиксированный thead, клонирующий thead из другой таблицы.
Чтобы создать все td с такой же шириной, как у оригиналов, я зацикливаю каждый td и копирую ширину.
Я хочу иметь лучшую производительность, потому что в таблице может быть много строк (> 10000).
Я считаю, что время, затрачиваемое на цикл, зависит от строк в исходной таблице; например, со 100 строками требуется 10 мс, чтобы зациклить 9 столбцов, а 15000 строк - 350 мс ... почему ???
Я повторяю только thead исходной таблицы, и он всегда имеет 1 строку и фиксированное количество столбцов ...
Код:
var originTbl = document.querySelector("div.origin table.mytable");
var originTbl_Head = originTbl.querySelector("thead");
var cloneTbl = document.querySelector("div.cloned table.mytable");
var clone = originTbl_Head.cloneNode(true);
cloneTbl.appendChild(clone);
originTbl_Head.style.visibility = 'hidden';
var tds = cloneTbl.querySelectorAll('thead tr:first-child td');
var originTbl_Thead_Tr = originTbl.querySelectorAll("thead tr");
var td_list = originTbl_Thead_Tr[0].querySelectorAll('td');
console.time("loop");
for(i = 0; i < tds.length; i++) {
var td = td_list[i];
var width = td.clientWidth;
tds[i].style.width = width + 'px';
}
console.timeEnd('loop');
чего именно ты хочешь добиться?
Когда вы устанавливаете и читаете clientWidth в цикле, вы заставляете пересчитывать значения рендеринга всей таблицы на каждом раунде итерации. Это означает, что ширина каждого td в таблице в конечном итоге вычисляется, и это занимает больше времени при вычислении большего количества строк.
См. макетирование для дальнейших объяснений.
Если вы назначили ширину оригинального <td>, клонированные копии указанных оригиналов будут иметь одинаковую ширину, поэтому цикл не нужен.
@Teemu Спасибо! Я читаю статью, но не понимаю, почему, если я читаю только первую строку thead, она пересчитывает всю исходную таблицу, включая тело
Это зависит от элемента, от CSS и встроенных стилей, от реализации и кто знает от чего, но если ширина не определена, самая широкая ячейка в столбце определяет ширину, поэтому вся таблица должна быть повторяется. Кроме того, семантически правильно использовать элементы TH в THEAD вместо TD. Также это скорее теоретический вопрос, дополнительное время удивительно мало, учитывая разницу в размерах столов.
Есть несколько интересных статей о вычислении ширины столбцов в Рекомендации W3C. Похоже, здесь происходит мой комментарий "каждый td в таблице в конечном итоге вычисляется".
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
why?
Потому что когда ты это делаешь
var originTbl = document.querySelector("div.origin table.mytable");
Ему нужно отследить весь дочерний элемент до самого глубокого дочернего элемента. Это объясняет, почему вы можете использовать originTbl.querySelector("thead");.
Чтобы улучшить его, добавьте атрибут id к элементу thead и запросите идентификатор напрямую с помощью document.getElementById.
Да ладно, извините ... спасибо, что заметили ... скоро я улучшу свой ответ
Итак ... "обработка большего количества строк занимает больше времени"? Мне кажется правильным ... (время обработки включает макет / рендеринг в браузере)