¿Dónde colocar JavaScript en un archivo HTML?
Digamos que tengo un archivo JavaScript bastante pesado, empaquetado en aproximadamente 100 kb. Por archivo me refiero a que es un archivo externo que se vincularía a través de <script src="...">, no se pegaría en el HTML.
¿Cuál es el mejor lugar para poner esto en 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?
El Yahoo! El equipo de Rendimiento excepcional recomienda colocar scripts en la parte inferior de su página debido a la forma en que los navegadores descargan componentes.
Por supuesto, el comentario de Levi "justo antes de que lo necesites y no antes" es realmente la respuesta correcta, es decir, "depende".
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.
¿Su script js es una biblioteca de uso común como jQuery o prototipo? Si es así, existen varias empresas, como Google y Yahoo, que tienen herramientas para proporcionarle estos archivos en una red distribuida.
Como regla general, el mejor lugar para colocar <script>etiquetas es la parte inferior de la página, justo antes de </body>la 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 que provocan los scripts es que bloquean las descargas paralelas. La especificación HTTP/1.1 sugiere que los navegadores no descarguen más de dos componentes en paralelo por nombre de host. Si sirve sus imágenes desde varios nombres de host, puede realizar más de dos descargas en paralelo. Sin embargo, mientras se descarga un script, el navegador no iniciará ninguna otra descarga, incluso en nombres de host diferentes. Más...
CSS
Un poco fuera de tema, pero... Coloque 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 parezca que las páginas se cargan más rápido. Esto se debe a que colocar hojas de estilo en HEAD permite que la página se represente progresivamente. Más...
Otras lecturas
Yahoo ha publicado una guía realmente interesante que enumera las mejores prácticas para acelerar un sitio web. Definitivamente vale la pena leerlo: https://developer.yahoo.com/performance/rules.html
Con 100k de Javascript, nunca debes ponerlo dentro del archivo. Utilice un archivo Javascript de script externo. No hay ninguna posibilidad de que solo uses esta cantidad de código en una sola página HTML. Probablemente te estés preguntando dónde debes cargar el archivo Javascript, para esto ya has recibido respuestas satisfactorias.
¡Pero me gustaría señalar que, por lo general, los navegadores modernos aceptan archivos gzip ped Javascript! Simplemente comprima 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 el ahorro en bytes transferidos puede ser enorme.
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 con gzip o no. Si el lado de su servidor puede elegir dinámicamente enviar el texto comprimido o sin formato, puede hacer que la página sea utilizable en todos los navegadores web.
