Javascript For循环克隆thead的时间

Question

我试图创建一个固定的thead从另一个表克隆thead。要创建与原始宽度相同的所有td，我循环每个td并复制宽度。我希望获得最佳性能，因为该表可能有很多行（> 10000）。我认为循环花费的时间取决于原始表中的行;例如，100行需要10ms才能循环9列，15000行需要350ms ...为什么???我只迭代原始表的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