• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

23
Views
Window.onload blocking DOM render, setTimeout doesn't

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.

about 1 month ago ·

Juan Pablo Isaza

1 answers
Answer question

0

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));
about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.