隐藏/显示嵌套表格时 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()) 来分析代码中的不同点并查看问题出在哪里。

如果你能在你的 fiddle 中重现延迟，这将帮助人们帮助你 :)