Tengo un sitio web, que es lento. El servidor responde en alrededor de 2 a 300 ms con cada solicitud, pero la página tarda de 1,5 a 2 segundos en estar lista en el navegador.

Al experimentar con la desactivación de JavaScript y CSS, he determinado que es el procesamiento del navegador, lo que lleva la mayor parte del tiempo.

Usando Firebug, veo que el evento DOMContentLoaded parece activarse después de aproximadamente 0.5 a 1 segundo después de que se reciben los datos del servidor, y el evento "cargar" se dispara después de otro medio segundo.

Usando el generador de perfiles de Firebug, veo que la ejecución de JavaScript toma alrededor de 250 ms.

Entonces, mis preguntas son:

  • ¿Qué hace el navegador en el tiempo restante, cuando la ejecución de Javascript tarda 250 ms, pero tarda un segundo antes de que la página esté lista?
  • Qué sucede entre DOMContentLoaded y los eventos de carga
  • ¿Cuál sería el mejor enfoque para optimizar el rendimiento del lado del cliente de dicha página?
3
driis 30 nov. 2009 a las 11:54

4 respuestas

La mejor respuesta

No solo se carga, sino que la representación de la página lleva tiempo.

Hay muchas cosas que puede hacer para optimizar el rendimiento, puede usar herramientas como YSlow y PageSpeed para analizar más la página y determinar qué vale la pena hacer.

También eche un vistazo a las reglas Steve Souders que se describen en su libro Sitios web de alto rendimiento:

  1. Hacer menos solicitudes HTTP
  2. Use una red de entrega de contenido
  3. Agregar un encabezado de caducidad
  4. Componentes Gzip
  5. Poner hojas de estilo en la parte superior
  6. Poner guiones en la parte inferior
  7. Evitar expresiones CSS
  8. Hacer JavaScript y CSS externas
  9. Reducir las búsquedas de DNS
  10. Minify JavaScript
  11. Evitar redireccionamientos
  12. Eliminar secuencias de comandos duplicadas
  13. Configurar ETags
  14. Hacer AJAX en caché

También hay un libro de seguimiento llamado Sitios web incluso más rápidos. También encontrará muchos de los consejos en los libros publicados en su blog.

Otro recurso útil es las Mejores prácticas para acelerar su sitio web de Yahoo.

3
stpe 30 nov. 2009 a las 09:07

Agregando a las respuestas anteriores, no incluya todos los archivos Javascript en el encabezado en sí ... Esto solo retrasará la carga del DOM. Divida los archivos antes de incluirlos e inclúyalos cerca del elemento respectivo en el cuerpo sobre el que va a actuar.

Por supuesto, podría incluir la versión reducida de las bibliotecas JS en el encabezado.

El uso de métodos de cierre para el alcance de variables en javascript ... y también el uso de un número mínimo de variables globales importa para inc en preformance.

Y use google's closure compiler o algo similar para minificar sus js.

0
Boopathi Rajaa 17 jun. 2011 a las 12:07

Esta es una pregunta muy amplia. Hay libros completos que abordan el rendimiento de representación del lado del cliente. Pero en general,

  • desea realizar la menor cantidad posible de solicitudes http. combine todos los javascript en un archivo, todos los css en uno y la mayor cantidad de imágenes posible en uno (consulte spriteme)
  • desea que estas solicitudes sean lo más pequeñas posible. Minify y gzip sus scripts. agregar un encabezado de contenido caducado establecido en una fecha futura para contenido estático
  • hay CDN públicos, como los de google, que le permiten vincular scripts comunes, como la biblioteca jQuery, a los servidores de google. Esto significa que muchos visitantes ya tendrán estos archivos en caché
  • La ejecución de JavaScript suele ser un gran cuello de botella. desea diferir la mayor cantidad de carga de script posible. su css siempre debe incluirse en su encabezado, pero una gran parte de su javascript se puede incluir en la parte inferior de la página. en estos casos, la página se mostrará rápidamente, aunque habrá un retraso antes de que DOMReady se active

En cuanto a la demora entre DOMReady y los eventos de carga de página, aquí es donde se cargan las imágenes (y posiblemente los videos), y posiblemente se está ejecutando javascrpit.

Echa un vistazo al complemento YSlow para Firebug.

0
David Hedlund 30 nov. 2009 a las 09:03

Para mejorar el rendimiento, puede intentar usar un minimizador de código Javascript (consulte, por ejemplo, aquí: http://geekswithblogs.net/lbugnion/archive/2007/02/23/107120.aspx), aunque útil, de todos modos, no creo que esto mejore notablemente la velocidad.

0
Konamiman 30 nov. 2009 a las 08:59