• #Aplicaciones
  • #Bases de datos
  • #Dispositivos
  • #Hardware
  • #Inversión
  • #Marketing
  • #Programacion
  • #Sistemas
  • Scripts en HTML: En Dónde Colocarlos

    TutorialeshtmlJavascriptjQueryProgramacion

    En este tutorial aprenderás cuál es el mejor lugar en el que puedes incluir los scripts dentro de tus documentos HTML. Esto es algo que ya hemos visto cuando hemos creado una plantilla básica HTML, pero aquí verás una explicación más detallada.

    En general, no es recomendable colocar las etiquetas <script> en la sección <head> de los documentos HTML. La mejor práctica consiste en situar las etiquetas <script> que incluyen código JavaScript justo antes la etiqueta de cierre </body>.

    Esto es debido a que los navegadores cargan el código HTML desde la parte superior de los documentos hasta el fondo. Lo primero que se carga es la cabecera <head> y seguidamente el body <body> y todo lo que contiene en su interior. Si incluyes los scrips en la sección head, el archivo JavaScript referenciado se cargará antes de que el documento HTML haya terminado de cargarse, pudiendo provocar los siguientes problemas:

    1. Si el código JavaScript de alguno de tus scripts altera el código HTML nada más cargarse, no ocurrirán dichos cambios y puede que se produzcan errores, ya que el código HTML todavía no se habrá cargado.
    2. Por otro lado, el tiempo de carga de tu página puede que sea considerablemente largo es el tamaño de tus archivos JavaScript es demasiado grande. A mayor cantidad de código JavaScript, mayores serán los tiempos de carga. Sin embargo, si optas por incluir los archivos JavaScript justo antes de la etiqueta </body>, la parte más importante de la página ya se habrá renderizado cuando se carguen estos archivos.

    Incluyendo los archivos JavaScript al final del documento, darás un valioso tiempo al navegador para que cargue el código HTML antes de que cargue el código JavaScript, evitando errores y acelerando los tiempo de respuesta. Además, mejorarás tu puntuación en la herramienta Google Page Insights.

    Por último, seguramente te estés preguntando que por qué no ves errores cuando llevas toda la vida incluyendo los scripts en la cabecera. Muy sencillo; cuando incluyes scripts como jQuery, sueles usar una función que espera a que todo el código HTML se haya cargado antes de ejecutar ciertas funciones. Se trata de la función $("document").ready. Aquí tienes un ejemplo:

    $("document").ready(function(){
        // Aquí va tu código
    });

    La función ready esperará a que el documento esté listo, tal y como su nombre indica. Muchos otros scripts incluyen funciones similares. Decir que, aunque esto en teoría funciona, afectará enormemente al rendimiento de tu página, traduciéndose en un menor número de visitas desde Google.

    Espero que esta pequeña guía os haya sido útil.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

    https://twitter.com/neeonez