¿Async Await realmente no bloquea en el navegador?

He estado jugando con la función en un SPA usando TypeScript y promesas nativas, y noté que incluso si refactorizo ​​una función de ejecución prolongada en una función asíncrona que devuelve una promesa, la interfaz de usuario sigue sin responder.

Entonces mis preguntas son:

• ¿Cómo ayuda exactamente la nueva función async/await a evitar el bloqueo de la interfaz de usuario en el navegador? ¿Hay algún paso adicional especial que uno deba tomar al usar async/await para obtener una interfaz de usuario receptiva?

• ¿Alguien puede crear un violín para demostrar cómo async/await ayuda a que la interfaz de usuario responda?

• ¿Cómo se relaciona async/await con funciones asíncronas anteriores, como setTimeout y XmlHttpRequest?

await p programa la ejecución del resto de su función cuando promete p resuelve Eso es todo.

async te permite usar await. Eso es (casi) todo lo que hace (también envuelve su resultado en una promesa).

Juntos, hacen que el código sin bloqueo se lea como un código de bloqueo más simple. No desbloquean código.

Para una interfaz de usuario receptiva, descargue el trabajo intensivo de la CPU a un obrero hilo, y pasarle mensajes:

async function brutePrime(n) {
  function work({data}) {
    while (true) {
      let d = 2;
      for (; d < data; d++) {
        if (data % d == 0) break;
      }
      if (d == data) return self.postMessage(data);
      data++;
    }
  }

  let b = new Blob(["onmessage =" + work.toString()], {type: "text/javascript"});
  let worker = new Worker(URL.createObjectURL(b));
  worker.postMessage(n); 
  return await new Promise(resolve => worker.onmessage = e => resolve(e.data));
}

(async () => {
  let n = 700000000;
  for (let i = 0; i < 10; i++) {
    console.log(n = await brutePrime(n + 1));
  }
})().catch(e => console.log(e));

async es una forma más elegante de estructurar el código asíncrono. No permite nuevas capacidades; es solo una sintaxis mejor que las devoluciones de llamada o las promesas.

Entonces, async no se puede usar para “hacer algo asíncrono”. Si tiene código que tiene que hacer mucho procesamiento basado en CPU, async no va a hacer mágicamente que la interfaz de usuario responda. Lo que tendrías que hacer es usar algo como trabajadores webcual son la herramienta adecuada para enviar el trabajo vinculado a la CPU a un subproceso en segundo plano para que la interfaz de usuario responda.

JavaScript es de subproceso único y se ejecuta en el mismo subproceso que la interfaz de usuario. Entonces, todo el código JavaScript bloqueará la interfaz de usuario. Como mencionaron otros trabajadores web, se pueden usar para ejecutar código en otros subprocesos, pero tienen limitaciones.

La diferencia entre las funciones asíncronas y las normales es que devuelven una promesa. Usando una devolución de llamada, puede diferir la ejecución del código, que maneja el resultado de la invocación de una función y, por lo tanto, permite que la interfaz de usuario haga algún trabajo. Los siguientes tres ejemplos tienen el mismo efecto:

async function foo() {
  console.log("hi");
  return 1; 
}
foo().then(result => console.log(result))
console.log("lo");

function foo() {
  console.log("hi");
  return 1; 
}
Promise.resolve(foo()).then(result => console.log(result))
console.log("lo");

function foo() {
  console.log("hi");
  return 1; 
}
const result = foo();
setTimeout(() => console.log(result));
console.log("lo");

En los tres casos, la consola registra hi, lo, 1. Antes de que se imprima 1, la interfaz de usuario puede manejar la entrada del usuario o dibujar actualizaciones. La razón 1 que se imprime en último lugar en los dos primeros casos es que las devoluciones de llamadas para promesas no se ejecutan de inmediato.

await le permite hacer eso sin devoluciones de llamada:

async function foo() {
  console.log("hi");
  return 1; 
}

async function bar() {
  const result = await foo();
  console.log(result);
}

bar();
console.log("lo"); 

Eso también imprimirá hola, lo, 1. Al igual que una devolución de llamada para una promesa, el código después await nunca se ejecuta inmediatamente.

Está claro a partir de la descripción en desarrollador.mozilla.org que no es bloqueante:

La palabra clave await hace que el tiempo de ejecución de JavaScript pause su código en esta línea, permitiendo que otro código se ejecute mientras tanto (Nota: mi negrita), hasta que la llamada a la función asíncrona haya devuelto su resultado. Una vez que se completa, su código continúa ejecutándose a partir de la siguiente línea.

Llego tarde a la fiesta aquí. Quería verificar los casos de uso síncrono y asíncrono.

Para ser claros, async/await no crea código síncrono. solo agrega syntactic sugar eso hace que el código parezca sincrónico. Debajo de los envoltorios, la lógica Promise continúa implementándose non-preemptive multitasking.

en el ejemplo gist puede ejecutar el ejemplo con un parámetro de línea de comandos que seleccione la entrada CLI de bloqueo o no bloqueo.
asyncExample.js