La semana pasada uno de nuestros clientes nos puso un problema sobre la mesa que nos ha traÃdo de cabeza unos dÃas. El problema en cuestión era que diversas páginas de su web, que eran pesadas (incluso podemos decir que muy pesadas ya que algunas tenÃan 4 megas de HTML, pero otras 8, 13 y hasta 15), tenÃan un problema de rendimiento bastante grave.
Poniendo en contexto, una vez cargadas esas páginas, es decir, no teniendo en cuenta el tiempo que necesita el navegador para descargar la página ni el tiempo para renderizarla al completo, con su javascript, cuando navegamos por la página, Internet Explorer (7 y 8, con la 6 no tanto) empieza a cargar la máquina, subiendo el uso de CPU hasta el 100% durante varios segundos y haciendo imposible la navegación, hasta tal punto que no sólo afectaba al scroll sino que incluso cuando desplazamos el cursor por la página el simple hecho de ponernos encima de un enlace, llegaban a pasar segundos hasta que el cursor cambiaba desde la tradicional flecha al cursor:pointer caracterÃstico en cada sistema operativo y navegador.
Por no hablar del tiempo de respuesta ante los scripts o cualquier evento. Inviable.
Detallar todo el proceso que seguimos nos darÃa para varios posts y varias páginas, pero bueno, habiendo descartando completamente que el problema fuese javascript o el framework que se usaba (en este caso jQuery), el problema parecÃa estar en el tamaño de página porque cuando se reducÃa su tamaño los problemas desaparecÃan y también en la hoja de estilos, porque al comentar algunas de las hojas, el efecto se atenuaba e incluso llegaba a desaparecer.
La primera impresión fue que es posible que al ser la página tan grande y tener muchos elementos que flotaban, alternando con elementos de bloque es posible que el navegador necesitase todo ese procesado, pero comprobamos como ese no era el problema (evidentemente, algo de se notó puesto que efectivamente el navegador tenÃa que pensar algo menos), pero no era la causa ya que la mejora no era aceptable.
Finalmente, probando más cosas surgió la idea de comentar todos los hover (también se probó con los float y otros atributos) y cuál fue nuestra sorpresa cuando el efecto desapareció. Centramos toda nuestra atención, esto no lo habÃamos visto nunca.
Sólo habÃa una cosa rara, en unas pocas lÃneas (4 ó 6) tenÃamos unas propiedades css similares a estas (no es el caso real, pero sà similar):
.listados .visual {color:#777;}
.listados .visual:hover {color:#000;}
Para un HTML como este:
<div class="listados">
<p><a href="#" class="visual">Texto</a></p>
<p><a href="#">Texto</a></p>
<p><a href="#">Texto</a></p>
<p><a href="#" class="visual">Texto</a></p>
</div>
Es decir, resumiendo, las propiedades css hacen que los enlaces con class visual se pongan de color negro cuando el ratón se pone por encima.
Esto supone un gran problema para Internet Explorer. Pese a que la propiedad hover está puesta para un enlace, no poner explÃcitamente en los estilos que es para un enlace (tag <a>) provoca que esté constantemente recalculando y «pensando», y aquà la raÃz de todo el problema.
Es decir, las lÃneas css deben ser:
.listados .visual {color:#777;}
.listados a.visual:hover {color:#000;}
Lo más correcto serÃa incluir también el a en la primera lÃnea, para tener más coherencia, aunque no es necesario y no cambia la solución del problema.
Pero bueno, la guerra contra el IE ha terminado… y hemos ganado 🙂