Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What JavaScript should be included in the <head> and what included in the <body>? [closed]

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?

like image 274
Yugal Jindle Avatar asked May 19 '12 02:05

Yugal Jindle


People also ask

Should JavaScript be in head or body?

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.

Does JavaScript have to be in head?

No, it can be anywhere.

What different content goes in head and body >?

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.

What should be included in a head in HTML?

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.


2 Answers

CSS

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

General Case:

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.

Exceptions:

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.

Edge Cases:

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.

like image 167
Joseph Avatar answered Sep 21 '22 10:09

Joseph


The Place of the <script> Element

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.”

like image 26
user278064 Avatar answered Sep 23 '22 10:09

user278064