2012-03-10 13 views
9

Estoy tratando de mejorar la velocidad de carga de la página frontend para los usuarios, y estoy descubriendo que jQuery está desacelerando el evento DomContentLoaded en más de 100ms.¿jQuery ralentiza la representación de páginas web en 100 ms o más?

Estoy haciendo una evaluación comparativa en Windows 7 con Chrome 17 usando una computadora con una unidad i5 2.5Ghz, SSD, y 8GB de RAM. La prueba se ejecuta en mi computadora local. Me preocupa que la velocidad lenta que veo en mi máquina sea aún más lenta en computadoras y navegadores más antiguos.

¿Es esta la penalidad estándar para usar jQuery, o hay una forma de acelerar el rendimiento que me falta?

Aquí está el código que estoy usando:

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      console.time("DOMContentLoaded"); 
     </script> 
    </head> 
    <body> 
     <h1>Hello World</h1> 

     <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script> 

     <script type="text/javascript"> 
      document.addEventListener("DOMContentLoaded", ready, false); 

      function ready() { 
       console.timeEnd("DOMContentLoaded"); 
      } 
     </script> 
    </body> 
</html> 

En la consola, el tiempo que veo es aproximadamente ~ 100 ms.

Cuando elimino la línea que carga jQuery, el tiempo es aproximadamente ~ 1ms.

También probé el código anterior utilizando el CDN de Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

El resultado es básicamente el mismo.

¿Siempre hay una multa de 100ms por utilizar jQuery? ¿Hay algo que me falta? ¡Gracias!

+0

Trate de poner el código dentro del DOM listo con jQuery: '$ (listo);' – gdoron

+1

Hola gdoron - este retraso de 100ms parece ser suficiente simplemente cargando jQuery, sin ejecutar realmente otro javascript. Parece que solo ayudaría con javascript adicional. – Chris

+2

Este artículo reciente puede ser relevante para sus intereses: "[Deje de pagar el impuesto jQuery] (http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax)" por @ [ Sam Saffron] (http://stackoverflow.com/users/17174/sam-saffron) – Piskvor

Respuesta

-3

La ralentización que se ve es que el navegador debe descargar primero la biblioteca jQuery. Esta es la "penalización" que recibe cuando incluye cualquier javascript externo. No tiene nada que ver con jQuery.

Puede minimizar esto utilizando un gestor de scripts como require.js.

+0

Tiene algo que ver con jquery. Incluso si carga todo como un archivo local, hay tiempo de análisis para jquery, por mínimo que sea. – jdi

+0

Hola tonto - en las pruebas, estaba cargando jQuery localmente. También intenté cargarlo fuera de Google CDN y medir el tiempo en las cargas de página posteriores cuando la biblioteca ya estaba en la memoria caché. – Chris

4

Va a ver un pequeño golpe al cargar una gran biblioteca JS como jQuery. Personalmente, argumentaría que 100ms no es mucho, debe tener en cuenta TODOS los factores que conducen a esto:

  1. Usted está sincronizando la carga, lo que lleva tiempo.
  2. Su conexión de red juega un papel importante (hay un documento de análisis, solicitud, espera de respuesta). La latencia de su conexión debe tenerse en cuenta (use http://http://pingtest.net/ para probar su latencia, y reste eso de los 100ms + para tener una mejor idea del golpe real).
  3. El control de caché correcto en su servidor web puede eliminar casi n. ° 2, configurar ese servidor para que el archivo caduque una vez al mes aproximadamente. Este encabezado se pasará con el archivo para que el navegador del usuario solo lo cargue una vez al mes. Seguirá incurriendo en la pequeña solicitud en la primera carga de página, pero al menos las siguientes solicitudes de página la extraerán de la memoria caché local, reduciendo esta vez.
  4. Se analiza el tiempo de ejecución; El archivo JQuery COMPLETO necesita ser analizado y ejecutado. La reducción solo reduce el tamaño y, por lo tanto, el ancho de banda requerido para transferirlo (lo que equivale al tiempo según la velocidad de conexión) ... la minificación hace muy poco para reducir el tiempo de análisis (los modernos motores JS como V8 sobrevuelan los comentarios y los espacios en blanco como si no existieran) incluso allí).

Tenga en cuenta, que la mayoría de las páginas no tendrán casi la misma cantidad costumbre JS (basado en jQuery) como la propia biblioteca real, por lo que incluso una página interactiva intensamente verá solamente unos pocos [] docenas de milisegundos de otro u otros por encima de lo que la biblioteca ya ha impuesto.

En cuanto a las personas con máquinas/navegadores antiguos; es probable que experimenten un bajo rendimiento en cada página que visitan. La web es un lugar dinámico, debes mantenerte al día si quieres tener una buena experiencia. Hay mucho que puedes hacer por luddites.

+0

Hola Gregory: en los puntos 2 y 3, debería haber notado que estaba ejecutando la prueba localmente y usando un disco duro SSD, por lo que la latencia debería ser mínima. – Chris

+0

localmente desde un disco SSD sin duda se acerca bastante a la sobrecarga. Obtener resultados similares del CDN de Google, creo, demuestra bastante bien que, debido al análisis/ejecución, es probable que no se mejore ... Todavía me atengo a mi último párrafo :) –

+0

Supongo que el retraso se debe al análisis de jQuery. Es probable que quiera ver la carga de la página usando webpagetest.org, o HTTPWatch para ver este retraso en lugar de depender de javascript para resolverlo (lo que podría presentar otros problemas con la pequeña duración de la que estamos hablando) –

1

jQuery es un archivo 92K. Tienes que cargarlo y analizarlo.

He alojado su ejemplo en studio831.com/jquery_test/index.html, cdn.html y dom_ready.html.

Puede ver las veces que cada toma se descarga. También puede usar las herramientas de desarrollador de Chrome para ver el desglose de cuánto tardan las descargas.

+1

Todos estos funcionan exactamente igual para mí una vez que jquery ha sido almacenado en caché. Las recargas múltiples se realizan por igual en términos del tiempo que se gasta simplemente analizando jquery. – jdi

+0

sí, como se esperaba. –

Cuestiones relacionadas