2009-10-28 35 views
62

Estaba usando el plugin "Yslow" para Mozilla Firefox, y me dijo que debería poner JavaScript en la parte inferior. He escuchado esto antes, pero realmente no lo he pensado demasiado. ¿Existe realmente una ventaja al colocar JavaScript en la parte inferior de una página web en comparación con la parte superior?JavaScript en la parte inferior/superior de la página web?

+2

Puede ir directamente a la fuente en este ... http: //developer.yahoo.com/performance/rules.html es la explicación de Yahoo de esta práctica. –

+0

¿Qué tal si el Javascript está en un archivo separado? Prefiero esta forma, simplemente porque es más fácil de depurar/leer. ¿Es esto cargar más rápido/más lento? –

+1

¿Estas reglas de rendimiento de Yahoo todavía están actualizadas? Tengo que imaginarme que alguien ha publicado un conjunto de reglas similarmente completo (o posiblemente Yahoo haya publicado una actualización) que tenga en cuenta los cambios que se han producido en los últimos cuatro años. – kralco626

Respuesta

47

Permitirá que la página web se cargue visiblemente antes de ejecutar JavaScript, lo que tiene sentido para cosas como Google Analytics, que no es necesario que suceda antes de que la página se cargue.

Es posible que también desee buscar elementos como jQuery, prototipo, etc. y adjuntarlo al controlador "listo", que ejecuta el código JavaScript después de que DOM se haya cargado por completo, que es un lugar apropiado para muchos códigos JavaScript.

+0

¿Esto significa que JavaScript que normalmente está dentro de las etiquetas puede estar en cualquier lugar de la página después de la etiqueta ? – user

+1

Sí, la etiqueta

2

Sí, la página cargará el contenido y lo renderizará antes de cargar y ejecutar javascript, y la página, como resultado, se cargará más rápido.

42

Suponiendo que no está ejecutando en un CDN o no está prestando servicio a su JS desde un subdominio o servidor independiente, se cargará de forma síncrona y forzará su contenido HTML a esperar hasta que haya descargado los archivos. Al colocar el JS en la parte inferior de la página antes de la etiqueta de cierre </body>, está permitiendo que el HTML se analice antes de cargar el javascript. Esto da el efecto de tiempos de carga de página más rápidos.

4

Si tiene contenido html estático y una gran cantidad de javascript, puede hacer una diferencia en el tiempo de carga de la página percibida, ya que el html se cargará primero y le dará al usuario algo para mirar. Si no tienes mucho javascript, o el contenido de la página existente depende de que el javascript sea útil, entonces esto no es tan útil prácticamente hablando.

4

Quiero traer la actualización a este tema, Google ha introducido recientemente async recortado http://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080&rd=1 que se puede agregar para que su sitio traiga, p. soporte de estadísticas de google. Se debe colocar en la parte inferior de la sección <head> para obtener el mejor rendimiento. El punto es que esto aumenta probablemente la capucha de la baliza de seguimiento que se enviará antes de que el usuario abandone la página.

También debe estar ubicado allí si desea verificar su sitio en las herramientas de google webmaster utilizando su Google Analytics.

Aparte de eso, las mismas reglas todavía se aplican básicamente - javascript en la parte inferior para la carga "rápida" de la página. Utilicé comillas porque no cuento la página completamente cargada hasta que javascript termine ;-)

0

Permite que todos los elementos DOM se carguen completamente antes de cargar el Javascript que los aborda. Este estándar también es parte de Visual Studio.

0

Colocar los scripts en la parte inferior del elemento mejora la velocidad de visualización, porque la compilación de scripts ralentiza la visualización.

Cuestiones relacionadas