Efecto de mouseover/hover lento en IE8

Question

He notado un funcionamiento extraño en IE8 cuando se usan eventos 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 clases en cada caso el rendimiento se cae en todas las versiones de IE, y Si utilizo la manipulación directa de la CSS a través de JavaScript IE6 y IE7 acelera mucho, pero IE8 todavía realiza pésimo.

¿Alguna idea? Realmente me gustaría saber qué es lo que hace que el evento mouseover funcione tan lento en comparación con todos los otros navegadores.

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

Ejemplo utilizando JQuery libración: http://thedungheap.net/research/

EDIT: ahora He actualizado el ejemplo de modo que es fácil ver la diferencia entre tener 10 filas y 200. Esto es en el mismo documento, por lo que este no puede ser un problema con todo el tamaño DOM, creo que

Answer 1

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

Answer 2

¿Has intentado ver qué sucede si solo tienes uno por fila? Curioso si es la cantidad 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 selector. No es realmente una respuesta, sino algo para probar.

No IE8 o lo probaría yo mismo.

Answer 3

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

Puede intentar mouseover/mouseout en lugar de alternar. También puedes probar la delegación de eventos, que a menudo ayuda con estos muchos elementos en el dominio.

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

Answer 4

Trate de usar burbujeo evento. Agregue el evento de desplazamiento a la tabla solamente 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 5

me he enfrentado a este problema y puesto en práctica 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 podría ser útil para usted.

Answer 6

El: hover ES muy lento en IE8, sin importar cómo intente implementarlo.De hecho, el código JavaScript onmouseover, onmouseout eventos proporciona métodos manera más rápida para crear un efecto de flotar, de CSS hace

ejemplo más rápido en Internet Explorer 8:

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

lento ejemplo:

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

Lo sentimos escribir en una respuesta este viejo pero creo que es relevante y esta página está bien alineado por Google así que ...

Wow, yo acabamos de pasar una gran cantidad de tiempo en esta problema, traté de usar Javascript, pero todavía era lento.

Esta es una solución si se utiliza fondo imágenes:

Este fue un verdadero problema para mí, porque el proyecto que tenía este problema en fue el efecto de la libración en Izquierda y Derecha botones/flechas que utilizo 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 pudiera decirlo y cuando el cursor ingresara en el área del botón desaparecería la imagen normal, la imagen de abajo sería visible por unos milisegundos y luego, el la imagen al pasar el tiempo se mostraría, fea.

La verdadera solución fue utilizar 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 las imágenes (normal/desplazado/seleccionado/inactivo/etc.), establecer la imagen como imagen de fondo y simplemente ajustar el valor de posición de fondo para el efecto de desplazamiento y otros.

Si quieres conocer mejor acerca de sprites CSS: http://css-tricks.com/css-sprites/