210

Digamos que tengo un archivo JavaScript bastante pesado, empaquetado a aproximadamente 100kb más o menos. Por archivo quiero decir que es un archivo externo que se vincularía a través de <script src="...">, no se pegaría en el propio HTML.

¿Dónde está el mejor lugar para poner esto en el HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

¿Habrá alguna diferencia funcional entre cada una de las opciones?

javascript html optimization

— nickf
fuente

Posible duplicado de ¿Dónde debo poner las etiquetas <script> en el marcado HTML?

— Ivar

175

El Yahoo! El equipo de rendimiento excepcional recomienda colocar scripts en la parte inferior de la página debido a la forma en que los navegadores descargan componentes.

Por supuesto, el comentario de Levi "justo antes de que lo necesite y no antes" es realmente la respuesta correcta, es decir, "depende".

— Walter Rumsby
fuente

44

Por ejemplo, si va a hacer un montón de cosas de jQuery, necesitará cargar la biblioteca antes de intentar usarla.

— BryanH

58

Además, la razón por la que Yahoo EPT recomienda colocar JS en la parte inferior es porque el navegador debe entrar en modo de subproceso único mientras el JS se carga y luego se ejecuta. Si el script está en la cabeza o en medio del contenido, el navegador "hará una pausa" mientras trata con el JS. Al colocar el JS en la parte inferior, el contenido se cargará y, en general, será visible para que el usuario pueda comenzar a leerlo mientras el navegador aún se ocupa del JS.

— BryanH

1

Hola. ¿ $(function () {...})También ponemos código como este en la parte inferior de la página o tiene que estar dentro <head>?

— Thang Pham

77

Espero que la referencia de "parte inferior de su página" aquí no esté más allá </body>.

— Mr_Green

1

Los navegadores modernos también pueden leer el atributo "diferir". Puede establecer defer = "defer" en las etiquetas de script que no están en la parte inferior del <body>, y cuando el navegador las vea, primero terminará de cargar el resto del html y luego volverá a interpretar el contenido de la etiqueta del script Esto es útil si está utilizando algún tipo de marco en el que no tiene el control total de la página. Profundice en este artículo y tenga en cuenta que es un documento vivo, por lo que parte de la información está desactualizada: stackoverflow.com/questions/5250412/…

— LinuxDisciple

75

El mejor lugar para ello es justo antes de que lo necesite y no antes.

Además, dependiendo de la ubicación física de sus usuarios, el uso de un servicio como el servicio S3 de Amazon puede ayudar a los usuarios a descargarlo desde un servidor físicamente más cercano a ellos que su servidor.

¿Es su script js una biblioteca de uso común como jQuery o prototipo? Si es así, hay varias compañías, como Google y Yahoo, que tienen herramientas para proporcionarle estos archivos en una red distribuida.

— Levi Rosol
fuente

60

Como regla general, el mejor lugar para colocar <script>etiquetas es la parte inferior de la página, justo antes de la </body>etiqueta. Algo como esto:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

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

¿Por qué?

El problema causado por los scripts es que bloquean las descargas paralelas. La especificación HTTP / 1.1 sugiere que los navegadores descarguen no más de dos componentes en paralelo por nombre de host. Si publica sus imágenes desde múltiples nombres de host, puede obtener más de dos descargas en paralelo. Sin embargo, mientras se descarga un script, el navegador no iniciará ninguna otra descarga, incluso en diferentes nombres de host. Más...

CSS

Un poco fuera de tema, pero ... Pon las hojas de estilo en la parte superior.

Mientras investigábamos el rendimiento en Yahoo !, descubrimos que mover hojas de estilo al documento HEAD hace que las páginas parezcan cargarse más rápido. Esto se debe a que poner hojas de estilo en HEAD permite que la página se renderice progresivamente. Más...

Otras lecturas

Yahoo ha lanzado una guía realmente genial que enumera las mejores prácticas para acelerar un sitio web. Definitivamente vale la pena leerlo: https://developer.yahoo.com/performance/rules.html

— martynas
fuente

1

"El problema causado por los scripts es que bloquean las descargas paralelas". - Eso ya no es cierto: w3.org/TR/html5/scripting-1.html#attr-script-async

— Quentin

4

Con 100k de Javascript, nunca debes ponerlo dentro del archivo. Use un archivo Javascript de script externo. No hay ninguna posibilidad de que solo use esta cantidad de código en una sola página HTML. Probablemente esté preguntando dónde debe cargar el archivo Javascript, para esto ya ha recibido respuestas satisfactorias.

¡Pero me gustaría señalar que, comúnmente, los navegadores modernos aceptan archivos Javascript gzip ped! Simplemente gzip el x.jsarchivo x.js.gzy apúntelo en el srcatributo. No funciona en el sistema de archivos local, necesita un servidor web para que funcione. Pero los ahorros en bytes transferidos pueden ser enormes.

Lo probé con éxito en Firefox 3, MSIE 7, Opera 9 y Google Chrome. Aparentemente no funciona de esta manera en Safari 3.

Para obtener más información, consulte esta publicación de blog y otra página muy antigua que, sin embargo, es útil porque señala que el servidor web puede detectar si un navegador puede aceptar Javascript comprimido o no. Si el lado del servidor puede elegir dinámicamente enviar el texto comprimido o el texto sin formato, puede hacer que la página sea utilizable en todos los navegadores web.

— bart
fuente

8

Has entendido mal la pregunta del OP. Estaba preguntando en qué parte del HTML colocar la etiqueta del script. Él ya estaba usando un archivo externo, sin incluir el guión. Es cierto que esto era menos claro antes de su edición de la pregunta en abril '09. Quizás eliminar esta respuesta?

— Mark Amery

@Leandro Supongo que es porque la gente no siempre tiene en mente la pregunta real, pero todavía considera útiles respuestas como esta. Sin embargo, esta respuesta es útil pero no necesariamente relevante. Podría funcionar mejor si la información sobre herramientas de votación contiene una redacción más explícita, por ejemplo, 'Esta respuesta es útil y relevante'.

— WynandB

1

En Javascript comprimido: puede configurar su servidor web para comprimirlo también ... (o usar algo como el módulo / opción gzip_static de nginx) (y el gunzip para otros clientes) Eso debería al menos enviar el encabezado de tipo de contenido correcto, con codificación marcada como gzip, lo que probablemente resulte en una mejor compatibilidad con el navegador

— Gert van den Berg

4

Poner el javascript en la parte superior parecería más ordenado, pero funcionalmente, es mejor buscar el HTML. De esa manera, su javascript no se ejecutará e intentará hacer referencia a elementos HTML antes de que se carguen. Este tipo de problema a menudo solo se vuelve aparente cuando carga la página a través de una conexión a Internet real, especialmente lenta.

También puede intentar cargar dinámicamente el javascript agregando un elemento de encabezado de otro código javascript, aunque eso solo tiene sentido si no está usando todo el código todo el tiempo.

— Matthias Wandel
fuente

3

Con cuzillion puede probar el efecto en la carga de la página de diferentes ubicaciones de etiquetas de script utilizando diferentes métodos: en línea, externo, "etiquetas HTML", "document.write", "elemento JS DOM", "iframe" y "XHR eval" . Vea la ayuda para una explicación de las diferencias. También puede probar hojas de estilo, imágenes e iframes.

— Sam Hasler
fuente

1

La respuesta depende de cómo esté utilizando los objetos de javascript. Como ya se señaló, cargar los archivos javascript en el pie de página en lugar del encabezado ciertamente mejora el rendimiento, pero se debe tener cuidado de que los objetos que se utilizan se inicialicen más tarde de lo que se cargan al pie de página. Una forma más es cargar los archivos 'js' ubicados en la carpeta que estarán disponibles para todos los archivos.

— GustyWind
fuente

0

Como otros han dicho, lo más probable es que vaya en un archivo externo. Prefiero incluir dichos archivos al final de <head />. Este método es más amigable con los humanos que con las máquinas, pero de esa manera siempre sé dónde está el JS. Simplemente no es tan legible incluir archivos de script en ningún otro lugar (en mi humilde opinión).

Si realmente necesita exprimir hasta el último ms, probablemente debería hacer lo que Yahoo dice.

— Enloquecido
fuente

0

Los scripts deben incluirse al final de la etiqueta del cuerpo porque de esta manera el navegador analizará el HTML y lo mostrará antes de que se carguen los scripts.

— José Salgado
fuente

0

La respuesta a la pregunta depende. Hay 2 escenarios en esta situación y deberá elegir según su escenario apropiado.

Escenario 1: secuencia de comandos crítica / secuencia de comandos necesaria

En caso de que la secuencia de comandos que está utilizando es importante cargar la página web, se recomienda para ser colocado en la parte superior de su documento HTML es decir, <head>. Algunos ejemplos incluyen: código de aplicación, bootstrap, fuentes, etc.

Escenario 2 - Menos importantes / scripts analíticos

También se utilizan scripts que no afectan la vista del sitio web. Se recomienda cargar dichos scripts después de cargar todos los segmentos importantes. Y la respuesta a eso será la parte inferior del documento, es decir, la parte inferior de <body>la etiqueta anterior. Algunos ejemplos incluyen: Google analytics, hotjar, etc.

Bono - asíncrono / aplazar

También puede decirle a los navegadores que la carga del script se puede hacer simultáneamente con otros y se puede cargar según la elección del navegador utilizando un argumento de aplazamiento / asíncrono en el código del script.

p.ej. <script async src="script.js"></script>

— Praveen Thirumurugan
fuente

-1

Sus enlaces javascript pueden estar en la cabeza o al final de la etiqueta del cuerpo, es cierto que el rendimiento mejora al colocar el enlace al final de la etiqueta del cuerpo, pero a menos que el rendimiento sea un problema, colocarlos en la cabeza es mejor para que la gente lea y usted sepa dónde están ubicados los enlaces y pueda consultarlos más fácilmente.

— Timothy Trousdale
fuente

-1

Yo diría que depende de hecho qué planeas lograr con el código Javascript:

si planeaba insertar sus scripts JS externos, entonces el mejor lugar está en la cabecera de la página
si planeas usar páginas en teléfonos inteligentes, luego al final de la página, justo antes de la etiqueta.
pero, si planeaba hacer una combinación de HTML y JS (tabla HTML poblada y creada dinámicamente, por ejemplo), entonces debe colocarla donde la necesite allí.

— Ludus H
fuente

¿Qué dije que mereciera menos? Geez

— Ludus H

¿Qué tiene que ver ser externo con poner el guión en la cabeza? ¿Por qué la parte inferior de la página es un buen lugar para colocar scripts específicamente para teléfonos inteligentes? Su afirmación sobre la generación dinámica de HTML a partir de JS es verdadera solo si está utilizando document.write, lo que probablemente no debería ser.

— Quentin

¿"Presumiste" lo que pensaba y debido a que mi respuesta fue negativa? Probablemente pienses que tu presunción es mejor que mi explicación, ¿verdad? Solo planeé hacer una breve explicación, si alguien no puede entender, entonces pedirá más información. En mi comentario sugerí poner JS en el final de la página para teléfonos y tabletas más pequeños, justo antes del final del cuerpo porque la carga de toda la página es más rápida ya que el navegador no necesita cambiar al modo de "subproceso único", el contenido de la página comenzará a aparecer en la pantalla ... pero probablemente lo sepas.

— Ludus H

¿Dónde colocar JavaScript en un archivo HTML?

¿Por qué?

CSS

Otras lecturas