How browser loads Javascript resources?

Question

I did search on Google to understand how browser loads the resources (CSS, JS, Images, HTML etc) and when I did the prototype code then got little confused based on my test. Following is my plnkr code where I added <script> to add delay of 10 seconds to test the document load vs window load.

Plnkr Code

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
   $(document).ready(function() {
     // executes when HTML-Document is loaded and DOM is ready
     console.log("document loaded at "+new Date());

    });
    $(window).load(function() {
     // executes when complete page is fully loaded, including all frames, objects and images
     console.log("window loaded at "+new Date());
    });
</script>
  </head>

  <body>
    <h1 class="red">First element :-)</h1>
   <script src="https://httpbin.org/delay/60"></script>
    <h1 class="blue">Second element:-)</h1>
  </body>

</html>

I have following observations and questions

My understanding was browser doesn't render the page until complete page is not parsed i.e. DOM is prepared. However once I tested this sample page then I do see my first H1 tag is rendered and then it waited to load the next <script> and then it renders the second H1 tag. Isn't page should wait to build the complete DOM first then try to render?
Why $(window).load and $(document).ready events are getting fired at same moment?

window.load is fired when all resources ( like images etc. ) are loaded along with the DOM while document.ready is fired when only the DOM is loaded. — DinoMyte
– DinoMyte, Commented Feb 9, 2016 at 17:59
Most browsers definitely start rendering even when they haven't yet received the whole page (this is quite obvious for very large pages on slow links). — jcaron
– jcaron, Commented Feb 9, 2016 at 18:17
Re: load/ready, you don't have any images that would delay load. Also note that those two events details are very browser-specific. jQuery tries to smooth things out, but I'm not sure you can count on a 100% exact same behaviour on all browsers. — jcaron
– jcaron, Commented Feb 9, 2016 at 18:19
Based on my testing, it seems that document.ready is fired when HTML & Javascripts are loaded, $(window).load fired when images etc are loaded as well. Does it mean that when we say DOM is loaded then we include loading of javascript as well — joy
– joy, Commented Feb 9, 2016 at 20:23
Most browser will start rendering as soon as they have loaded all css files that they are currently award if you have linked a css file in your head and you have a delay on the delivery on this one, then you most likely will see a blank screen or the previous one until the style-sheet is loaded. — t.niese
– t.niese, Commented Feb 17, 2016 at 16:56

Quentin · Accepted Answer · 2016-02-17 16:56:05Z

1

My understanding was browser doesn't render the page until complete page is not parsed i.e. DOM is prepared.

Not true. Browsers render pages incrementally.

Why $(window).load and $(document).ready events are getting fired at same moment?

ready fires as soon as the HTML document has finished rendering.

load fires as soon as the HTML document has finished rendering and external resources (such as images) have loaded.

You don't have any external resources other than the stylesheet (which starts loading quickly and finishes loading before the rest of the page has loaded) and the scripts (which block DOM parsing anyway).

answered Feb 17, 2016 at 16:56

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Schultheiss Over a year ago

The load event fires at the end of the document loading process. NOT necessarily after the rendering is completed.

Collectives™ on Stack Overflow

How browser loads Javascript resources?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related