javascript - jquery 中的显示/隐藏速度很快。但渲染引擎太慢

Question

在隐藏/显示 dom 结构中的所有“tr.content”元素时遇到性能问题，如下所示:

    <tbody class="collapsible"> 
        <tr class="handler">
            <td>Collapsible Handler</td>
        </tr>
        <tr class="content">
            <td>Collapsible Content</td>
        </tr>
    </tbody>

    <tbody class="collapsible">...</tbody>

    <tbody class="collapsible">...</tbody>

    <tbody class="collapsible">...</tbody>

    ....

</table>

难怪。因为这个 dom 树中有时有 400 个 tbody 元素。

尝试了很多方法并研究了http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance但 javascript 本身相当快。看起来渲染引擎(无论是基于 webkit 的浏览器还是 Firefox)似乎需要一些时间 => 浏览器卡住:(

我可以在不卡住浏览器的情况下以某种方式完成此操作吗(我不介意是否需要一些时间，只要浏览器不崩溃)？

遗憾的是，改变 dom 结构是没有选择的(即我们也在使用表排序器)。

Answer 1

您是否尝试过使用 css 规则并仅向父级添加一条规则？ (这应该是最有效的，如果浏览器卡住了，那么我认为你就没有选择了..)

.hideChildren .collapsible tr{display:none;}

并将 hideChildren 类附加到所有 tbody 的单个祖先(例如 body 标记) > 节点。