javascript - una - ¿Dónde debo poner las etiquetas<script> en el marcado HTML?

llamar javascript desde html (20)

Cuando incrusta JavaScript en un documento HTML, ¿dónde está el lugar adecuado para colocar las etiquetas <script> e incluir JavaScript? Me parece recordar que no debes colocarlos en la sección <head> , pero colocar al principio de la sección <body> es malo, ya que el JavaScript tendrá que ser analizado antes de que la página esté completamente procesada ( o algo así). Esto parece dejar el final de la sección <body> como un lugar lógico para las etiquetas <script> .

Entonces, ¿dónde está el lugar correcto para colocar las etiquetas <script> ?

(Esta pregunta hace referencia a esta pregunta , en la que se sugirió que las llamadas a la función de JavaScript deberían moverse de las etiquetas <a> etiquetas <script> . Estoy utilizando específicamente jQuery, pero también son apropiadas las respuestas más generales).

Creo que depende de la ejecución de la página web. Si la página que desea mostrar no se puede mostrar correctamente sin cargar primero JavaScript, primero debe incluir el archivo JavaScript. Pero si puede mostrar / renderizar una página web sin descargar inicialmente el archivo JavaScript, debe colocar el código JavaScript en la parte inferior de la página. Debido a que emulará una carga de páginas rápida, y desde el punto de vista de un usuario parece que esa página se carga más rápido.

Depende, si está cargando un script que es necesario para estilizar su página / usar acciones en su página (como hacer clic en un botón), es mejor que lo coloque en la parte superior. Si su estilo es 100% CSS y tiene todas las opciones de respaldo para las acciones del botón, puede colocarlo en la parte inferior.

O lo mejor (si eso no es una preocupación) es que puede hacer un cuadro de carga modal, colocar su javascript en la parte inferior de su página y hacerlo desaparecer cuando se cargue la última línea de su script. De esta manera, puede evitar que los usuarios utilicen acciones en su página antes de que se carguen los scripts. Y también evitar el estilo inadecuado.

Dependiendo de la secuencia de comandos y su uso, lo mejor posible (en términos de carga de página y tiempo de representación) puede ser no usar un <script> -tag convencional, sino activar dinámicamente la carga de la secuencia de comandos de forma asíncrona.

Existen algunas técnicas diferentes, pero la más sencilla es usar document.createElement ("script") cuando se activa el evento window.onload. Luego, la secuencia de comandos se carga primero cuando la página se ha procesado, por lo que no afecta el tiempo que el usuario tiene que esperar a que aparezca la página.

Esto naturalmente requiere que el script en sí no sea necesario para la representación de la página.

Para obtener más información, consulte la publicación Acoplamiento de guiones asíncronos de Steve Souders (creador de YSlow pero ahora en Google).

El consejo estándar, promovido por el Yahoo! El equipo de rendimiento excepcional es colocar las etiquetas <script> al final del cuerpo del documento para que no bloqueen la representación de la página.

Pero hay algunos enfoques más nuevos que ofrecen un mejor rendimiento, como se describe en esta respuesta sobre el tiempo de carga del archivo JavaScript de Google Analytics:

Hay algunas grandes diapositivas de Steve Souders (experto en desempeño del lado del cliente) sobre:
Diferentes técnicas para cargar archivos JavaScript externos en paralelo.
Su efecto sobre el tiempo de carga y la representación de la página.
qué tipo de indicadores "en progreso" muestra el navegador (por ejemplo, ''cargando'' en la barra de estado, cursor del mouse de reloj de arena).

El script bloquea la carga de DOM hasta que se carga y ejecuta.

Si coloca scripts al final de <body> todo el DOM tiene la posibilidad de cargarse y renderizarse (la página se "mostrará" más rápido). <script> tendrá acceso a todos esos elementos DOM.

Por otra parte, al colocarlo después de que <body> start o superior, se ejecutará el script (donde todavía no hay elementos DOM).

Está incluyendo jQuery, lo que significa que puede colocarlo donde desee y usar .ready()

En primer lugar, imagine mi tabla y comprenda bien la explicación. Debe saber este color a qué se refiere.

Debe ponerlos en el extremo del cuerpo antes de cerrar la etiqueta (cuerpo). Esto le ayudará a ignorar cualquier error.

<body> <script></script> </body>

Pero puedes ponerlos antes de cerrar la etiqueta de la cabeza,

<head> <script></script> </head>

pero esto lleva a una experiencia de usuario muy mala ya que el navegador no hace nada útil mientras se descarga el archivo de script. pero lo que sucede Cuando el navegador encuentra la línea anterior en su marca, esto es lo que sucede.

Pausa el análisis del documento.
Haga una solicitud para recuperar el archivo.
Ejecute el script después de que haya sido descargado.
Reanudar el análisis del documento.

así que cuando encuentre algún error, este efecto en nuestro contenido, pero quiero poner mi script en la parte superior de mi marca y no sé si tengo error o no hacer esto, tengo dos atributos, creo que esto te ayudará Para descargar su marca, así no efecto con script

1. primer atributo

Asíncrono: cuando agregue el atributo asíncrono a su etiqueta de script, sucederá lo siguiente.

<script src="myfile1.js" async></script> <script src="myfile2.js" async></script>

Hacer solicitudes paralelas para recuperar los archivos.
Continúe analizando el documento como si nunca hubiera sido interrumpido.
Ejecute los scripts individuales en el momento en que se descarguen los archivos.

Lo mejor de este flujo es que los scripts se pueden descargar en paralelo mientras se analiza el documento. Pero hay una advertencia a esto y al tercer punto: el script se ejecutará en el momento en que se descarga. Esto puede ser un problema si un script es completamente autónomo. Sin embargo, en muchas situaciones, los scripts pueden depender de otros scripts para haber realizado alguna inicialización antes de que puedan ejecutarse. por ejemplo, los complementos de jquery requieren que la variable jquery ya exista en la página.

ATENCIÓN: los scripts que inserta en el DOM mediante programación son asíncronos de forma predeterminada, a menos que usted establezca explícitamente su atributo asíncrono en falso en el momento de la inserción.

Segundo atributo

Aplazamiento: Aplazar es muy similar a async con una diferencia importante. Esto es lo que sucede cuando un navegador encuentra una secuencia de comandos con el atributo de aplazamiento.

<script src="myfile1.js" defer></script> <script src="myfile2.js" defer></script>

Hacer solicitudes paralelas para recuperar los archivos individuales.
Continúe analizando el documento como si nunca hubiera sido interrumpido.
Termine de analizar el documento incluso si los archivos de script se han descargado.
Ejecute cada script en el orden en que se encontraron en el documento.

Como puede ver, el aplazamiento es más o menos lo que quiere hacer en sus archivos. Sin embargo, debido al soporte limitado del navegador, no es una opción viable en el momento de la escritura. ATENCIÓN: Los atributos asíncronos y diferidos se ignoran para los scripts que no tienen atributos src.

pero ¿cuándo debo usar qué? Por lo general, desea usar async cuando sea posible, luego aplace y luego sin atributo. Aquí hay algunas reglas generales a seguir:

Si el script es modular y no se basa en ningún script, entonces use
asíncrono.
Si la secuencia de comandos se basa en o se basa en otra secuencia de comandos, utilice la opción de aplazamiento.
Si la secuencia de comandos es pequeña y se basa en una secuencia de comandos asíncrona, utilice una secuencia de comandos en línea sin atributos colocados por encima de las secuencias de comandos asíncronas.

Esto es lo que sucede cuando un navegador carga un sitio web con una etiqueta <script> :

Obtener la página HTML (por ejemplo, index.html)
Comenzar a analizar el HTML
El analizador encuentra una etiqueta <script> referencia a un archivo de script externo.
El navegador solicita el archivo de script. Mientras tanto, el analizador bloquea y detiene el análisis del otro HTML en su página.
Después de un tiempo el script se descarga y se ejecuta posteriormente.
El analizador continúa analizando el resto del documento HTML.

El paso # 4 causa una mala experiencia de usuario. Su sitio web básicamente deja de cargar hasta que haya descargado todos los scripts. Si hay algo que los usuarios odian es esperar a que se cargue un sitio web.

¿Por qué sucede esto?

Cualquier script puede insertar su propio HTML a través de document.write() u otras manipulaciones de DOM. Esto implica que el analizador tiene que esperar hasta que la secuencia de comandos se haya descargado y ejecutado antes de poder analizar de forma segura el resto del documento. Después de todo, la secuencia de comandos podría haber insertado su propio HTML en el documento.

Sin embargo, la mayoría de los desarrolladores de JavaScript ya no manipulan el DOM mientras se carga el documento. En su lugar, esperan hasta que el documento se haya cargado antes de modificarlo. Por ejemplo:

 <html> <head> <title>My Page</title> <script type="text/javascript" src="my-script.js"></script> </head> <body> <div id="user-greeting">Welcome back, user</div> </body> </html>

Javascript:

// my-script.js document.addEventListener("DOMContentLoaded", function() { // this function runs when the DOM is ready, i.e. when the document has been parsed document.getElementById("user-greeting").textContent = "Welcome back, Bart"; });

Debido a que su navegador no sabe, my-script.js no modificará el documento hasta que se haya descargado y ejecutado, el analizador deja de analizar.

Recomendación anticuada

El antiguo enfoque para resolver este problema era colocar etiquetas <script> en la parte inferior de su <body> , porque esto garantiza que el analizador no se bloquee hasta el final.

Este enfoque tiene su propio problema: el navegador no puede comenzar a descargar los scripts hasta que se analiza todo el documento. Para sitios web más grandes con grandes scripts y hojas de estilo, poder descargar el script lo antes posible es muy importante para el rendimiento. Si su sitio web no se carga en 2 segundos, la gente irá a otro sitio web.

En una solución óptima, el navegador comenzará a descargar sus scripts lo antes posible, al mismo tiempo que analiza el resto de su documento.

El enfoque moderno.

Hoy en día, los navegadores admiten los atributos async y defer en los scripts. Estos atributos le indican al navegador que es seguro continuar analizando mientras se descargan los scripts.

asíncrono

<script type="text/javascript" src="path/to/script1.js" async></script> <script type="text/javascript" src="path/to/script2.js" async></script>

Los scripts con el atributo asíncrono se ejecutan de forma asíncrona. Esto significa que el script se ejecuta tan pronto como se descarga, sin bloquear el navegador mientras tanto.
Esto implica que es posible que el script 2 se descargue y ejecute antes del script 1.

Según http://caniuse.com/#feat=script-async , el 94.57% de todos los navegadores lo admiten.

aplazar

<script type="text/javascript" src="path/to/script1.js" defer></script> <script type="text/javascript" src="path/to/script2.js" defer></script>

Las secuencias de comandos con el atributo de aplazamiento se ejecutan en orden (es decir, la primera secuencia de comandos 1, luego la secuencia de comandos 2). Esto tampoco bloquea el navegador.

A diferencia de los scripts asíncronos, los scripts de aplazamiento solo se ejecutan después de que se haya cargado todo el documento.

Según http://caniuse.com/#feat=script-defer , el 94.59% de todos los navegadores lo admiten. El 94,92% lo apoya al menos parcialmente.

Una nota importante sobre la compatibilidad del navegador: en algunas circunstancias, IE <= 9 puede ejecutar scripts diferidos fuera de orden. Si necesita admitir esos navegadores, ¡lea this primero!

Conclusión

El estado actual de la técnica es poner scripts en la etiqueta <head> y usar los atributos async o defer . Esto permite que sus scripts se descarguen lo antes posible sin bloquear su navegador.

Lo bueno es que su sitio web todavía debería cargarse correctamente en el 6% de los navegadores que no admiten estos atributos al mismo tiempo que acelera el otro 94%.

Justo antes de la etiqueta de cierre del cuerpo, como se indica en

http://developer.yahoo.com/performance/rules.html#js_bottom

Poner scripts en la parte inferior
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 varios nombres de host, puede hacer que más de dos descargas se realicen en paralelo. Sin embargo, mientras se descarga un script, el navegador no iniciará ninguna otra descarga, incluso en nombres de host diferentes.

La inclusión de scripts al final se utiliza principalmente donde se muestran primero los contenidos / estilos del sitio web.

Incluyendo los scripts en la cabeza, los scripts se cargan pronto y se pueden usar antes de cargar todo el sitio web.

Si los scripts se ingresan por fin, la validación se realizará solo después de cargar los estilos y el diseño completos, lo que no es apreciado por los sitios web de respuesta rápida.

La respuesta convencional (y ampliamente aceptada) es "en la parte inferior", porque entonces todo el DOM se habrá cargado antes de que algo pueda comenzar a ejecutarse.

Hay disidentes, por diversas razones, que comienzan con la práctica disponible para comenzar intencionalmente la ejecución con un evento de carga de página.

Las etiquetas de script no bloqueantes se pueden colocar en cualquier lugar:

<script src="script.js" async></script> <script src="script.js" defer></script> <script src="script.js" async defer></script>

async script async se ejecutará de forma asíncrona tan pronto como esté disponible.
defer script de defer se ejecuta cuando el documento ha finalizado el análisis
async defer secuencia de comandos de async defer al comportamiento de aplazamiento si no se admite async

Dichos scripts se ejecutarán de forma asíncrona / después de que el documento esté listo, lo que significa que no puede hacer esto:

<script src="jquery.js" async></script> <script>jQuery(something);</script> 

O esto:

<script src="document.write(something).js" async></script> 

O esto:

<script src="jquery.js" async></script> <script src="jQuery(something).js" async></script> 

O esto:

<script src="document.getElementById(header).js" async></script> <div id="header"></div> 

Dicho esto, los scripts asíncronos ofrecen estas ventajas:

Descarga paralela de recursos :
El navegador puede descargar hojas de estilo, imágenes y otros scripts en paralelo sin esperar a que un script se descargue y ejecute.
Independencia del orden de la fuente :
Puede colocar los scripts dentro de la cabeza o el cuerpo sin preocuparse por el bloqueo (útil si está utilizando un CMS). La orden de ejecución todavía importa.

Es posible evitar los problemas de orden de ejecución mediante el uso de scripts externos que admiten devoluciones de llamada. Muchas API de JavaScript de terceros ahora admiten la ejecución sin bloqueo. Aquí hay un ejemplo de cómo cargar la API de Google Maps de forma asíncrona .

Puede colocar donde desee los scripts y uno no es mejor que otra práctica.

La situación es la siguiente:

La página se carga de forma lineal, "de arriba a abajo", por lo que si coloca la secuencia de comandos en la cabeza, se asegurará de que comience a cargarse antes de todo, ahora, si la coloca dentro del cuerpo mezclado con el código, la carga de la página puede ser antiestética.

Identificar buenas prácticas no depende de dónde.

Para apoyarte, mencionaré lo siguiente:

puedes colocar

y la página se cargará linealmente

La página se carga de forma asíncrona con otro contenido.

El contenido de la página se cargará antes y después de que se complete la carga, se cargan los scripts.

buena práctica aquí sería, ¿cuándo se implementará cada uno?

Espero haber sido de ayuda, cualquier cosa solo me responda este problema.

Puede colocar la mayoría de las referencias de <script> al final de <body> ,
Pero si hay componentes activos en su página que están usando scripts externos,
entonces su dependencia (archivos js) debe venir antes que eso (idealmente en la etiqueta de cabecera).

Si está utilizando JQuery, coloque el javascript donde mejor lo encuentre y use $(document).ready() para asegurarse de que las cosas se carguen correctamente antes de ejecutar cualquier función.

En una nota al margen: me gustan todas mis etiquetas de script en la sección <head> ya que parece ser el lugar más limpio.

Tiene más sentido para mí incluir el script después del HTML. Porque la mayoría de las veces necesito que se cargue el Dom antes de ejecutar mi script. Podría ponerlo en la etiqueta de la cabeza, pero no me gusta toda la sobrecarga del oyente de carga de documentos. Quiero que mi código sea corto, dulce y fácil de leer.

He escuchado que las versiones antiguas de safari estaban en quarky al agregar tu script fuera de la etiqueta de la cabeza, pero digo a quién le importa. No conozco a nadie usando esa vieja mierda, ¿verdad?

Buena pregunta por cierto.

el mejor lugar para escribir su código JavaScript al final del código del documento después de la etiqueta para cargar el documento y luego ejecutar el código js. y si escribes el código JQuery escribe

$(document).ready (function{ //your code here });

Al final del documento HTML

Para que no afecte la carga del documento HTML en el navegador en el momento de la ejecución.

~~XHTML no validará si la secuencia de comandos está en otro lugar que no sea dentro del elemento principal.~~ Resulta que puede estar en todas partes.

Puede aplazar la ejecución con algo como jQuery, por lo que no importa dónde se coloque (excepto por un pequeño golpe de rendimiento durante el análisis).

<script src="myjs.js"></script> </body>

La etiqueta de script debe usarse siempre antes del cierre del cuerpo o Parte inferior en el archivo HTML .

luego puede ver el contenido de la página antes de cargar el archivo js .

verifique esto si es necesario: http://stevesouders.com/hpws/rule-js-bottom.php

Si aún te importa mucho el soporte y el rendimiento en IE <10, lo mejor es SIEMPRE hacer que tus etiquetas de script sean las últimas etiquetas de tu cuerpo HTML. De esa manera, está seguro de que el resto del DOM se ha cargado y no se bloqueará ni procesará.
Si ya no te importa demasiado el IE <10, es posible que desees poner tus scripts en el encabezado de tu documento y usar la defer de defer para asegurarte de que solo se ejecutan después de que tu DOM se haya cargado ( <script type="text/javascript" src="path/to/script1.js" defer></script> ). Si aún quieres que tu código funcione en IE <10, ¡no olvides envolver tu código en una window.onload !