Why Javascript Runs When At Bottom Of Page Or Sometimes From Top Of Page
Solution 1:
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.
Solution 2:
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.
Solution 3:
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.
Solution 4:
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:
Post a Comment for "Why Javascript Runs When At Bottom Of Page Or Sometimes From Top Of Page"