IE 11 中的 jquery addClass 和 removeClass 很慢

Question

我正在创建一个应用程序来监控集群上的节点，这是视觉状态的一个示例。网格中的每个小框代表一个节点，当前，当悬停在一个节点上时，相应机架（网格）中的其余部分会淡出。

这是通过 photobucket 提供的链接，因为我的声誉极低，无法插入图片： visual state

在 Chrome 和 Firefox 中，悬停进出单个节点会立即淡入/淡出机架中的其余节点，但在 IE 11 中会有明显的延迟。我知道 IE 的 javascript 引擎比 Chrome 和 Firefox 慢，但我把它扔出去看看 SO 社区是否可以挑选我的代码并提出更好的方法，因为我不是最伟大的前端程序员。谢谢，这是我的代码的 sn-ps：

来自django模板（每个节点都有id="matrix-box-<node #>"）：

    <tr>
    <td id="visual-state"><b>visual state</b></td>
    <td id="matrix" colspan=5>
        {% for row in v.22 %}
            {% if v.23 == "ca" %}
                {% if forloop.counter0|divisibleby:4 %}
                    <div id="rack-{% widthratio forloop.counter0 4 1 %}-{{ k }}" title="rack-{% widthratio forloop.counter0 4 1 %}">
                {% endif %}
            {% elif v.23 ==  "cs" %}
                {% if forloop.counter0|divisibleby:8 %}
                    <div id="rack-{% widthratio forloop.counter0 8 1 %}-{{ k }}" title="rack-{% widthratio forloop.counter0 8 1 %}">
                {% endif %}
            {% endif %}
            <div class="row">
            {% for elem in row %}
                {% if elem.1 == "#49E20E" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #00DC00;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "#0000CD" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #0000CD;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "yellow" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: yellow;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "#E3170D" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #E31702;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "brown" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #6E3737;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "orange" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background:#DC7800;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "black" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: black;" title="{{ elem.0 }}"></div>
                {% elif elem.1 == "#cccccf" %}
                    <div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #CCCCCF;border: 1px solid #CCCCCF"></div>
                {% endif %}
            {% endfor %}
            </div>

       ... other code

来自css代码：

    .node {
        width: 4px;
        height: 4px;
        float: left;
        border: 1px solid #B0B0B0;
        background: #cccccf;
        margin: 0 !important;
        cursor: pointer;
        filter: alpha(opacity=100);
        opacity: 1;
        }

    .faded .node-faded {
        width: 4px;
        height: 4px;
        filter: alpha(opacity=50);
        opacity: .5;
     }

    .active {
        width: 4px;
        height: 4px;
        float: left;
        border: 1px solid black;
        background: #cccccf;
        margin: 0 !important;
       cursor: pointer;
       filter: alpha(opacity=100);
       opacity: 1;
     }

来自js代码：

    var node = null;
    var node_id = null;
    var rack = null;
    var nodes = null;

    $(document).ready(function(){
        $('[id^=matrix-box]').on({
            mouseenter: function(){
                node = $(this);
                rack = node.parent().parent();
                rack.addClass('faded');
                node.removeClass('node-faded').addClass('active');
            },
            mouseleave: function(){
                node.removeClass('active').addClass('node-faded');
                rack.removeClass('faded');
            },
            click: function(e){

            ...other code

此外，任何建设性的批评（尽管有帮助而不是恶意）总是受欢迎的。再次感谢！

Answer 1

由于您没有提供测试的可能性，因此这是一种猜谜游戏。你要做的是：

$('[id^=matrix-box]').on({ mouseenter: function(){});

这会在每个元素上添加一个新的事件侦听器，其 id 以matrix-box 开头。不是最糟糕的想法，但如果你有很多这些项目，它可能会很慢。

这是验证这一点的演示：http://jsfiddle.net/k3mjmdzp/3/

克服性能问题的一个好主意是使用delegated event listener。

尝试像这样重写你的代码：

$(function () {
    $('#matrix').on('mouseenter mouseleave click', '[id^=matrix-box]', function (event) {
        console.log(event);
    });
});

这里有演示：http://jsfiddle.net/k3mjmdzp/2/

这将使您的代码在$('#matrix') 上只有事件侦听器，而不是在每个子节点上。如果您稍后通过 ajax 添加新项目，这也很好。

您可以在 chrome 开发者工具中的 event Listeners 选项卡上检查事件侦听器。