jQuery addClass 및 IE 11에서 느린 removeClass

Question

클러스터에서 노드를 모니터링하는 앱을 만들고 있는데 이는 시각적 상태의 예입니다. 그리드의 각 작은 상자는 노드를 나타내며 현재 하나의 노드 위로 마우스를 가져 가면 나머지는 해당 랙 (그리드) 페이드 아웃으로 나타납니다. 단일 노드에서 밖으로 유혹, visual state

크롬과 파이어 폭스에서 즉시/fadein의 나머지 부분에서 것이다 : 여기

때문에 내 최소한의 명성 나는 이미지를 삽입 할 수 없기 때문에 포토 버킷을 통해 링크입니다 랙에있는 노드가 있지만 IE 11에서는 눈에 띄는 지연이 있습니다. 나는 IE의 자바 스크립트 엔진이 Chrome과 Firefox보다 느리다는 것을 알고 있지만, SO 커뮤니티가 제 코드를 따로 따로 모아서 가장 훌륭한 프런트 엔드 프로그래머가 아니기 때문에 이것을 수행하는 더 좋은 방법을 제안 할 수 있는지 알아보기 위해이 코드를 던지고 있습니다. 장고 템플릿에서

(각 노드가 id="matrix-box-<node #>"있다) : 당신을 감사하는 것은 내 코드의 조각입니다

.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 코드에서 :

CSS 코드에서

<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 

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(){}); 

이 matrix-box로 시작하는 ID로 각 요소에 새 이벤트 리스너를 추가 : 당신이 할 것은 다음과 같다. 최악의 생각은 아니지만 이러한 항목이 많으면 느려질 수 있습니다. http://jsfiddle.net/k3mjmdzp/3/

성능 문제를 극복하는 좋은 아이디어가 delegated event listener를 사용하는 것입니다 : 여기

이를 검증하는 데모입니다.

시도는 다음과 같이 코드를 재 작성 : http://jsfiddle.net/k3mjmdzp/2/

이 $('#matrix')에서가 아니라 각 자식 노드에만 이벤트 리스너를 갖는 코드를 떠날 것이다 :

여기

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

당신이 데모를 . 나중에 아약스를 통해 새 항목을 추가하는 경우에도 유용합니다.

크롬 개발자 도구의 event Listeners 탭에서 이벤트 리스너를 확인할 수 있습니다.