why javascript runs when at bottom of page or sometimes from top of page

Question

I have been using templates such as bootstrap templates for a while and as i try to modify or add more script, i always encounter these two scenario

SCENARIO 1: in some templates, the scripts only works when they are placed at the top i.e. head. but does not work while at the bottom of the elements

<head>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>

</head>

<body>

    <div class="content">
        <!--elements that require scripts i.e. forms and button-->
    </div>
<footer>


</footer>
</body>

SCENARIO 2: in some templates, the scripts only works when they are placed at the bottom i.e. footer. but does not work when placed at the top of the elements

<head>

</head>

<body>

    <div class="content">
        <!--elements that require scripts i.e. forms and button-->
    </div>
<footer>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>


</footer>
</body>

I rely wanted to understand the idea behind these scenarios. What is it that causes such behavior? Or what should one consider?

@8protons i have seen the reference but my question is not asking for the best place to put script tags. i just want to understand why the difference of some script no working — Omari Victor Omosa, Mar 25 '16 at 22:15
@8protons It's not really a duplicate of that question, but that link is a good one to read! Thanks for the link! — Clomp, Mar 25 '16 at 22:18

Sebastian Simon · Accepted Answer · 2018-06-27T20:26:26.213

The placement of scripts indicates dependencies: if script A needs some values from script B, then script B is placed above script A. For example: some JavaScript requires jQuery, so you place jQuery above any script that requires it.

That’s because scripts run from top to bottom.

Some scripts require the DOM to be loaded, e.g. they operate on some HTML elements, i.e. they use document.getElementById or $("selector"). In those cases the HTML elements are required by the script, so those elements need to be above the JavaScript that requires them, or in other words, the JavaScript that requires some HTML elements needs to be placed below those.

There are other options for dealing with this, e.g. utilizing window.addEventListener("DOMContentLoaded", function(){…}) or jQuery’s $(document).ready(function(){…}). These options add event listeners that run later, whenever an event is fired.

Another, newer alternative is the defer attribute.

More details at Why does jQuery or a DOM method such as getElementById not find the element?.

Sometimes, scripts are also put at the bottom to load the content of the page faster, because the scripts have to be downloaded and the content is only loaded after the scripts. You could use the async attribute as an alternative to that.

score 1 · Answer 2 · answered Mar 25 '16 at 21:50

Javascript runs one thing at a time. Generally it runs code at the top first. Therefore you cannot ask for variables or functions before code has run that declares them. ex:

<script> var one = 1 </script>
<script> console.log(one) </script>

will log out 1 however:

<script> console.log(one) </script>
<script> var one = 1 </script>

will log out undefined.

In your example, I assume that the code broke because it needed jquery but jquery was loaded after the code tried to run.

score 1 · Answer 3 · answered Mar 25 '16 at 22:11

JavaScript is a single threaded programming environment. When loading multiple scripts at the top of the head tag, the rest of the script tags below it are blocked until that script tag loads. If one script tag can't be loaded, then all of the rest of them get stuck... until the browser times out for that script tag. To get around this blocking problem, developers have been moving script tags to the bottom of the web page over the past few years.

The problem is really noticeable when a site has a lot of JS files which are at the top of the page & are being loaded from 3rd, 4th, 5th, through N-th party ad vendors servers. When an ad vendor's server goes offline, where their ads can't be served up anymore - which happens quite often - then the JS on the page sits & waits for the browser to time-out. This causes the page to appear to be stuck while loading. That creates a poor user experience.

The developer trick of moving script tags to the bottom of the page, helps alleviate those 2 problems. It also makes web pages load faster & be usable sooner for both users & search bots. Because search engine bots care about page load time, they can give websites a boost when their web pages load rapidly.

So it's important to move script tags to the bottom of the page, whenever possible.

The problem is not the page loading faster. The problem is the elements not working e.g. buttons activated by javascript. others work when the script are on top of them while others work when they are at the bottom of the elements — Omari Victor Omosa, Mar 25 '16 at 22:24
Some of the jQuery code can be written without the wrapping page loading function. So it's looking for $('.content'), without including $(function() { $('.content') }); The latter code example will wait for the entire DOM to load, before it runs jQuery on it. If you were to add a debugger into the jQuery library, the page would most likely be blank when the — Clomp, Mar 25 '16 at 22:36

score 1 · Answer 4 · edited May 23 '17 at 11:59

I found two old answers on Stack overflow about this topic.

Top: When having JavaScript events function on elements immediately is more important (so if you use a DOM Ready event to load everything, this is the wrong place)

Bottom: When loading the content is more important

As @Quentin said 6 years ago: When do you choose to load your javascript at the bottom of the page instead of the top?

I would add something else but I think that one is clear enough, and if is not there is another answer about this topic:

Should Jquery code go in header or footer?

why javascript runs when at bottom of page or sometimes from top of page

4 Answers4

Linked

Related