javascript - Firefox 中具有可调整大小列的 JQuery UI 表性能问题

Question

Demo

我正在处理一个表格，其列可以通过拖动任何标题元素的右侧来调整大小。此外，该表包含在一个grid类中，该类既可拖动又可调整大小。

如演示所示，这些功能的实际功能运行得很好。然而，在 Firefox 中，调整列大小和垂直调整网格大小会导致显着的性能滞后。事实上，即使 IE 在调整列大小方面也有更好的性能，尽管它在网格垂直调整大小方面仍然存在滞后。剩下的就是 Chrome，它不存在任何性能问题。

我该怎么做才能使这些调整大小操作在所有浏览器中响应并可扩展以适应更大的行数(例如，150 而不是 fiddle 中的 50)？

我怀疑问题在于每个 header 的alsoResize 选项:

$('#header-D').resizable(
    {
        handles: "e",
        minWidth: 20,
        alsoResize: "td:nth-child(5)"
    }
);

我认为第n个子选择器应该替换为$("td").eq(5)，尽管我找不到如何使其与JSON合作符号。或者也许有一种方法可以调整一个 td 的大小，从而自动调整下面所有相应 td 的大小，但我不确定在这个特定实例中这是否可行，因为我被迫在单元格上使用 display:inline-block 以使表格格式能够与滚动条和调整大小功能配合使用。

Answer 1

您在调整大小时遇到​​延迟，因为您正在执行一大块代码，每次调整网格大小时都会修改 DOM。

修改 DOM 是一项昂贵的操作，应谨慎使用。每次修改 DOM 时，浏览器都必须重新绘制页面以反射(reflect)您的更改。浏览器处理重新绘制页面的能力肯定存在差异。

坦白说，Chrome 能够处理所有 DOM 修改而没有明显的延迟，这给我留下了深刻的印象。 resize 处理函数中有很多 DOM 修改代码。

要解决此问题，您应该仅在用户完成重新调整元素大小后修改 DOM。您可以使用 setTimeout 和一对额外的宽度和高度变量来完成此操作。如果 setTimeout 外部的宽度和高度变量与 setTimeout 内部检索到的值匹配，那么您就知道用户已停止调整网格大小，您可以安全地修改 DOM .

<强> Working JSFiddle

上述 JSFiddle 的显着变化是:

resize 函数处理程序:

        var rGridNewWidth = parseInt($('.grid').css("width"));
        var rGridNewHeight = parseInt($('.grid').css("height"));

        setTimeout(function() {    

            var gridNewWidth = parseInt($('.grid').css("width"));
            var gridNewHeight = parseInt($('.grid').css("height"));

            if (rGridNewWidth == gridNewWidth && rGridNewHeight == gridNewHeight) {

                $('.grid .container').css("height", gridFeedManagerContainerHeight +     (gridNewHeight-gridInitialHeight));
                    $('.grid .grid-table-container').css("width", gridTableWidth + (gridNewWidth-gridInitialWidth));
                    $('.grid .grid-table-container').css("height", gridTableHeight + (gridNewHeight-gridInitialHeight));

                $(".grid-snap-outer").css("width", parseInt($(".grid").css("width")));
                $(".grid-snap-outer").css("height", parseInt($(".grid").css("height")));

                $(".button-ok").css("width",gridTableWidth + (gridNewWidth-gridInitialWidth));
                $('.grid .grid-table-header-container').css("width", gridTableHeaderWidth + (gridNewWidth-gridInitialWidth));

                $(".corner-right").css("left", cornerOffset + (gridNewWidth-gridInitialWidth));
            }

        }, 150);

将网格溢出设置为隐藏:

overflow:hidden;

在我的示例中，我将 setTimeout 的延迟设置为 150 毫秒。这意味着如果用户停止调整网格大小 150 毫秒，则网格将调整大小。