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查询该ID

Javascript循环时间来克隆thead

1 个答案: