Best IT Recipes

JavaScript: DOM loading events, execution sequence, and $ (document) .ready ()

I just realized that I lacked fundamental knowledge about what exactly happens when a page loads into a browser.

Suppose 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 my questions:

  • In what sequence of events? First the DOM is executed, then the JS is executed, vice versa, or is it simultaneous (or as soon as the JS files finish loading, excluding the DOM)? I know that scripts load in order.

  • Where is $(document).ready() ? The Firebug Net tab displays the DOMContentLoaded event and the load event. $(document).ready() DOMContentLoaded when the DOMContentLoaded event DOMContentLoaded ? Could not find any specific information about this (everyone just mentions "when loading the DOM").

  • What exactly does it mean when the DOM loads? That all HTML / JS has been downloaded and parsed by the browser? Or just HTML?

  • Is the following scenario possible: is there $(document).ready() that calls the code in last.js but works before the last.js file is loaded? Where is it likely to be (in first.js or inline code block)? How to prevent this scenario?

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

+55
javascript jquery dom events
Aug 20 '09 at 18:14
source share
3 answers

Javascript is executing as seen. Typically, the browser stops parsing the page as soon as it sees the <script> , loads and runs the script, and then continues to work. This is why it is usually recommended to place <script> tags at the bottom: so the user does not have a blank page while the browser is waiting for scripts to load.

However, starting with Firefox 3.5, scripts load in the background while the rest of the page is displayed. In the unusual case when a script uses document.write or similar, Firefox will update and redraw if necessary. I don’t think that other browsers are doing this at the moment, but I won’t be surprised if this happens, and IE at least supports the defer attribute in the <script> , which defer loading the script until after the page loads.

DOMContentLoaded is exactly what: it starts as soon as the DOM loads. That is, as soon as the browser has analyzed all the HTML code and created its internal tree. It does NOT wait for images, CSS, etc. to load. The DOM is all you usually need to run any Javascript you need, so it's nice not to wait for other resources. However, I believe that only Firefox supports DOMContentLoaded ; in other browsers, ready() simply bind the event to the normal old onload .

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

+35
Aug 20 '09 at 18:26
source share
  • All scripts include so that they appear in html, they load when HTML is processed.
  • This means that all dom objects have been loaded, and all of them include scripts and css. (Images may not have been created yet).
  • see 2.
  • $ (document) .ready () receives a call only after loading all scripts and dom objects, everything should be fine.
+6
Aug 20 '09 at 18:18
source share

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

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

it is important to note that js has an advantage over ie. loading css - so you should have an idea of ​​performance, you should have js at the bottom of the page.

so @ 4: you don't need to prevent this script, because first.js is always read / executed until last.js

+4
Aug 20 '09 at 18:21
source share


More articles:


All Articles