puede - llamar javascript desde html
¿Debo escribir un script en el cuerpo o en el encabezado del html? (5)
Esta pregunta ya tiene una respuesta aquí:
- Dónde colocar JavaScript en un archivo HTML? 12 respuestas
He visto las dos formas, ambos trabajos de implementación solo las estructuras son un poco diferentes. En tu experiencia, ¿qué funciona mejor y por qué?
Cabeza, o antes del cierre de la etiqueta corporal. Cuando DOM carga JS se ejecuta, eso es exactamente lo que hace jQuery document.ready.
El problema de escribir guiones al principio de una página es bloqueante. El navegador debe detener el procesamiento de la página hasta que la secuencia de comandos se descargue, analice y ejecute. La razón para esto es bastante clara, estos scripts pueden insertar más en la página cambiando el resultado del renderizado, también pueden eliminar cosas que no necesitan ser renderizadas, etc.
Algunos de los navegadores más modernos violan esta regla al no bloquear la descarga de los scripts (ie8 fue el primero) pero en general la descarga no es la mayor parte del tiempo dedicado al bloqueo.
Echa un vistazo a Incluso sitios web más rápidos , acabo de leerlo y repasa todas las formas rápidas de incluir scripts en una página, incluido el uso de scripts en la parte inferior de la página para permitir que se complete el procesamiento (mejor UX).
Siempre pongo mis scripts en el encabezado. Mis razones:
- Me gusta separar el código y el texto (estático)
- Normalmente cargo mi script desde fuentes externas
- El mismo script se usa desde varias páginas, por lo que se siente como un archivo de inclusión (que también va en el encabezado)
W3Schools tiene un buen artículo sobre este tema .
Scripts en <head>
Los scripts que se ejecutarán cuando se invoquen o cuando se active un evento se colocarán en funciones.
Coloque sus funciones en la sección principal, de esta forma, todas están en un solo lugar y no interfieren con el contenido de la página.
Scripts en <body>
Si no desea que su script se coloque dentro de una función, o si su script debe escribir el contenido de la página, debe colocarse en la sección del cuerpo.
Yo respondería esto con múltiples opciones en realidad, algunas de las cuales se renderizan en el cuerpo.
- Coloque la secuencia de comandos de la biblioteca, como la biblioteca jQuery en la sección principal.
- Coloque la secuencia de comandos normal en la cabeza a menos que se convierta en un problema de carga de rendimiento / página.
- Coloque el script asociado con includes, dentro y al final de eso include. Un ejemplo de esto son los controles de usuario de .ascx en páginas de asp.net: coloque el script al final de ese marcado.
- Coloque la secuencia de comandos que afecte el procesamiento de la página al final del cuerpo (antes del cierre del cuerpo).
- NO coloque el script en el marcado como
<input onclick="myfunction()"/>
- mejor para ponerlo en los manejadores de eventos en el cuerpo del script en su lugar. - Si no puede decidir, póngalo en la cabeza hasta que tenga una razón para no hacerlo, como problemas de bloqueo de página.
Nota al pie: "Cuando lo necesite y no antes" se aplica al último elemento cuando se bloquea la página (velocidad de carga perceptual): la percepción del usuario ES su realidad, si se percibe que se carga más rápido, se carga más rápido (aunque las cosas aún estar ocurriendo en el código).
EDITAR: referencias:
- discusión asp.net: http://west-wind.com/weblog/posts/154797.aspx y aquí: http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
- Documentación preparada para el documento jQuery: http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia%29
- las otras respuestas sobre esta pregunta también presentan información válida.
- use www.google.com y www.bing.com para buscar información relacionada (hay muchas referencias)
Nota al margen: si coloca bloques de script dentro del marcado, puede afectar el diseño en ciertos navegadores al ocupar espacio (es decir, 7 y se sabe que la operación 9.2 tiene este problema) así que colóquelos en un div oculto (use una clase css como: .hide { display: none; visibility: hidden; }
en el div)
Estándares: Tenga en cuenta que las normas permiten la ubicación de los bloques de scripts prácticamente en cualquier lugar si eso está en cuestión: http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html y http://www.w3.org/TR/xhtml11/xhtml11_dtd.html
EDIT2: Tenga en cuenta que siempre que sea posible (¿siempre?), Debe colocar el Javascript real en archivos externos y hacer referencia a los mismos; esto no cambia la validez de la secuencia pertinente.