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
fuente
Respuestas:
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".
fuente
$(function () {...})También ponemos código como este en la parte inferior de la página o tiene que estar dentro<head>?</body>.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.
fuente
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:¿Por qué?
CSS
Un poco fuera de tema, pero ... Pon las hojas de estilo en la parte superior.
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
fuente
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.jsarchivox.js.gzy apúntelo en elsrcatributo. 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.
fuente
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.
fuente
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.
fuente
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.
fuente
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.
fuente
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.
fuente
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>fuente
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.
fuente
Yo diría que depende de hecho qué planeas lograr con el código Javascript:
fuente
document.write, lo que probablemente no debería ser.