Efekt przesunięcia myszy w zwolnionym tempie na IE8

Question

Zauważyłem dziwną cechę wydajności w IE8 podczas używania zdarzeń mouseover na stole z wieloma wierszami (100 w tym przykładzie). Próbowałem wielu różnych podejść, ale nie mogę znaleźć sposobu, aby uzyskać tak szybko, jak lubię/potrzebuję.

Jeśli przełączam klasy na każde wydarzenie, wydajność spada we wszystkich wersjach IE, a jeśli użyję bezpośredniej manipulacji CSS przez javascript IE6 i IE7 przyspieszają, ale IE8 wciąż działa kiepsko.

Wszelkie pomysły? Naprawdę chciałbym wiedzieć, co sprawia, że ​​odtwarzanie kursora myszy jest tak powolne w porównaniu do wszystkich innych przeglądarek.

Jeśli zdarzyło się to tylko w IE6, mogłem to zrozumieć i przekazać, ale kiedy najnowsza wersja przeglądarki jest najwolniejsza, będzie tylko coraz więcej użytkowników ze złym doświadczeniem.

przykład przy użyciu jQuery aktywowania: http://thedungheap.net/research/

EDIT: Mam zaktualizowany przykład tak, że jest łatwo zobaczyć różnice pomiędzy 10 wierszy i 200. Jest to tym samym dokumencie, więc to nie może być problemem z całym rozmiarem DOM, domyślam się, że

Answer 1

Btw dla wszystkich przeglądarek możesz użyć: hover selector using css only. I tylko dla IE6 możesz dodać swój najszybszy soluton.

Answer 2

Czy próbowałeś sprawdzić, co się stanie, jeśli masz tylko jeden w jednym rzędzie? Ciekawe, czy liczba elementów w DOM [lub w każdym rzędzie] może wpłynąć na wydajność. W przeciwnym razie może to być problem związany ze sposobem, np. Tagów traverse w silniku selektora. Naprawdę nie jest to odpowiedź, ale coś do spróbowania.

Bez IE8 lub sam bym go wypróbował.

Answer 3

Wydaje się, że jestem wystarczająco szybki, nie patrząc na dane.

Możesz spróbować myszy/myszy, zamiast przełączać. Możesz także wypróbować delegowanie wydarzeń, co często pomaga w przypadku wielu elementów w domenie.

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

Answer 4

Spróbuj użyć bąbelkowania zdarzeń. Dodaj zdarzenie najedź kursorem tylko do tabeli, a następnie spójrz na element docelowy.

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

Answer 5

Mam w obliczu tego problemu i wdrożone następujące obejścia

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",""); 
}); 

Mam nadzieję, że to może być przydatne dla Ciebie.

Answer 6

Zawieszenie: ISO jest bardzo wolne w IE8, bez względu na to, jak zamierza się go zrealizować.W rzeczywistości, javascript onmouseover, onmouseout zdarzeń zapewnia sposób szybszych metod tworząc efekt najechania, niż CSS robi

Najszybsza przykład na IE8:

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

Wolniej przykład:

<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> 

BARDZO powolny przykład: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

Niestety odpowiedzieć na odpowiedź to stary, ale myślę, że to jest istotne i ta strona jest dobrze wg google więc ...

Wow, po prostu spędził dużo czasu na to problem, starałem się używać JavaScript, ale wciąż było wolne.

Jest to rozwiązanie, jeśli używasz tle obrazów:

To był prawdziwy problem dla mnie, ponieważ projekt miałem ten problem na było efektem unosić się na prawo i lewo przyciskami/strzały, które używam aby animować tabulatory w lewo i prawo, zakładki byłyby pod przyciskami, pokaz slajdów w zakładce, jeśli mogę powiedzieć, a kiedy kursor wszedł w obszar przycisku, normalne zdjęcie zniknęło, obraz poniżej byłby widoczny przez kilka milliseków, a następnie obraz na końcu wyświetli się, brzydko.

Prawdziwym rozwiązaniem było użycie duszków obrazowych, dzięki czemu nie ma absolutnie żadnego opóźnienia nawet w czystym css. Chodzi o to, aby mieć pojedynczy obraz z różnymi obrazami stanów wewnętrznych (normalny/hover/selected/inactive/etc), ustawiasz obraz jako obraz tła, a Ty po prostu dostosowujesz wartość położenia tła dla efektu efektu i inni.

Jeśli chcesz wiedzieć, lepiej o sprite'ów CSS: http://css-tricks.com/css-sprites/