性能：大表鼠标悬停效果

Question

HTML

<table>
    <tr data-parent="0" data-id="1">
        <td></td>
    </tr>
    <tr data-parent="1" data-id="2">
        <td></td>
    </tr>
    <tr data-parent="1" data-id="3">
        <td></td>
    </tr>
    <tr data-parent="3" data-id="4">
        <td></td>
    </tr>
</table>

其中data-parent 指向另一行的data-id。

JQUERY/JS

$("tr[data-parent='" + id + "']").css("background-color", "#1ba1e2").each(function () {
    $("tr[data-parent='" + $(this).attr("data-id") + "']").css("background-color", "#75F7FF").each(function () {
        $("tr[data-parent='" + $(this).attr("data-id") + "']").css("background-color", "#98E8E3").each(function () {
            $("tr[data-parent='" + $(this).attr("data-id") + "']").css("background-color", "#B6DCE8")
    });});});

（我知道我也可以写一个递归函数，现在不是重点）

当有人将鼠标悬停在 TR 上时，我希望该行是一种颜色，所有以悬停行为父行的行，另一种颜色，孙子另一种颜色等（深几级）。

现在，对于 100 行，这不是问题，但我的数据包含大约 30 000 行，这就是它开始出错的地方，几秒钟的冻结错误。

如何优化这段代码？

为了您和我的方便：一个 jsFiddle！ http://jsfiddle.net/dawdg4sj/

Answer 1

首先，单个表中有 30'000 行是一个可用性问题；一些浏览器甚至无法很好地处理这样的怪物。想办法缩小尺寸。

现在有一些解决方案。

您可以使用id 代替data-id。浏览器为具有 ID 的元素保留一个有效的查找表。在 jQuery 中，您可以使用 $('#'+id) 查找非常快的 DOM 节点（无需扫描整个树，如果您有 30K 行，这将是巨大的）。

如果您不能这样做，则将引用保存在 JavaScript 对象中，您可以在其中通过简单的键查找获取父/子，即lookup[parentId] 应返回带有此parentId 的 TR 节点。这意味着解析表一次或根本不使用data 属性。

另一种方法是使用 jQuery 的 data() 函数，它允许您将任意值附加到 DOM 节点。这样，您可以在 DOM 节点中查找相关节点并保留引用，而不是每次都搜索整个文档。

最后，层数和每层的节点数对性能有很大的影响。您的算法是 O(N1*N2*N3*N4*...*NM) （其中 M 是级别数）。因此，如果您有 N2=5、N2=3、N3=4，那么您已经必须处理 5*3*4*... 节点。无论您如何查找，在一个巨大的文档中更改 1000 个节点都是昂贵的。