Este artículo es para
Newfags . Y muestra cómo, usando promesas retrasadas, puede hacer que la interfaz sea más receptiva y reducir el tiempo de ejecución.
Entonces, imagine que tiene una tarea: implementar el botón "Editar perfil", haciendo clic en el que debe aparecer un formulario. Y los valores para los campos de este formulario se cargan de forma asíncrona desde el servidor.
Interfaz incompatible
Un ejemplo de la implementación de dicho botón.
¿Qué sucede aquí y por qué esta opción es mala?
Como habrás notado, la respuesta a un clic en un botón ocurre con un largo retraso. Por qué Veamos el cuadro:
Como puede ver, en este enfoque, el script
primero carga los datos y realiza el trabajo preparatorio, y solo
luego cambia la interfaz. Esto es un error
La interfaz debe responder de alguna manera a las acciones del usuario lo antes posible.
Interfaz sensible
Hagamos las cosas un poco mejor. En el siguiente ejemplo, creamos un formulario y lo mostramos de
inmediato . Y solo
entonces adjuntamos los controladores y cargamos los datos del servidor.
Miremos nuestra tabla:
Como puede ver, el tiempo de ejecución total no ha cambiado. Sin embargo, ahora el usuario ve la reacción a sus acciones mucho antes.
Promesa diferida
¿Sabía que no tiene que esperar a Promise en el mismo lugar donde lo creó?
const promise = fetch()
Por lo tanto, puede minimizar el tiempo de inactividad, cuando el navegador solo espera la finalización de la operación asincrónica y no está ocupado con nada.
Ejecute operaciones asíncronas largas lo antes posible, pero espere que se completen lo antes posible.
Ahora, teniendo en cuenta esta regla, volvamos a nuestra forma.
En el siguiente ejemplo, enviaremos una solicitud para descargar datos inmediatamente después de un clic, pero no esperaremos a que se complete. En lugar del tiempo de inactividad mientras esperamos una respuesta del servidor, haremos un trabajo útil: crear un formulario y mostrarlo.
Y esto es lo que obtenemos:
Como puede ver en el gráfico, al principio dos procesos se ejecutan en paralelo. Por lo tanto, ahorramos casi un segundo de tiempo de ejecución.
Espero que este material sea útil para alguien