Question

现在在我的html页面上，动态生成大约15个不同的表，每个表中有大约1-15行。当用户单击某个单元格时，嵌套表格会显示在下方的行中。一切看起来都很好，它完成了它需要做的事情，只是从用户点击单元格打开嵌套表到嵌套表实际显示的时间有大约2秒的延迟。

我能做些什么来减少时间？或者任何缓解这个的提示？

光明的例子。在实际应用程序中，会有更多的表/行。这个例子没有延迟，因为它纯粹是为了展示我如何设置 http://jsfiddle.net/poppypoop/ZUTXT/1/

我的HTML

<table>
<tr>
    <td></td>
    <td class="clickme">
        <div style="display: none;">
            <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
         </div>
    </td>
    <td></td>
</tr>

在这个嵌套表中，我在我的应用程序的每个单元格中显示各种信息。通常，嵌套表可以包含1行到10行之间的任何位置

因此，当用户单击单元格以显示嵌套表时，这里是名为

的javascript

$(item).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(item).next().html() + "</td></tr>");

注意我正在使用IE10和IE9

Answer 1

在我看来，你正在获取按钮后面的div的html内容，然后在最近的tr节点之后插入它。

dom必须将html作为字符串提供给你，然后解析你给它的字符串。如果你只想显示和隐藏行，为什么不在它们上面设置.hide（）或.show（）？这样就没有dom操作实际上相当昂贵，因为浏览器必须重新计算所有内容，因为你的新增内容会改变其他任何内容。 CSS更改通常更快。

如果您从其他地方获取HTML，您可能希望将其视为瓶颈。尝试使用console.log((new Date()).getTime())之类的内容来分析代码中的不同点，并查看问题所在。

如果您可以重新创建小提琴中的延迟，这将有助于人们帮助您：）

Answer 2

事实证明，有一条线迫使它在IE7中渲染。删除后，表格扩展即刻点击。

隐藏/显示嵌套表时，Javascript性能会受到影响

2 个答案: