Diego Orozco by Diego Orozco on December 13, 2023

100 Días de Javascript - 10 de 100 - JS en el navegador

Después de haber visto principalmente funciones básicas de Javascript, ahora explicaré un poco sobre su funcionamiento en el navegador, considerando que, en un inicio, este fue el propósito de este lenguaje en el año 1995 (ver historia).

Si te gustaría aprender JS a través de una manera más estructurada, recomiendo ampliamente este curso el cual tomé hace varios años y me sirvió mucho para conocer una amplia cantidad de aspectos sobre este lenguaje.

Importando JS

En HTML, puedes incluir JavaScript de varias maneras: directamente en línea (inline), como un archivo externo o mediante la importación de módulos. A continuación, te explico cada una de estas formas:

  • Inline: Existe la posibilidad de escribir código JS directamente dentro de las etiquetas <script> en un documento HTML; sin embargo, por lo general no es recomendable esta práctica
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline JavaScript</title>
  </head>
  <body>
    <h1>Ejemplo de JavaScript en línea</h1>

    <script>
      // Código JavaScript en línea
      alert("¡Hola, mundo!");
    </script>
  </body>
</html>
  • External: Por otra parte, podemos tener nuestro código JS en un archivo separado y luego enlazarlo a tu HTML mediante la etiqueta <script> con el atributo src como se describe a continuación
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Externo</title>
  </head>
  <body>
    <h1>Ejemplo de JavaScript externo</h1>

    <!-- Enlace al archivo JavaScript externo -->
    <script src="mi_script.js"></script>
  </body>
</html>
  • Import: En caso de querer importar módulos JS con la finalidad de organizar mejor nuestro código, también existe la posibilidad de hacerlo usando la etiqueta <script> con el atributo type establecido como module:
<script type="module" src="mi_modulo.js"></script>

En este caso, el código JavaScript está en un archivo llamado mi_modulo.js, que se importa en el HTML como un módulo. La etiqueta type=”module” indica que este archivo es un módulo JavaScript.

Optimizando la ejecución de JS

Cuando trabajamos en proyectos web que son extensos, debemos entender la importancia y funcionamiento del código JS que se utiliza en cada página a fin de establecer la prioridad y momento de ejecución de cada parte.

Hay funciones JS que nos interesa que se carguen o ejecuten en un momento determinado (defer) y otras, de manera más flexible, que se carguen en cualquier momento de manera asíncrona (async), sin afectar el procesamiento del documento HTML.

async

Cuando usamos el atributo async se indica al navegador que el script se debe ejecutar de manera asíncrona, lo que significa que no detendrá el procesamiento del HTML mientras se descarga y ejecuta el script.

El script se ejecutará tan pronto como esté disponible, posiblemente antes de que la página haya terminado de cargarse completamente.

Se utiliza cuando el script no depende del estado de la página y puede ejecutarse independientemente de otros scripts o del contenido de la página.

defer

Con el atributo defer indicamos al navegador que el script se debe ejecutar después de que el documento HTML se haya parseado (aquí la explicación de este proceso) completamente.

Aunque se descarga de manera asíncrona, se ejecutará en orden de aparición en el documento HTML, asegurándose de que se respete el orden de carga de los scripts.

Se utiliza cuando el script depende del estado de la página o de otros scripts que se están cargando, y es importante mantener el orden de ejecución.

Cómo elegir la forma de importar JS

La elección de la forma de importar JavaScript (inline, externo o como módulo) depende de varios factores, incluyendo el tamaño del proyecto, la modularidad del código, el rendimiento y las mejores prácticas de desarrollo.

Se recomienda usar la manera inline cuando el código es pequeño y específico de una única página. Es útil para pequeñas interacciones o scripts simples.

Se debe considerar el uso de archivos externos cuando código se vuelve más extenso y se utiliza en múltiples páginas del sitio web. De esta manera facilitamos la reutilización del código, ya que un archivo externo puede ser compartido entre múltiples páginas y el mantenimiento del código se simplifica, debido a que los cambios se realizan en un solo lugar.

Asimismo, el uso de archivos JS externos permite el almacenamiento en caché, mejorando el rendimiento del sitio.

Finalmente, se recomienda utilizar import cuando se trabaja en un proyecto más grande y modular, donde la separación del código en partes lógicas es crucial.

Utilizando esta última opción, nos permite encapsular las funciones y evita la contaminación del espacio global, ya que cada módulo tiene su propio ámbito (scope).

Consideraciones adicionales

Rendimiento: En términos de rendimiento, los scripts externos y la importación de módulos suelen ser preferibles, ya que permiten el almacenamiento en caché y la carga asíncrona.

Organización: La organización del código y la mantenibilidad son factores clave. En proyectos más grandes, es recomendable utilizar archivos externos o módulos para facilitar la gestión y el mantenimiento del código.

Compatibilidad: Al utilizar módulos, hay que tener cuenta la compatibilidad del navegador. La importación de módulos es compatible con la mayoría de los navegadores modernos, pero si se requiere soporte en navegadores más antiguos, se deberá considerar utilizar una herramienta de transpilación como Babel a fin de tener compatibilidad regresiva.

<< JS - Objects |