Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Donde colocar el codigo javascript y los enlace a js externos?

preguntó
Web
1875 Vistas
3 Respuestas
solucionada

Pues resulta que siempre he oído(y me me han enseñado en donde estudiaba desarrollo web DAW) que los enlaces js en una página HTML han de ser incluidos en el HEAD de la pagina y el código js que se quiera poner a pelo en un documento HTML también. Pero resulta que desde hace un tiempo atrás he leído en varios sitios que por convención y buena practica se suele poner en el BODY abajo del todo pero dentro de esta etiqueta(es decir antes del < / body >).

Uno de los tantos sitios que lo dice:
http://www.anieto2k.com/2009/06/30/baja-tus-scripts-al-final-del-fichero/

Sigo como siempre o no hago caso omiso?

Un saludo!

por pabeni (1.090 puntos) en Web
editado por

3 Respuestas

3votos

white Puntos75880

Depende del codigo de tus ficheros y de tu página web.

normalmente hay que esperar a que este listo el dom ( si tu codigo fuera para este fin ), dependiendo de tu codigo js, para eso se usa por ejemplo:

$(document).ready();

muchos lo hacen de esta manera para manipular el dom insertando el tag en <head>

El documento se procesa y para cuando encuentra un tag <script>, entonces una vez descargado continua procesando, en varios casos afectando el performance, para evitar eso lo mas recomendado en varios sitios es ponerlo antes de </body> para asi evitar bloqueo de descargas en paralelo. esto segun yahoo: http://developer.yahoo.com/performance/rules.html#js_bottom

hay un problema con esto, ya que el script no cargaría hasta que el documento entero este procesado. esto podria afectar el performance, y se podria ver la regla de los segundos donde si no carga a tiempo tu página el usuario se marcha a otra.

Todo navegador moderno cuenta ya con atributos defer y async para los tags <script>, con estos dos atributos le decimos al navegador cuando el documento procesa mientras se descargan los scripts. con estos atributos actualmente se considera anticuada la manera de insertar los tags <script> antes de </body>.

el atributo defer descarga en orden los script de manera asíncrona, sin bloquear el procesamiento del documento. espera a que la pagina haya cargado.

Nota: debes tener en cuenta que defer no podria tener el mismo comportamiento en todos los navegadores, eso no ocurre con async

el atributo async descarga todos los script de manera asíncrona, son procesados tan pronto como descargados.

google nos da ciertas sugerencias a la hora de insertar scripts:

https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#DeferLoadingJS

mi sugerencia:

Depende el codigo de tu página, de si vas a manipular dom y del performance. la manera moderna hoy en dia es insertar los tags <script> en <head> con async y defer

EDIT: aca unas tablas para ver la compatibilidad de los navegadores para los atributos mencionados arriba:

http://caniuse.com/#feat=script-async
http://caniuse.com/#feat=script-defer

por white (75.880 puntos)
seleccionada por

0voto

pabeni comentado

Entonces también se han de poner los dos formatos? es decir los enlaces externos tipo:

<script type="text/javascript" src="js/jquery.js"></script>

Y el codigo propiamente dicho a pelo tambien no?

<script type="text/javascript">
      $(function(){
              $(".aviso").fancybox({
        'speedIn'           : 600,
        'slideshowSpeed':   3000,  
        'padding'           : 40,
        'transitionIn'      : 'fade',
        'transitionOut'     : 'fade',
        'overlayOpacity'    :  0.7,
        'overlayColor'      : '#000',
        'showNavArrows'     : true ,
        'autoScale'         : true,
        'scrolling'         : 'auto',
        'type'              : 'iframe'
    }); 
 }); 
</script>

Quedando así antes de la etiqueta body no?

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
      $(function(){
              $(".aviso").fancybox({
        'speedIn'           : 600,
        'slideshowSpeed':   3000,  
        'padding'           : 40,
        'transitionIn'      : 'fade',
        'transitionOut'     : 'fade',
        'overlayOpacity'    :  0.7,
        'overlayColor'      : '#000',
        'showNavArrows'     : true ,
        'autoScale'         : true,
        'scrolling'         : 'auto',
        'type'              : 'iframe'
    });   });  </script>

**< / body >**

Espero su respuesta, un saludo!

por pabeni (1.090 puntos)

0voto

white comentado

tanto las etiquetas script inline y las etiquetas no inline pueden ir al final de </body> sin problema, eso en cuestión de performance ayuda a que se visualize la pagina mas rapido en pleno proceso de carga, como ya se dijo.

por cierto, como buena práctica y por performance te sugieron colocar el codigo del script inline en un fichero aparte. por que por performance? los navegadores hacen cache de los scripts externos dandote mejor carga en tu sitio si tus scripts tuvieran una buena porcion de código. obviamente todo esto depende del código que tengas.

https://developer.yahoo.com/performance/rules.html#external

saludos!

PD:

para mas detalles sobre el correcto uso:

uso de scripts para html4 segun W3C:
http://www.w3.org/TR/REC-html40/interact/scripts.html

uso de scripts para html5 segun W3C:
http://www.w3.org/TR/html-markup/script.html

por white (75.880 puntos)
editado por

0voto

pabeni comentado

Muchas gracias white,

Me has despejado todas las dudas que tenia.

Un saludo!

por pabeni (1.090 puntos)
editado por

1voto

carlossevi Puntos63580

Enlazar el código Javascript en el head no tiene ninguna ventaja, a no ser que dicho código vaya a hacer uso de funciones específicas que no puedan ejecutarse tras la carga de la página.

Se recomienda poner el Javascript lo más "abajo" posible porque aunque el tiempo de carga total de la página es el mismo, el tiempo aparente mejora. Es decir, la parte visual (estilos, imágenes y textos) carga antes dando la sensación de que la página termina de cargar más rápidamente.

Como bien añade la página que enlazas, esta técnica ya de paso nos evita problemas con el DOM y la función onload.

por carlossevi (63.580 puntos)

0voto

ctapiamori Puntos1050

Los Codigos <script> deben al final para evitar el delay de carga de las paginas, y como bien mencionaron es recomendable el manipular el DOM al cargar totalmente la pagina para ello puedes utilizar:

$(document).ready();

Para la carga de archivos *.JS (sean propios o externos) igual se recomienda colocalor la final antes de tu codigo <script> que se encuentre en tu pagina, esto ayuda en el delay de la pagina, Ejemplo:

<html>
<head>...</head>
<body>
<script src="ruta de archivo"></script>
<script>
$(document).ready(function(){ /* Manejo del DOM al terminar de cargar la pagina */ });
function NombreFuncion(){ }
</script>
</body>
</html>

Te recomiendo que tambien evites mucho el manejo de funciones globales en las paginas, y mejor crearlas en un JS y agregarlo en las paginas que lo requieran, esto tambien ayudara mejorar tu codigo, mientras mas limpio este mejor sera interpretado.

por ctapiamori (1.050 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta