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

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 中呈现。一旦删除它，表格扩展就可以立即点击。