IE8에서 마우스 오버/마우스 오버 효과가 느리다

Question

많은 행 (이 예제에서는 100 개)이있는 테이블에서 mouseover 이벤트를 사용할 때 IE8에서 이상한 성능을 느꼈습니다. 나는 다양한 접근법을 시도했지만, 내가 원하는/원하는만큼 빨리 얻을 수있는 방법을 찾을 수없는 것 같습니다.

각 이벤트마다 클래스를 전환하면 모든 IE 버전에서 성능이 떨어지고 자바 스크립트를 통해 CSS를 직접 조작하면 IE6과 IE7의 속도가 향상되지만 IE8은 여전히 ​​비참합니다.

아이디어가 있으십니까? mouseover 이벤트가 다른 모든 브라우저와 비교하여 너무 느리게 수행되도록 만드는 것이 무엇인지 정말 알고 싶습니다.

이것이 IE6에서만 발생했다면 이해할 수 있었지만 통과 시켰습니다.하지만 브라우저의 최신 버전이 가장 느린 버전 일 때 나쁜 경험을 가진 사용자가 늘어날 것입니다.

예하여 JQuery와 호버 :

http://thedungheap.net/research/ EDIT : I 지금 이것은 동일한 문서에 10 개의 행과 (200)을 갖는 차이를 쉽게 볼 수 있도록 예를 갱신하므로 한이 불가능 전체 DOM 크기에 문제가있는 것 같습니다.

Answer 1

사용할 수있는 모든 브라우저에 대한 Btw : CSS를 사용하는 호버 셀러. IE6에서만 가장 빠른 솔루션을 추가 할 수 있습니다.

Answer 2

행당 하나만 있다면 어떻게 될지 알아 보셨습니까? DOM [또는 각 행에있는 요소의 수]가 성능에 영향을 줄 수 있는지 궁금합니다. 그렇지 않으면 ie8이 선택기 엔진에서 태그를 트래버스하는 방식에 문제가 될 수 있습니다. 답변이 아니라 시도 할 내용입니다.

IE8이 없거나 직접 사용해 보았습니다.

Answer 3

실제로 메트릭을 보지 않고도 충분히 빠릅니다.

전환하는 대신 mouseover/mouseout을 시도해 볼 수 있습니다. 이벤트 위임을 시도해 볼 수도 있습니다.이 이벤트 위임은 DOM의 많은 요소를 도와줍니다.

$("tr").mouseover(function() { 
      $(this).css('backgroundColor', '#ffc000'); 
     }) 
     .mouseout(function() { 
      $(this).css('backgroundColor', '#fff'); 
     }); 

Answer 4

이벤트 버블 링을 사용해보십시오. 호버 이벤트를 테이블에만 추가 한 다음 대상 요소를 확인하십시오.

$(function() { 
    $('table').hover(function(e) { 
     $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000'); 
    }, function(e) { 
     $(e.originalTarget.parentNode).css('backgroundColor', '#fff'); 
    }); 
}); 

Answer 5

나는이 문제를 직면하고 난이 당신을 위해 도움이 될 수있는 희망 다음 해결

var viewTable = jQuery("table.MyTable"); 
var temDiv = jQuery("<div class=\"HighlightClass\" style=\"display:none\"></div>").appendTo("body"); 
var highlightColor = temDiv.css("background-color"); 
viewTable.mouseover(function(eventObj){ 
    jQuery(eventObj.target).parents("tr:first").css("background-color", highlightColor); 
}).mouseout(function(eventObj){ 
    jQuery(eventObj.target).parents("tr:first").css("background-color",""); 
}); 

을 구현했습니다.

Answer 6

: 어떻게 구현 하든지 IE8에서 매우 느립니다.

<table> 
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'"> 
    <td>foo bar</td> 
</tr> 
</table> 

느린 예 :

<style type="text/css"> 
    tr.S1 {background-color:#000000} 
    tr.S2 {background-color:#FFFFFF} 
</style> 
<table> 
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'"> 
    <td>foo bar</td> 
</tr> 
</table> 

사실, 자바 스크립트 onMouseover와 이벤트 onmouseout는 CSS는 IE8에

가장 빠른 예를보다, 호버 효과를 만드는 방법 빠른 방법을 제공합니다

매우 느린 예 :JSFiddle

<style type="text/css"> 
    tr.S  {background-color:#000000} 
    tr.S:hover {background-color:#FFFFFF} 
</style> 
<table> 
<tr class="S"> 
    <td>foo bar</td> 
</tr> 
</table> 

Answer 7

...이 오래된하지만 난 그게 관련이 페이지는 물론 그래서 구글에 의해 순위 생각 대답에 게시 죄송 이

와우, 난 그냥이에 시간이 큰 금액을 지출

문제는 Javascript를 사용하려고했지만 여전히 느리다. 나는에이 문제를 가지고 프로젝트가 왼쪽 및 오른쪽 버튼/내가 사용하는 화살표에 마우스 오버 효과가 있었기 때문에

이것은 나를 위해 진짜 문제이었다 당신이 배경을 이미지를 사용하는 경우

이

는 솔루션입니다 탭을 왼쪽이나 오른쪽으로 움직이게하면 탭이 버튼 아래로 이동하고 탭 슬라이드 쇼가 표시되면 커서가 버튼 영역으로 들어갔을 때 일반 이미지가 사라지고 아래의 이미지가 몇 밀리 초 동안 보일 것입니다. 마우스를 가져 가면 결국 이미지가 표시됩니다.

진정한 해결책은 이미지 스프라이트를 사용하는 것이 었습니다. 그런 식으로 순수한 CSS에서는 절대적으로 지연이 없습니다. 아이디어는 모든 다른 이미지 상태 내부 (보통/마우스 오버/선택/비활성/등)가있는 단일 이미지를 가지고 이미지를 배경 이미지로 설정하고 호버 효과의 배경 위치 값을 조정하는 것입니다. 다른 사람.

당신이 CSS 스프라이트에 대해 더 알고 싶다면 : http://css-tricks.com/css-sprites/