When should I use the defer attribute on a <script> element in the <head> vs. using a <script> element at the end of the <body>?


When should I use the defer attribute on a <script> element in the <head> vs. using a <script> element at the end of the <body>?


Using both methods will allow the <script> to load and execute after the HTML has been parsed and loaded, and both methods retain the order of execution - meaning that <script> elements with or without the defer attribute will execute in the order in which they appear in the HTML document. However, at this point in time, more browsers support the use of the <script> element without the defer attribute than those that fully support the use of the defer attribute.

So, if you need to make sure your site or web application supports all browsers, including older browsers, using <script> at the end of the <body> may be the way to go.

Otherwise, defer should be used on <script> elements in the <head>. Using defer like this is potentially faster than using the <script> at the end of the body, as it loads the <script> asyncronosly but waits to execute the <script> until the HTML is parsed and loaded vs. using <script> at the end of the <body>, which will parse then load the HTML, then load the <script>, then execute the <script>.

Another gotcha when using defer - defer doesn’t play nicely with jQuery’s .ready() function. .ready() will execute as soon as the page is interactive (document.readyState === 'interactive') vs. when the page is complete (document.readyState === 'complete'). To make use of the defer attribute, jQuery would need to change it’s .ready() functionality to execute on document.readyState === 'complete' instead of on document.readyState === 'interactive' and without its current functionality, there would a lot of room for bugs when using the jQuery library, as is the case, jQuery has not been updated to fix this issue with defer. Numerous projects depend on .ready() firing when a page becomes interactive vs when it’s complete, updating jQuery to work with defer could potentally break these projects.


What if I used the keyword “defer” on multiple scripts? Which ones run last and how would I know? Thanks!


I thought the parsing stops at the


The scripts will be executed in order

<script src="./script1.js" defer></script>
<script src="./script2.js" defer></script>
<script src="./script3.js" defer></script>

It will simply execute the first script, then the second and finally the third


So simply, the tag can potentially be faster if used in the but may break code with such instances as jQuery unless it’s used at the bottom of . It almost seems aimless to use it anywhere to use it anywhere other than at the bottom of the ??

Update on the above answer by aubsrey. The defer attribute for external scripts seems to be almost universally supported by now (for 98%+ of users): defer attribute for external scripts | Can I use... Support tables for HTML5, CSS3, etc

1 Like

@aubsrey @heinzhorst Seems to me someone is Stackoverflow has tested with the updated Jquery and it is now working with defer attribute. I’m very new to this scene.

Can someone confirm on this link below?


First of all thanks for this wonderful explanation, My question is if I am using jquery in my project so should I use the script tag for the custom jquery(main.js) file before closing body tag because jquery is not good with the defer attribute.

jQuery should load first, before all other scripts. Move all the imports to the bottom of the body for greatest clarity and matching of expectations.

So if I wanted to be extra careful, I could put my script at the bottom of the body tag AND add defer? Wouldn’t that keep them fully backward and foreward compatible?

Also if you choose to put defer on a script— you’ve sort of made it !important so despite the order of scripts it becomes the one that displays if their is a conflict among the scripts, right?

Is this accurate?

If so, that sounds like a great way to do debugging of scripts on a page.

There would be no need to defer if it is at the bottom of the body. All the HTML will have been loaded and DOM constructed, and ready for scripting. Only the order in which multiple scripts are loaded would be a concern, especially if there are dependencies.