It seems that many people are confused about how DOM is loaded and what order it does. I will try to clarify how your scripts are loaded and how it should affect your development.

First thing people need to be aware is where to include their scripts. There is a significant difference between placing your script in your head tag versus including them in your body near the bottom. This what actually happens:

  • If you include your scripts inside your head tag, browser will try to fetch your assets (stylesheets, images, javascripts, etc..) in the order it sees them and only after all of them downloaded it will finish loading your DOM. This means that you will see a blank page until you finish downloading all those files. Browsers have limitations when they try to download. They can only download 2 files at a time (of course this value slightly varies between browsers). This is why you notice the blank screen where your browsers waits until all the assets are fetched in order to go ahead and populate your screen with your HTML. This becomes very irritating as you spend a few seconds looking at a blank screen before you see anything.

  • But if you place your script tags near the bottom of your HTML, the browser will get a chance to go through your HTML and start populating your screen with the content until it ever reaches those script files. This is a great plus if you care about improving usability. Your users will start to see what your page looks like instantly

This is how your page should be structured like:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="style2.css">
</head>
<body>
  <div>You will have lots of html here....</div>

  <script src="jquery.js"></script>
  <script src="....js"></script>
</body>
</html>

Briefly this is the process your browser goes through:

  1. Browser will start fetching my Stylesheets
  2. Move down the HTML. start populating display with HTML.
  3. Move down to fetch the JavaScript from server
  4. Once fetched execute them.

Amazing, already looking good. But this article was about correct use of .ready() and .load() right? Yes, you are right. But where you place your script makes a huge difference and I wanted to clarify that first.

As you may know .ready() method allows the developer to run a piece of javascript code when the DOM is ready (or when its been parsed and populated) and only when it is ready.

As I explained above, if you place your javascript below your HTML, it will execute after your DOM has been populated and therefore you will not have to wait for your DOM to populate. Makes sense right? By the time you reach your scripts everything will be ready for and there is no need to use the .ready() method to wait for your DOM to be ready. I see a lot of people making these mistake and cluttering their code with unnecessary stuff.

There might be some edge cases where you could be doing some fancy things and your DOM might not be in the status you expect it to be for whatever reason. Then it is acceptable use the .ready() method in that scenario.

.load() method diffirentiates from .ready() where assets could be fetched from the server but has not got a chance to load on the screen yet. This is usually the case for images. They get downloaded but it might take a while to render them on the screen. This is when .load() becomes very useful and you can use it pretty much anywhere in your code to wait for those images to load and do something with it.

Lets see some good and bad examples:

This is a BAD EXAMPLE:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="style2.css">
  <script src="jquery.js"></script>
  <script src="....js"></script>
  <script>
      $('#content').doSomeStuffToThisDOMElement();
  </script>
</head>
<body>
  <div id="content">You will have lots of html here....</div>
</body>
</html>

The code above is trying to access a DOM element (the div with the id #content) before it is been populated. Therefore it is going to fail.

Somewhat BAD EXAMPLE”

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="style2.css">
</head>
<body>
  <div id="content">You will have lots of html here....</div>


  <script src="jquery.js"></script>
  <script src="....js"></script>
  <script>
    $(document).ready(function() {
      $('#content').doSomeStuffToThisDOMElement();
    });
  </script>
</body>
</html>

The code above is actually going to work, but it has unnecessary syntax surrounding it. The div#content element has already been populated and is ready to work on. At this point we don’t need to wait for DOM to be ready anymore.

The Final and the CORRECT EXAMPLE:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="style2.css">
</head>
<body>
  <div id="content">You will have lots of html here....</div>


  <script src="jquery.js"></script>
  <script src="....js"></script>
  <script>
      $('#content').doSomeStuffToThisDOMElement();
  </script>
</body>
</html>

The bottom line is you need to know how and when your DOM is loaded to make your life easier.