javascript - Mouseover/hover efecto lento en IE8

jquery performance

Question

He notado algo extraño en el rendimiento en IE8 al usar eventos de mouseover en una tabla con muchas filas (100 en este ejemplo). He intentado muchos enfoques diferentes, pero parece que no puedo encontrar la manera de obtenerlo tan rápido como me gusta o necesito.

Si cambio de clase en cada evento, el rendimiento disminuye en todas las versiones de IE, y si utilizo la manipulación directa de CSS a través de JavaScript, IE6 e IE7 se aceleran mucho, pero IE8 todavía tiene un desempeño miserable.

Algunas ideas ? Realmente me gustaría saber qué es lo que hace que el evento de mouseover tenga un rendimiento tan lento en comparación con todos los demás navegadores.

Si esto solo le sucediera a IE6, podría entenderlo y dejarlo pasar, pero cuando la versión más reciente del navegador es la más lenta, solo habrá más y más usuarios con una mala experiencia.

Ejemplo utilizando JQuery Hover: http://thedungheap.net/research/

EDITAR: Ahora he actualizado el ejemplo para que sea fácil ver la diferencia entre tener 10 filas y 200. Esto está en el mismo documento, por lo que esto no puede ser un problema con todo el tamaño del DOM, supongo

Answer 1

¿Ha intentado ver qué sucede si solo tiene uno por fila? Es curioso si el número de elementos en el DOM [o en cada fila] podría afectar el rendimiento. De lo contrario, podría ser un problema con la forma en que ie8 atraviesa las etiquetas en el motor de selección. No es realmente una respuesta, sino algo para probar.

No IE8 o lo intentaría yo mismo.

Answer 2

El hover es muy lento en IE8, no importa cómo intente implementarlo. De hecho, el javascript onmouseover, onmouseout events proporciona métodos mucho más rápidos para crear un efecto de desplazamiento, que CSS.

El ejemplo más rápido en IE8:

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

Ejemplo más lento:

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

MUY lento ejemplo: 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 3

Me he enfrentado a este problema y he implementado la siguiente solución

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

Espero que esto te sea de utilidad.

Answer 4

Me parece lo suficientemente rápido, sin mirar realmente las métricas.

Puedes probar con el mouseover / mouseout en lugar de alternar. También puede probar la delegación de eventos, que a menudo ayuda con esta cantidad de elementos en el dominio.

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

Answer 5

Por cierto, para todos los navegadores puede utilizar: selector de desplazamiento con solo css. Y solo para IE6 puedes agregar tu solución más rápida.

Answer 6

Trate de usar el evento de burbujeo. Agregue el evento flotante solo a la tabla y luego observe el elemento de destino.

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

Answer 7

Lamento publicar en una respuesta tan antigua, pero creo que es relevante y esta página está bien clasificada por Google, así que ...

Wow, acabo de pasar una gran cantidad de tiempo en este problema, traté de usar Javascript, pero seguía siendo lento.

Esta es una solución si usas imágenes de fondo:

Esto fue un problema real para mí, porque el proyecto en el que tuve este problema fue el efecto de desplazamiento en los botones / flechas Izquierda y Derecha que uso para animar las pestañas a la izquierda y a la derecha, las pestañas irían debajo de los botones, una presentación de diapositivas si puede decir y cuando el cursor haya entrado en el área del botón, la imagen normal desaparecería, la imagen de abajo sería visible durante unos pocos milisegundos y, luego, la imagen flotante se mostraría fea.

La solución real fue usar sprites de imagen, de esa manera no hay absolutamente ningún retraso incluso en css puro. La idea es tener una sola imagen con todos los diferentes estados de interior de imágenes (normal / desplazar / seleccionado / inactivo / etc), configurar la imagen como imagen de fondo y simplemente ajustar el valor de la posición de fondo para el efecto activable y otros.

Si quieres saber más acerca de sprites css: http://css-tricks.com/css-sprites/