referenciar - llamar javascript desde html
Dónde colocar JavaScript en un archivo HTML? (12)
Digamos que tengo un archivo JavaScript bastante pesado, empaquetado a aproximadamente 100 kb aproximadamente. Por archivo quiero decir que es un archivo externo que se vincularía en <script src="..."> , y no se pegará 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?
Aparte de cosas muy pequeñas (como llamadas de una sola declaración dentro de un evento onclick ), tiendo a evitar poner Javascript dentro de las páginas HTML a menos que sea absolutamente seguro que nunca pueda ser usado por otra página.
Casi todo mi Javascript, por lo tanto, se almacena en archivos JS que se cargan desde el HTML así:
<script src="my_javascript.js"></script>
También hace la separación del código / limpiador de marcado para mí.
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 para los humanos que la máquina amigable, pero de esa forma siempre sé dónde está el JS. Simplemente no es tan legible incluir archivos de script en ningún otro lugar (imho).
Realmente necesitas exprimir hasta el último momento, entonces probablemente deberías hacer lo que dice Yahoo.
Como regla general, el mejor lugar para colocar las etiquetas <script> es la parte inferior de la página, justo antes de la etiqueta </body> . 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 no descarguen más de dos componentes en paralelo por nombre de host. Si sirve sus imágenes desde múltiples nombres de host, puede obtener más de dos descargas en paralelo. Sin embargo, mientras se descarga una secuencia de comandos, el navegador no iniciará ninguna otra descarga, incluso en diferentes nombres de host. More...
CSS
Un poco fuera de tema, pero ... Coloque hojas de estilo en la parte superior.
Mientras investigaba 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 es porque poner hojas de estilo en HEAD permite que la página se represente progresivamente. More...
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 leer: More...
Con 100k de Javascript, nunca debes ponerlo dentro del archivo. Use un script de JavaScript externo. No hay ninguna posibilidad en el infierno de que solo uses esta cantidad de código en una sola página HTML. Es probable que 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 de gzip ped. Simplemente gzip el archivo x.js a x.js.gz , y apunte a eso en el atributo src . No funciona en el sistema de archivos local, necesita un servidor web para que funcione. Pero los ahorros en los 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 con gzip o no. Si su lado del servidor puede elegir dinámicamente enviar el gzip o el texto sin formato, puede hacer que la página se pueda utilizar en todos los navegadores web.
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 necesites y no antes" es realmente la respuesta correcta, es decir, "depende".
El mejor lugar para hacerlo es justo antes de que lo necesite y tan pronto como sea posible.
Además, dependiendo de la ubicación física de los usuarios, el uso de un servicio como el servicio S3 de Amazon puede ayudar a los usuarios a descargarlo de 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í, hay varias empresas, como Google y Yahoo, que tienen herramientas para proporcionar estos archivos en una red distribuida.
La respuesta depende de cómo uses los objetos de javascript. Como ya se señaló cargando 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 carguen en el pie de página. Una forma más es cargar los archivos ''js'' colocados en una carpeta que estará disponible para todos los archivos.
Poner el javascript en la parte superior parecería más ordenado, pero funcionalmente, es mejor ir tras el HTML. De esta forma, su javascript no se ejecutará e intentará hacer referencia a los 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 una lenta.
También podría intentar cargar dinámicamente el javascript agregando un elemento de encabezado desde otro código JavaScript, aunque eso solo tiene sentido si no está usando todo el código todo el tiempo.
Siempre lo puse en la parte inferior de mi página como la respuesta de Walter Rumsby, pero el JavaScript externo va en la cabeza. Ahora con CSS no sé, siempre uso CSS externo para que pueda abarcar todo mi sitio web.
Sus enlaces javascript pueden obtenerse en la cabecera o al final de la etiqueta corporal, es cierto que el rendimiento mejora colocando el enlace al final de su etiqueta corporal, pero a menos que el rendimiento sea un problema, colocarlos en la cabeza es más agradable para que la gente lea y sepa dónde están ubicados los enlaces y pueda hacer referencia a ellos más fácilmente.
Usando cuzillion puedes probar el efecto en la carga de la página de diferentes ubicaciones de etiquetas de script usando diferentes métodos: en línea, externo, "etiquetas HTML", "document.write", "JS DOM element", "iframe" y "XHR eval" . Vea la help para una explicación de las diferencias. También puede probar hojas de estilo, imágenes e iframes.
Yo diría que depende de hecho lo que planees lograr con el código Javascript:
- Si planea insertar sus guiones JS externos, entonces el mejor lugar está en el encabezado de la página
- si planeó usar páginas en teléfonos inteligentes, al final de la página, justo antes de la etiqueta.
- pero, si planeaba combinar HTML y JS (tabla HTML creada y poblada dinámicamente, por ejemplo), debe colocarla allí donde la necesite.