javascript - ejemplos - ¿Es innerHTML asincrónico?

innerhtml value

Question

Espero no hacer el ridículo, pero estoy tratando de entender lo que está sucediendo en esas dos líneas de código:

document.body.innerHTML = ''something'';
alert(''something else'');

Lo que estoy observando es que la alerta se muestra antes de que se haya actualizado HTML (o tal vez sí, pero la página no se ha actualizado / repintado / lo que sea)

codepen un codepen a este codepen para ver a qué me refiero.

Tenga en cuenta que incluso poner alert en setTimeout(..., 0) no ayuda. Parece que se necesitan más bucles de eventos para innerHTML para actualizar la página.

EDITAR:

Olvidé mencionar que estoy usando Chrome y no revisé otros navegadores. Parece que solo es visible en Chrome. Sin embargo, todavía estoy interesado por qué está sucediendo eso.

Answer 1

La configuración de innerHTML es sincrónica, al igual que la mayoría de los cambios que puede realizar en el DOM. Sin embargo, renderizar la página web es una historia diferente.

(Recuerde, DOM significa "Modelo de objeto de documento". Es solo un "modelo", una representación de datos. Lo que el usuario ve en su pantalla es una imagen de cómo debería verse ese modelo. Por lo tanto, cambiar el modelo no ocurre instantáneamente cambie la imagen: la actualización tarda un poco).

Ejecutar JavaScript y renderizar la página web en realidad ocurre por separado. Para decirlo de manera simplista, primero se ejecuta todo el JavaScript en la página (desde el bucle de eventos: vea este excelente video para obtener más detalles) y luego el navegador muestra los cambios en la página web para que el usuario los vea. Esta es la razón por la cual "bloquear" es tan importante: ejecutar un código computacionalmente intensivo evita que el navegador pase el paso "ejecutar JS" y entre en el paso "renderizar la página", haciendo que la página se congele o tartamudee.

La tubería de Chrome se ve así:

Como puede ver, todo el JavaScript ocurre primero. Luego, la página se estiliza, presenta, pinta y compone: el "render". No toda esta tubería ejecutará cada cuadro. Depende de los elementos de la página que hayan cambiado, si los hay, y de cómo se deben volver a procesar.

Nota: alert() también es síncrono y se ejecuta durante el paso de JavaScript, por lo que aparece el cuadro de diálogo de alerta antes de que veas cambios en la página web.

Ahora puede preguntar "Espera, ¿qué se ejecuta exactamente en ese paso ''JavaScript'' en la tubería? ¿Todo mi código se ejecuta 60 veces por segundo?" La respuesta es "no", y se remonta a cómo funciona el bucle de eventos JS. El código JS solo se ejecuta si está en la pila, desde cosas como oyentes de eventos, tiempos de espera, lo que sea. Ver video anterior (realmente).

developers.google.com/web/fundamentals/performance/rendering

Answer 2

La propiedad innerHTML real se actualiza sincrónicamente, pero el rediseño visual que causa este cambio ocurre de forma asincrónica.

La representación visual del DOM es asíncrona en Chrome y no ocurrirá hasta después de que la pila de funciones de JavaScript actual se haya borrado y el navegador sea libre de aceptar un nuevo evento. Otros navegadores pueden usar hilos separados para manejar el código JavaScript y la representación del navegador, o pueden permitir que algunos eventos tengan prioridad mientras una alerta detiene la ejecución de otro evento.

Puedes ver esto de dos maneras:

1. Si agrega for(var i=0; i<1000000; i++) { } antes de su alerta, le ha dado al navegador suficiente tiempo para volver a dibujar, pero no lo ha hecho, porque la pila de funciones no se ha borrado ( add todavía se está ejecutando).

2. Si retrasa su alert través de un setTimeout(function() { alert(''random''); }, 1) asincrónico setTimeout(function() { alert(''random''); }, 1) , el proceso de redibujo avanzará a la función retrasada por setTimeout.

   • Esto no funciona si usa un tiempo de espera de 0 , posiblemente porque Chrome le da prioridad a la cola de eventos a 0 tiempos de espera antes de cualquier otro evento (o al menos antes de volver a dibujar los eventos).

Answer 3

Sí, es sincrónico, porque esto funciona (adelante, escríbalo en su consola):

document.body.innerHTML = ''text'';
alert(document.body.innerHTML);// you will see a ''text'' alert

La razón por la que ve la alerta antes de ver que la página cambia es que la representación del navegador lleva más tiempo y no es tan rápida como su ejecución de JavaScript línea por línea.