I am confused about which JavaScript should be included where?
For instance:
Where should one include the jQuery libraries? In the <head> or before the closing </body> element?
If the JavaScript is defined at the bottom in the <body>, can it be used inline in the body?
If it blocks parallel downloads, then why is it never said to include your CSS at the bottom?
The script elements block progressive page downloads.
Browsers download several components at a time, but when they encounter an external script, they stop further downloads until the script file is downloaded, parsed, and executed.
This hurts the overall page time, especially if it happens several times during a page load.
To minimize the blocking effect, you can place the script element toward the end of
the page, right before the closing tag.
This way there will be no other resources for the script to block.
The rest of the page components will be downloaded and already engaging the user.
The worst antipattern is to use separate files in the head of the document:
<!doctype html>
<html>
<head>
<title>My App</title>
<!-- ANTIPATTERN -->
<script src="jquery.js"></script>
<script src="jquery.quickselect.js"></script>
<script src="jquery.lightbox.js"></script>
<script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>
A better option is to combine all the files:
<!doctype html>
<html>
<head>
<title>My App</title>
<script src="all_20100426.js"></script>
</head>
<body>
...
</body>
</html>
And the best option is to put the combined script at the very end of the page:
<!doctype html>
<html>
<head>
<title>My App</title>
</head>
<body>
...
<script src="all_20100426.js"></script>
</body>
“JavaScript Patterns, by Stoyan Stefanov (O’Reilly). Copyright 2010 Yahoo!, Inc., 9780596806750.”
CSS is loaded in the <head> to prevent Flash Of Unstyled Content (FOUC), a situation where your page shows up with no styles for a split second. Loading them in the <head> is a minor sacrifice to ensure your page looks perfect when the content gets rendered.
JS is loaded at the bottom for several (but not limited to the following) reasons:
So that it does not block the loading of other resources and the rendering of the page.
The traditional use of JS is for enhancement, like client-side validation and minor special effects. These are usually optional and do not affect the overall purpose of the page. Therefore they are loaded last.
Adding scripts after the content ensures that the elements referred to by your scripts are safely accessed, because they're already on the DOM.
But there are some exceptions to the rule like:
"Pre-flight libraries" like Modernizr
Modernizr applies classes on the <html> tag to signify availability of features, which can be used for JS and CSS purposes. Delaying this might cause sudden shift of style due to class addition, as well as broken JS because checking wasn't done earlier.
CSS parsers like LESS/SASS and scripts that affect styles
Remote LESS/SASS styles are loaded via AJAX, therefore the page renders regardless if the styles are ready or not. Loading them in the head will make them load the styles as early as possible to avoid FOUC.
"Bootloader libraries" like RequireJS need to be loaded as early as possible to download the other scripts in parallel.
Web apps need JS as a platform. It's best you load these libraries early in the head. Besides, in a webapp, there is minimal page content before the app runs.
There are two attributes of script worth mentioning here as well, and they are defer and async.
Basically, the idea is that a script tag with defer runs only after the DOM is parsed, and script tags with async loads scripts asynchronously without blocking the other operations. It would be implied that you can use scripts in the head, apply async to load them in parallel, and defer to assure the DOM is ready when executed, but each has it's own problems.
Here's an MDN documentation explaining more about what they are and an answer that pretty much speaks about their history, support and current status.
FOBUC and what about in particular to jquery, its generally the base for all other scripts ! –
Amblygonite The script elements block progressive page downloads.
Browsers download several components at a time, but when they encounter an external script, they stop further downloads until the script file is downloaded, parsed, and executed.
This hurts the overall page time, especially if it happens several times during a page load.
To minimize the blocking effect, you can place the script element toward the end of
the page, right before the closing tag.
This way there will be no other resources for the script to block.
The rest of the page components will be downloaded and already engaging the user.
The worst antipattern is to use separate files in the head of the document:
<!doctype html>
<html>
<head>
<title>My App</title>
<!-- ANTIPATTERN -->
<script src="jquery.js"></script>
<script src="jquery.quickselect.js"></script>
<script src="jquery.lightbox.js"></script>
<script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>
A better option is to combine all the files:
<!doctype html>
<html>
<head>
<title>My App</title>
<script src="all_20100426.js"></script>
</head>
<body>
...
</body>
</html>
And the best option is to put the combined script at the very end of the page:
<!doctype html>
<html>
<head>
<title>My App</title>
</head>
<body>
...
<script src="all_20100426.js"></script>
</body>
“JavaScript Patterns, by Stoyan Stefanov (O’Reilly). Copyright 2010 Yahoo!, Inc., 9780596806750.”
© 2022 - 2024 — McMap. All rights reserved.
<head>. Besides, you would get FOUC if you loaded it last. Also, CSS does not affect the DOM as script does, which is why it can load in parallel. – Stonehenge<link>, regarding other methods: stevesouders.com/blog/2009/04/09/dont-use-import Also relevant: Is the recommendation to include CSS before JavaScript invalid? – Stonehenge