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的时间的主要内容,如果未能解决你的问题,请参考以下文章

vue ,v-for循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决

javascript 深度克隆Vue对象数据

javascript 对象克隆

OpenCL – 执行动态 for 循环

JavaScript克隆对象和数组

JavaScript的流程控制之for循环语句和while循环语句