• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

216
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 3 years 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 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

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

Andres GPT

Recommend me some offers
I have an error