Время цикла Javascript для клонирования thead

Question

Я пытался создать фиксированное 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');

Answer 1

why? Потому что, когда вы делаете var originTbl = document.querySelector("div.origin table.mytable");, необходимо отследить все дочерние элементы до самого глубокого дочернего элемента.Это объясняет, почему вы можете сделать originTbl.querySelector("thead");

Чтобы улучшить его, добавьте атрибут id к элементу thead и запросите идентификатор напрямую с помощью document.getElementById