Para la programación, hacen lo mismo que los kits de muebles prefabricados para la construcción de casas: es mucho más fácil coger paneles ya cortados y atornillarlos para hacer una estantería que elaborar el diseño uno mismo, ir a buscar la madera adecuada, cortar todos los paneles con el tamaño y la forma correctos, encontrar los tornillos del tamaño correcto y luego unirlos para hacer una estantería.
Cada pestaña del navegador tiene su propio cubo para ejecutar el código (estos cubos se llaman “entornos de ejecución” en términos técnicos) – esto significa que en la mayoría de los casos el código en cada pestaña se ejecuta completamente por separado, y el código en una pestaña no puede afectar directamente al código en otra pestaña – o en otro sitio web.
Aquí estamos seleccionando un párrafo de texto (línea 1), y luego adjuntando un oyente de eventos a él (línea 3) para que cuando se haga clic en el párrafo, se ejecute el bloque de código updateName() (líneas 5-8). El bloque de código updateName() (este tipo de bloques de código reutilizables se denominan “funciones”) pide al usuario un nuevo nombre, y luego inserta ese nombre en el párrafo para actualizar la pantalla.
El componente Next.js Script, next/script, es una extensión del elemento HTML <script>. Permite a los desarrolladores establecer la prioridad de carga de los scripts de terceros en cualquier parte de su aplicación, fuera de next/head, ahorrando tiempo al desarrollador y mejorando el rendimiento de la carga.
Los sitios web suelen utilizar scripts de terceros para incluir distintos tipos de funcionalidad en su sitio, como análisis, anuncios, widgets de atención al cliente y gestión de consentimientos. Sin embargo, esto puede introducir problemas que afectan tanto a la experiencia del usuario como a la del desarrollador:
La razón por la que beforeInteractive se diseñó para funcionar sólo dentro de \_document.js es para soportar la funcionalidad de streaming y Suspense. Fuera del _document, no es posible garantizar la sincronización o el orden de los scripts beforeInteractive.
Los scripts que utilizan la estrategia afterInteractive se inyectan del lado del cliente y se ejecutarán después de que Next.js hidrate la página. Esta estrategia debería utilizarse para los scripts que no necesitan cargarse lo antes posible y que pueden obtenerse y ejecutarse inmediatamente después de que la página sea interactiva.
Si tienes varios script includes y necesitas convencerte de que se cargarán en el orden correcto para ti, consulta el artículo de WebSiteOptimization.com sobre el atributo Defer, donde puedes ver el orden de ejecución de tus scripts.
Si puedes, ponlo al final del elemento <body>, después de haber incluido jQuery, el propio plugin de autocompletar y cualquier otra librería de la que dependas. Poner los scripts al final del <body> es generalmente (en el momento de escribir esto 🙂 considerado como una mejor práctica porque permite al navegador llegar al marcado antes de tener que preocuparse por la ejecución del script.
Básicamente, esto significa que cualquier código dentro de la cabeza y el cuerpo de su página que no esté dentro de una función u objeto se ejecutará mientras la página se está cargando – tan pronto como la página se haya cargado lo suficiente como para acceder a ese código.
Esta última parte es importante e influye en el orden de colocación del código en la página: cualquier código colocado directamente en la página que necesite interactuar con elementos dentro de la misma debe aparecer después de los elementos de la página de los que depende.
Un código dentro de funciones u objetos se ejecuta siempre que se llama a esa función u objeto. Si se llama desde un código que está directamente en la cabecera o en el cuerpo de la página, su lugar en el orden de ejecución es efectivamente el punto en el que se llama a la función u objeto desde el código directo.
La asignación de una función a un manejador de eventos o a un oyente no hace que la función se ejecute en el punto en el que se asigna, siempre y cuando se asigne realmente la función en sí y no se ejecute la función y se asigne el valor devuelto. (Esta es la razón por la que generalmente no se ve el () al final del nombre de la función cuando se está asignando a un evento, ya que la adición de los paréntesis ejecuta la función y asigna el valor devuelto en lugar de asignar la función misma).