I have tested this in chrome and safari, both having same result.
When i try to run a loop after window onload event, it keeps waiting for the loop to end before rendering the regular DOM above it.
However, if i call the loop code through a setTimeout, even if it's of 0 millisecond, it loads the DOM and then runs the loop.
Shouldn't window onload event do this by default? I want to understand how can we truly make the javascript code run after the DOM is rendered.
Thanks.
<!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>
However if we comment out the b() inside setTimeout and uncomment the b() above it, it will wait till b() finishes before rendering the DOM.
Thanks.
The onload event fires when all the resources have been loaded. Here there is no external resource to load, so it will fire instantly, before the next painting frame.
The timeout may let the browser update the rendering, but it's not a given, the next painting could happen after the timeout.
If you want to ensure the page has been painted at least once before executing your script, then wait for the next painting frame, by calling requestAnimationFrame() and in the callback wait just the next task (e.g with setTimeout(fn, 0)):
requestAnimationFrame(() => setTimeout(yourScript, 0));