Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Etiqueta Script

    Cargado por

    basura1998
    8 vistas2 páginas

    Título original

    etiquetaScript

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    8 vistas2 páginas

    Etiqueta Script

    Cargado por

    basura1998

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 2

    ¿Dónde

    colocar la etiqueta <script>?


    Referencia:

    http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-
    html-markup/24070373#24070373

    Veamos qué ocurre cuando un navegador carga una página web:

    1. Trae la página HTML (por ejemplo index.html)

    2. Comienza a analizar el HTML

    3. El analizador encuentra una etiqueta <script> que referencia un fichero externo

    4. El navegador solicita el archivo script. Mientras tanto, el navegador bloquea la


    representación del resto de la página (porque puede ser que el script modifique el
    documento)

    5. Cuando el script está totalmente descargado comienza a ejecutarse (aunque no se


    haya analizado todo el HTML).

    6. El analizador continúa analizando el resto del documento HTML

    El paso 4 hace hace que el usuario tenga una mala experiencia. El sitio web deja de cargarse
    hasta que se han descargado todos los scripts.

    La antigua recomendación para solventar este problema era poner las etiquetas <script> al
    final del <body>, para asegurarse de que el analizador no bloquearía la página hasta el final.
    Esto tiene un problema: el navegador no puede empezar a descargar los scrips hasta que el
    documento ha sido totalmente analizado. Para sitios web grandes con grandes scripts y hojas
    de estilo, poder descargar los script tan pronto como sea posible es muy importante para
    conseguir eficiencia. La solución óptima sería que el navegador pudiera empezar a descargar
    los scripts tan pronto como fuera posible, mientras al mismo tiempo analiza el resto del
    documento.

    Actualmente los navegadores soportan los atributos para la etiqueta script async y defer. Estos
    atributos le dicen al navegador que es seguro continuar analizando la página mientras los
    scripts son descargados.

    async
    <script src="path/to/script1.js" async></script>

    <script src="path/to/script2.js" async></script>

    Los scripts con el atributo async son ejecutados asíncronamente. Esto quiere decir que el script
    se ejecuta tan pronto como es descargado, sin bloquear el navegador mientras tanto. Esto
    implica que es posible que el script2.js se descargue y se ejecute antes que el script1.js (si el
    script2.js es por ejemplo una copia de jquery que necesita el script2.js para ejecutarse, la
    página tendrá errores).

    defer
    <script src="path/to/script1.js" defer></script>

    <script src="path/to/script2.js" defer></script>

    Los scripts con el atrigbuto defer se descargan en paralelo sin bloquear el navegador y se
    ejecutan solamente después de que el documento ha sido cargado completamente,
    manteniento su orden (por ejemplo primero el script1.js y después el script2.js). Tampoco en
    este caso se bloquea el navegador.

    En conclusión podemos decir que actualmente podemos poner los scripts en el <head> y usar
    los atributos async o defer. Esto permite a los scripts ser cargados lo antes posible sin bloquear
    el navegador.

    También podría gustarte