javascript - 使用 Javascript 设置高度很慢

Question

我有两个 html 表格，其中包含所有类型的元素(跨度、输入、选择等)，我想强制这些表格的行具有相同的高度。不幸的是，在 tr 或 td 上设置“高度”属性不起作用(如果至少包含一个超过给定高度的元素，则该行更高)。

我还没有找到如何使用 css 强制行高的方法，所以我编写了一个循环所有行的 Javascript 函数，检查左表行的高度和相应行的高度正确的表格，如果它们不同，我将高度(更改样式)设置为最大值。

它可以工作...但是如果表格有很多行，它会非常非常慢!我认为这是因为每次更改样式都会导致重排。

有什么提示吗？请注意，我无法合并这两个表。

这里我的代码被剪掉了，但也许我需要一种完全不同的方法......

var rightTableRows = mainTable.children("tbody").children("tr:parent");
var leftTableRows = colHeader.children("tbody").children("tr:parent");

for (chr=0;chr < leftTableRows .length;chr++) {
    var rowLeft = leftTableRows [chr];
    var heightleft = rowLeft.offsetHeight;
    var rowRight = rightTableRows[chr];
    var heightright = rowRight.offsetHeight;
    if(heightleft != heightright){
            console.log("left: "+heightleft +" - right: "+heightright);
        if(heightleft>heightright){
           rowRight.setAttribute("style","height:"+heightleft+"px");
        }else{
           rowLeft.setAttribute("style","height:"+heightright+"px");
        }
    }

}

Answer 1

您正在反复读取然后写入 DOM。这被认为是性能的一大禁忌。正确的方法是先进行所有的“读取”，然后再进行所有的“写入”——否则您将强制在其间进行回流/计算。实际上，使用两个循环会更好，一个循环找到正确的高度，然后第二个循环应用它们:

var rightTableRows = mainTable.children("tbody").children("tr:parent");
var leftTableRows = colHeader.children("tbody").children("tr:parent");
var length = leftTableRows.length;
var heights = [];

for (var chr = 0; chr < length; chr++) {
    var rowLeft = leftTableRows[chr];
    var heightleft = rowLeft.offsetHeight;
    var rowRight = rightTableRows[chr];
    var heightright = rowRight.offsetHeight;

    if (heightleft > heightright) {
        heights.push({
            elem: rowRight,
            height: heightleft
        });
    } else {
        heights.push({
            elem: rowLeft,
            height: heightright
        });
    }
}

for (var i = 0; i < heights.length; i++) {
    heights[i].elem.style.height = heights[i].height + 'px';
}

现在元素及其新高度作为对象存储在数组中，然后您只需遍历数组即可。在第一个循环之后，您再也不会从 DOM 中读取数据了。其他优化包括删除不需要的 if() 语句、缓存 HTML 节点列表的长度，以及专门编写 style.height 而不是 setAttribute()(较慢)。