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 🙂
