He probado esto en Chrome y Safari, ambos con el mismo resultado.
Cuando trato de ejecutar un bucle después del evento de onload de la ventana, sigue esperando a que finalice el bucle antes de mostrar el DOM normal encima.
Sin embargo, si llamo al código de bucle a través de setTimeout, incluso si es de 0 milisegundos, carga el DOM y luego ejecuta el bucle.
¿No debería el evento onload de la ventana hacer esto de forma predeterminada? Quiero entender cómo podemos realmente hacer que el código javascript se ejecute después de que se represente el DOM.
Gracias.
<!DOCTYPE html> <html lang="en"> <body> <div id="root"> foo </div> <script> window.onload = ( () => { // b() setTimeout(() => { b() }, 0); }); function b() { let i = 0 while (i < 400000000) { i++ } document.getElementById('root').innerHTML = i } </script> </body> </html>Sin embargo, si comentamos el b() dentro de setTimeout y descomentamos el b() encima de él, esperará hasta que b() finalice antes de representar el DOM.
Gracias.
El evento onload se activa cuando se han cargado todos los recursos. Aquí no hay ningún recurso externo que cargar, por lo que se disparará al instante, antes del siguiente cuadro de pintura.
El tiempo de espera puede permitir que el navegador actualice la representación, pero no es un hecho, la siguiente pintura podría ocurrir después del tiempo de espera.
Si desea asegurarse de que la página se haya pintado al menos una vez antes de ejecutar su secuencia de comandos, espere el próximo cuadro de pintura llamando a requestAnimationFrame() y en la devolución de llamada espere solo la siguiente tarea (por ejemplo, con setTimeout(fn, 0) ) :
requestAnimationFrame(() => setTimeout(yourScript, 0));