62

I just realized that I lack the fundamental knowledge of what exactly happens as a page is being loaded into a browser.

Assume I have a structure like this: 

<head>

<script src="jquery.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
</head>
<body>
...
<script type="text/javascript" id="middle">
    // some more JS here...
</script>
...
<script src="last.js" type="text/javascript"></script>
</body>

Here are the questions I have:

  1. What sequence are things happening in? First the DOM then the JS is executed, is it vice-versa, or is it simultaneous (or as soon as the JS files finish downloading, without any regard to the DOM)? I know that scripts are loaded in order.

  2. Where does $(document).ready() fit in? In Firebug's Net tab I see DOMContentLoaded event and the load event. Is $(document).ready() triggered when the DOMContentLoaded event fires? Couldn't find any concrete info on this (everyone merely mentions "when the DOM is loaded").

  3. What exactly does "when the DOM is loaded" mean? That all HTML/JS has been downloaded and parsed by the browser? Or just the HTML?

  4. Is the following scenario possible: there is a $(document).ready() which calls code in last.js, but runs before last.js has loaded? Where would it most likely be (in first.js or the inline code block)? How can I prevent this scenario?

I want to undestand the big picture of what happens when and what depends on what (if at all).

montrealist
  • 5,593
  • 12
  • 46
  • 68

3 Answers3

39

Javascript is executed as it is seen. Usually, the browser stops parsing the page as soon as it sees a <script> tag, downloads and runs the script, and then keeps going. This is why it's commonly advised to put <script> tags at the bottom: so the user doesn't have a blank page while the browser waits for the scripts to download.

However, starting from Firefox 3.5, scripts are downloaded in the background while the rest of the page is rendered. In the now-unusual event that the script uses document.write or similar, Firefox will back up and redraw as necessary. I don't think other browsers do this at the moment, but I wouldn't be surprised if it were forthcoming, and IE at least supports a defer attribute in the <script> tag that will defer loading the script until after the page is loaded.

DOMContentLoaded is exactly that: it fires as soon as the DOM is loaded. That is, as soon as the browser has parsed all of the HTML and created a tree of it internally. It does NOT wait for images, CSS, etc. to load. The DOM is all you usually need to run whatever Javascript you want, so it's nice to not have to wait for other resources. However, I believe only Firefox supports DOMContentLoaded; in other browsers, ready() will just attach an event to regular old onload.

Javascript is guaranteed to run in the order it appears in your HTML, so just make sure your function is defined before you try to attach it to an event.

Eevee
  • 47,412
  • 11
  • 95
  • 127
  • Very interesting. Thanks for the forward-looking perspective! – montrealist Aug 20 '09 at 20:08
  • Actually, while putting the scripts at the bottom helps, they still have to be executed before the page is loaded. Loading them asynchronically is much better, that means that even if you put them at the top, the browser will keep parsing the page and loading the script in parallel. The only problem is you would't know anymore in which order the scripts execute. – Jens Mar 22 '13 at 19:23
  • I tested an aspx page on IE9(emulated from developer tools) with scripts moved from beginning of to end of , and found the load times to be faster when scripts were inside head. recorded the loading videos to measure the user experience. No clear winner for me – mishal153 Jan 30 '16 at 12:19
7
  1. All the script includes happen in order that they appear in the html, they get loaded in as the html is parsed.
  2. It means ALL dom objects have been loaded, and all include scripts and css. (Images maybe not yet).
  3. see 2.
  4. $(document).ready() only gets call once all scripts and dom objects are loaded, you should be fine.
Zoidberg
  • 10,137
  • 2
  • 31
  • 53
4

http://javascript.about.com/od/hintsandtips/a/exeorder.htm should help you answer that

basically: first all the data is loaded (the html), then the js the code within the head/body which is not in a function or ready or something like that is executed first. from there it goes about the scripts sequentially

its important to note that js takes precedence over ie. css loading - so form a performance perspective you should have the js at the bottom of the page.

so @4: you dont need to prevent that scenarion because first.js is always being read/executed before last.js

Niko
  • 6,133
  • 2
  • 37
  • 49