Javascript For循环克隆thead的时间
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript For循环克隆thead的时间相关的知识,希望对你有一定的参考价值。
我试图创建一个固定的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');
答案
why?
因为当你做var originTbl = document.querySelector("div.origin table.mytable");
它需要追踪所有儿童元素到最深的孩子。这就解释了为什么你可以做originTbl.querySelector("thead");
要改进它,请将id属性添加到thead元素,并使用document.getElementById直接查询id
以上是关于Javascript For循环克隆thead的时间的主要内容,如果未能解决你的问题,请参考以下文章