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

exploiterstack · 2 Febrero 2015, 15:00 PM

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!

3n31ch · 2 Febrero 2015, 15:38 PM

Bien amigo, te explico.

Lo que se espera es que incluyas el código javascript en head con las etiquetas

Código (html4strict) [Seleccionar]

<script src="myscripts.js"></script>

(señalando en src la dirección y nombre del archivo)

Pero como bien dices una buena practica es que lo incluyas en el body al final del todo. El código javascript puede ser extenso y por esta razón el cargar este código puede ser tardío. Debido a esto es preferible que se cargue al final del todo, de esta manera se cargara primero lo mas importante (El código HTML y CSS) y luego la funcionalidad con javascript. De esta manera los usuarios de tu pagina web accederán y verán que la pagina carga rápidamente, pero ellos no sabrán que aun no ha cargado del todo, sino que aun esta cargando el javascript que muchas veces no representa ningún cambio visual solo funcional.

Pero entonces te preguntaras ¿porque hay algunos que lo colocan en el head?

Pues existen casos en que el código javascript es necesario que cargue al principio. Como por ejemplo si quisieras hacer algún tipo de animación que solo pudieras hacer con javascript (y no con CSS que también te lo permite aunque muchos lo desconocen)

Todo dependerá de tu criterio como programador, si consideras importante que el javascript Cargue al inicio del todo, no temas puedes hacerlo, pero si crees que no es muy importante ya que lo utilizaras como validador o algo por el estilo (Que tambien lo puedes hacer con HTML5) entonces hazlo al final del todo.

#!drvy · 6 Febrero 2015, 11:50 AM

Yo lo que te recomiendo es que sea importante o no siempre vaya al final del body. La única excepción es cuando cargas una web que funciona prácticamente entera con javascript ya que entonces te da mas o menos igual cuando va a cargar.

Las animaciones deberían considerarse secundarias. Realmente la interacción del sitio debería considerarse secundaria. Lo que le importa a un visitante cuando entra a tu web es que vea algo. Es muy importante por tanto mostrarle contenido al usuario nada mas entre a pesar de que no se vea tan bonito como lo sera después de haber cargado el javascript.

También te recomiendo reducir al máximo posible el javascript (a no ser que, de nuevo, sea una app puramente cliente). HTML5 y CSS3 han añadido muchas de las cosas que antes solamente podías hacer con javascript incluidas animaciones, transiciones, validaciones etc...

Saludos

exploiterstack · 6 Febrero 2015, 12:23 PM

Hola que tal #!drvy,

Tienes toda la razón y la lógica de ponerlo al final del body es 100% entendible. El problema bien a lo que comente en principio como en sitios de formación no lo enseñan así, y que tanto el enlazado JS como el código a pelo y CSS va en el HEAD..

Un saludo!

3n31ch · 6 Febrero 2015, 12:41 PM

Cita de: Nac-ho en 2 Febrero 2015, 15:38 PM
Pues existen casos en que el código javascript es necesario que cargue al principio. Como por ejemplo si quisieras hacer algún tipo de animación que solo pudieras hacer con javascript (y no con CSS que también te lo permite aunque muchos lo desconocen)

Cuando dije eso me refería a una animación importante que fuera necesaria que cargue al inicio (si, lo se, no fue el mejor ejemplo pero es que la verdad no he necesitado de javascript necesario para el inicio

)... Quería aclararlo, no quiero confundir a nadie.

Como bien dice @#!drvy javascript es necesario en puntos muy específicos. Anteriormente si que era muy útil casi para todo, pero ahora CSS3 Y HTML5 han implementado funciones que hacen que javascript quede en segundo plano.

@exploiterstack Esto que mencionas de que los sitios no lo enseñan así es porque usualmente cuando uno aprende a codificar le enseñan la manera mas fácil o rápida de hacer las cosas y no se preocupan de que es lo mejor o que es lo peor (solo que funcione). Y esto esta bien hasta cierto punto, ya que hay que respetar cierta curva de aprendizaje para que el estudiante no le explote la cabeza. Ya con el tiempo aprendes a mejorar tus técnicas como tu lo estas haciendo ahora.

Saludos.

#!drvy · 6 Febrero 2015, 12:44 PM

Bueno sin el animo de ofender a nadie con esto pero... en mi opinión, el 90% de los tutoriales/guías/libros sobre desarrollo web o son de hace mas de 10 años o son copias de fragmentos encontrados en google con poco valor educativo hoy en día.

La mayoría de libros y tutoriales que hay por ahí son intenciones de hacerse popular o ganar algo de dinero vendiendo basura anticuada.

Por eso a mi personalmente nunca me veras gastar dinero en un curso/libro/tutorial.. prefiero ir a la documentacion oficial y seguir consejos de grandes con experiencia en el sector como puede ser Yahoo o Google (ambas tienen sus respectivos blogs/paginas de conejos y trucos para desarrolladores).

Ademas, comparto la opinión de @Nac-ho.

Saludos

exploiterstack · 6 Febrero 2015, 13:05 PM

Yo también estoy de acuerdo con Nac-ho

y justo la explicación que me dio fue una de la discusiones que tuve con mi profesor de lenguajes de entorno cliente.

#!drvy respecto a lo que mencionar no se si lo dices por que he aprendido por medio de tutoriales etc...Quiero decirte como mencione estudie programación y esos consejos que me proporcionaron en su día fueron por personal relacionado a la docencia. De no decirlo por que he aprendido de ese modo #!drvy he de decirte que claro que hay por internet tutoriales/manuales muy mal documentados...

Un saludo a los dos!

#!drvy · 6 Febrero 2015, 13:11 PM

Lo mencionaba mas que nada para los "autores" de dichos textos/vídeos... que solo se dedican a explicar lo mas básico y llevan masticando el mismo chicle años y años..

Saludos

el-brujo · 6 Febrero 2015, 19:17 PM

Y "ahora" (ya hace años, 2009) que existe el código asíncrono de Google Analytics por ejemplo, pues las reglas han cambiado. Y también para Adsense.

Pero si realmente quieres mejorar la velocida de carga de tu sitio, usa compresión gzip, mod_deflate con Apache, usar una CDN (caché), etc.

CloudFlare tiene el RocketLoader que se supone que convierte todo el código javascript en asíncrono.

https://support.cloudflare.com/hc/en-us/articles/200168056