Menu
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?
274
The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.
No, it can be anywhere.
A HTML file has headers and a "body" (payload) — just like a HTTP request. The <body> encapsulates the contents of the document, while the <head> part contains meta elements, i.e., information about the contents. This is (typically) title, encoding, author, styling etc.
HTML <head> Tag. The <head> tag contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user. Metadata provides browsers and search engines with technical information about the web page.
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.
167
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.”
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
