Where should I put script tags in HTML markup

Question

When embedding JavaScript in an HTML document  where is the proper place to put the  lt script gt  tags and included JavaScript  I seem to recall that you are not supposed to place these in the  lt head gt  section  but placing at the beginning of the  lt body gt  section is bad  too  since the JavaScript will have to be parsed before the page is rendered completely  or something like that   This seems to leave the end of the  lt body gt  section as a logical place for  lt script gt  tags   So  where is the right place to put the  lt script gt  tags    This question references this question  in which it was suggested that JavaScript function calls should be moved from  lt a gt  tags to  lt script gt  tags  I m specifically using jQuery  but more general answers are also appropriate

User · Answer

Non-blocking script tags can be placed just about anywhere:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>

async script will be executed asynchronously as soon as it is available
defer script is executed when the document has finished parsing
async defer script falls back to the defer behavior if async is not supported

Such scripts will be executed asynchronously/after document ready, which means you cannot do this:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

Or this:

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

Or this:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

Or this:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

Having said that, asynchronous scripts offer these advantages:

Parallel download of resources:
Browser can download stylesheets, images and other scripts in parallel without waiting for a script to download and execute.
Source order independence:
You can place the scripts inside head or body without worrying about blocking (useful if you are using a CMS). Execution order still matters though.

It is possible to circumvent the execution order issues by using external scripts that support callbacks. Many third party JavaScript APIs now support non-blocking execution. Here is an example of loading the Google Maps API asynchronously.

User · Answer

The standard advice  promoted by the Yahoo  Exceptional Performance team  is to put the  lt script gt  tags at the end of the document body so they don t block rendering of the page   But there are some newer approaches that offer better performance  as described in this answer about the load time of the Google Analytics JavaScript file      There are some great slides by Steve Souders  client-side performance expert  about          Different techniques to load external JavaScript files in parallel   their effect on loading time and page rendering   what kind of  in progress  indicators the browser displays  e g   loading  in the status bar  hourglass mouse cursor

User · Answer

If you still care a lot about support and performance in IE lt 10  it s best to ALWAYS make your script tags the last tags of your HTML body  That way  you re certain that the rest of the DOM has been loaded and you won t block and rendering  If you don t care too much anymore about IE lt 10  you might want to put your scripts in the head of your document and use defer to ensure they only run after your DOM has been loaded   lt script type  text javascript  src  path to script1 js  defer gt  lt  script gt    If you still want your code to work in IE lt 10  don t forget to wrap your code in a window onload even  though

User · Answer

Depends  if you are loading a script that s necessary to style your page   using actions in your page  like click of a button  then you better place it on the top  If your styling is 100  CSS and you have all fallback options for the button actions then you can place it in the bottom   Or best thing  if that s not a concern  is you can make a modal loading box  place your javascript at the bottom of your page and make it disappear when the last line of your script gets loaded  This way you can avoid users using actions in your page before the scripts are loaded  And also avoid the improper styling

User · Answer

The best place to write your JavaScript code is at the end of the document after or right before the  lt  body gt  tag to load the document first and then execute js code    lt script gt      your code here      lt  script gt   lt  body gt    And if you write in JQuery the following can be in the head document and it will execute after the document loads    lt script gt    document  ready function         your code here         lt  script gt

User · Answer

Depends  if you are loading a script that s necessary to style your page   using actions in your page  like click of a button  then you better place it on the top  If your styling is 100  CSS and you have all fallback options for the button actions then you can place it in the bottom   Or best thing  if that s not a concern  is you can make a modal loading box  place your javascript at the bottom of your page and make it disappear when the last line of your script gets loaded  This way you can avoid users using actions in your page before the scripts are loaded  And also avoid the improper styling

User · Answer

Depending on the script and its usage the best possible  in terms of page load and rendering time  may be to not use a conventional  lt script gt -tag per se  but to dynamically trigger the loading of the script asynchronously   There are some different techniques  but the most straight forward is to use document createElement  script   when the window onload event is triggered  Then the script is loaded first when the page itself has rendered  thus not impacting the time the user has to wait for the page to appear   This naturally requires that the script itself is not needed for the rendering of the page   For more information  see the post Coupling async scripts by Steve Souders  creator of YSlow but now at Google

User · Answer

Including scripts at the end is mainly used where the content  styles of the website is to be shown first   including the scripts in the head loads the scripts early and can be used before the loading of the whole web site   if the scripts are entered at last the validation will happen only after the loading of the entire styles and design which is not appreciated for fast responsive websites

User · Answer

Here s what happens when a browser loads a website with a  lt script gt  tag on it    Fetch the HTML page  e g  index html  Begin parsing the HTML The parser encounters a  lt script gt  tag referencing an external script file  The browser requests the script file  Meanwhile  the parser blocks and stops parsing the other HTML on your page  After some time the script is downloaded and subsequently executed  The parser continues parsing the rest of the HTML document    Step  4 causes a bad user experience  Your website basically stops loading until you ve downloaded all scripts  If there s one thing that users hate it s waiting for a website to load   Why does this even happen   Any script can insert its own HTML via document write   or other DOM manipulations  This implies that the parser has to wait until the script has been downloaded  amp  executed before it can safely parse the rest of the document  After all  the script could have inserted its own HTML in the document   However  most JavaScript developers no longer manipulate the DOM while the document is loading  Instead  they wait until the document has been loaded before modifying it  For example    lt  -- index html -- gt   lt html gt       lt head gt           lt title gt My Page lt  title gt           lt script src  my-script js  gt  lt  script gt       lt  head gt       lt body gt           lt div id  user-greeting  gt Welcome back  user lt  div gt       lt  body gt   lt  html gt    Javascript      my-script js document addEventListener  DOMContentLoaded   function             this function runs when the DOM is ready  i e  when the document has been parsed     document getElementById  user-greeting   textContent    Welcome back  Bart         Because your browser does not know my-script js isn t going to modify the document until it has been downloaded  amp  executed  the parser stops parsing   Antiquated recommendation  The old approach to solving this problem was to put  lt script gt  tags at the bottom of your  lt body gt   because this ensures the parser isn t blocked until the very end    This approach has its own problem  the browser cannot start downloading the scripts until the entire document is parsed  For larger websites with large scripts  amp  stylesheets  being able to download the script as soon as possible is very important for performance  If your website doesn t load within 2 seconds  people will go to another website   In an optimal solution  the browser would start downloading your scripts as soon as possible  while at the same time parsing the rest of your document   The modern approach  Today  browsers support the async and defer attributes on scripts  These attributes tell the browser it s safe to continue parsing while the scripts are being downloaded   async   lt script src  path to script1 js  async gt  lt  script gt   lt script src  path to script2 js  async gt  lt  script gt    Scripts with the async attribute are executed asynchronously  This means the script is executed as soon as it s downloaded  without blocking the browser in the meantime  This implies that it s possible to script 2 is downloaded  amp  executed before script 1     According to http   caniuse com  feat script-async  97 78  of all browsers support this   defer   lt script src  path to script1 js  defer gt  lt  script gt   lt script src  path to script2 js  defer gt  lt  script gt    Scripts with the defer attribute are executed in order  i e  first script 1  then script 2   This also does not block the browser   Unlike async scripts  defer scripts are only executed after the entire document has been loaded   According to http   caniuse com  feat script-defer  97 79  of all browsers support this  98 06  support it at least partially   An important note on browser compatibility  in some circumstances IE  lt   9 may execute deferred scripts out of order  If you need to support those browsers  please read this first   Conclusion  The current state-of-the-art is to put scripts in the  lt head gt  tag and use the async or defer attributes  This allows your scripts to be downloaded asap without blocking your browser   The good thing is that your website should still load correctly on the 2  of browsers that do not support these attributes while speeding up the other 98

User · Answer

I think it depends on the webpage execution  If the page that you want to display can not displayed properly  without loading JavaScript first then  you should include JavaScript file first  But If you can display render a webpage without initially download JavaScript file  then you should put JavaScript code at the bottom of the page  Because it will emulate a speedy page load  and from an user s point of view it would seems like that page is loading faster

User · Answer

If you are using JQuery then put the javascript wherever you find it best and use   document  ready   to ensure that things are loaded properly before executing any functions   On a side note  I like all my script tags in the  lt head gt  section as that seems to be the cleanest place

User · Answer

The standard advice  promoted by the Yahoo  Exceptional Performance team  is to put the  lt script gt  tags at the end of the document body so they don t block rendering of the page   But there are some newer approaches that offer better performance  as described in this answer about the load time of the Google Analytics JavaScript file      There are some great slides by Steve Souders  client-side performance expert  about          Different techniques to load external JavaScript files in parallel   their effect on loading time and page rendering   what kind of  in progress  indicators the browser displays  e g   loading  in the status bar  hourglass mouse cursor

User · Answer

XHTML Won t Validate if the script is anywhere other than within the head element  turns out it can be everywhere   You can defer the execution with something like jQuery so it doesn t matter where it s placed  except for a small performance hit during parsing

User · Answer

XHTML Won t Validate if the script is anywhere other than within the head element  turns out it can be everywhere   You can defer the execution with something like jQuery so it doesn t matter where it s placed  except for a small performance hit during parsing

User · Answer

XHTML Won t Validate if the script is anywhere other than within the head element  turns out it can be everywhere   You can defer the execution with something like jQuery so it doesn t matter where it s placed  except for a small performance hit during parsing

User · Answer

Script blocks DOM load untill it s loaded and executed   If you place scripts at the end of  lt body gt  all of DOM has chance to load and render  page will  display  faster    lt script gt  will have access to all of those DOM elements   In other hand placing it after  lt body gt  start or above will execute script  where there s still no DOM elements    You are including jQuery which means you can place it wherever you wish and use  ready

User · Answer

lt script src  quot myjs js quot  gt  lt  script gt   lt  body gt   script tag should be use always before body  close or Bottom in HTML file  Page will load with html and css and later js will load  check this if require   http   stevesouders com hpws rule-js-bottom php

User · Answer

lt script src  quot myjs js quot  gt  lt  script gt   lt  body gt   script tag should be use always before body  close or Bottom in HTML file  Page will load with html and css and later js will load  check this if require   http   stevesouders com hpws rule-js-bottom php

User · Answer

The conventional  and widely accepted  answer is  at the bottom   because then the entire DOM will have been loaded before anything can start executing   There are dissenters  for various reasons  starting with the available practice to intentionally begin execution with a page onload event

User · Answer

If you are using JQuery then put the javascript wherever you find it best and use   document  ready   to ensure that things are loaded properly before executing any functions   On a side note  I like all my script tags in the  lt head gt  section as that seems to be the cleanest place

User · Answer

You can add JavaScript code in an HTML document by employing the dedicated HTML tag  lt script gt  that wraps around JavaScript code  The  lt script gt  tag can be placed in the  lt head gt  section of your HTML  in the  lt body gt  section  or after the  lt  body gt  close tag  depending on when you want the JavaScript to load  Generally  JavaScript code can go inside of the document  lt head gt  section in order to keep them contained and out of the main content of your HTML document  However  if your script needs to run at a certain point within a page   s layout     like when using document write to generate content     you should put it at the point where it should be called  usually within the  lt body gt  section

User · Answer

Here s what happens when a browser loads a website with a  lt script gt  tag on it    Fetch the HTML page  e g  index html  Begin parsing the HTML The parser encounters a  lt script gt  tag referencing an external script file  The browser requests the script file  Meanwhile  the parser blocks and stops parsing the other HTML on your page  After some time the script is downloaded and subsequently executed  The parser continues parsing the rest of the HTML document    Step  4 causes a bad user experience  Your website basically stops loading until you ve downloaded all scripts  If there s one thing that users hate it s waiting for a website to load   Why does this even happen   Any script can insert its own HTML via document write   or other DOM manipulations  This implies that the parser has to wait until the script has been downloaded  amp  executed before it can safely parse the rest of the document  After all  the script could have inserted its own HTML in the document   However  most JavaScript developers no longer manipulate the DOM while the document is loading  Instead  they wait until the document has been loaded before modifying it  For example    lt  -- index html -- gt   lt html gt       lt head gt           lt title gt My Page lt  title gt           lt script src  my-script js  gt  lt  script gt       lt  head gt       lt body gt           lt div id  user-greeting  gt Welcome back  user lt  div gt       lt  body gt   lt  html gt    Javascript      my-script js document addEventListener  DOMContentLoaded   function             this function runs when the DOM is ready  i e  when the document has been parsed     document getElementById  user-greeting   textContent    Welcome back  Bart         Because your browser does not know my-script js isn t going to modify the document until it has been downloaded  amp  executed  the parser stops parsing   Antiquated recommendation  The old approach to solving this problem was to put  lt script gt  tags at the bottom of your  lt body gt   because this ensures the parser isn t blocked until the very end    This approach has its own problem  the browser cannot start downloading the scripts until the entire document is parsed  For larger websites with large scripts  amp  stylesheets  being able to download the script as soon as possible is very important for performance  If your website doesn t load within 2 seconds  people will go to another website   In an optimal solution  the browser would start downloading your scripts as soon as possible  while at the same time parsing the rest of your document   The modern approach  Today  browsers support the async and defer attributes on scripts  These attributes tell the browser it s safe to continue parsing while the scripts are being downloaded   async   lt script src  path to script1 js  async gt  lt  script gt   lt script src  path to script2 js  async gt  lt  script gt    Scripts with the async attribute are executed asynchronously  This means the script is executed as soon as it s downloaded  without blocking the browser in the meantime  This implies that it s possible to script 2 is downloaded  amp  executed before script 1     According to http   caniuse com  feat script-async  97 78  of all browsers support this   defer   lt script src  path to script1 js  defer gt  lt  script gt   lt script src  path to script2 js  defer gt  lt  script gt    Scripts with the defer attribute are executed in order  i e  first script 1  then script 2   This also does not block the browser   Unlike async scripts  defer scripts are only executed after the entire document has been loaded   According to http   caniuse com  feat script-defer  97 79  of all browsers support this  98 06  support it at least partially   An important note on browser compatibility  in some circumstances IE  lt   9 may execute deferred scripts out of order  If you need to support those browsers  please read this first   Conclusion  The current state-of-the-art is to put scripts in the  lt head gt  tag and use the async or defer attributes  This allows your scripts to be downloaded asap without blocking your browser   The good thing is that your website should still load correctly on the 2  of browsers that do not support these attributes while speeding up the other 98

User · Answer

Non-blocking script tags can be placed just about anywhere:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>

async script will be executed asynchronously as soon as it is available
defer script is executed when the document has finished parsing
async defer script falls back to the defer behavior if async is not supported

Such scripts will be executed asynchronously/after document ready, which means you cannot do this:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

Or this:

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

Or this:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

Or this:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

Having said that, asynchronous scripts offer these advantages:

Parallel download of resources:
Browser can download stylesheets, images and other scripts in parallel without waiting for a script to download and execute.
Source order independence:
You can place the scripts inside head or body without worrying about blocking (useful if you are using a CMS). Execution order still matters though.

It is possible to circumvent the execution order issues by using external scripts that support callbacks. Many third party JavaScript APIs now support non-blocking execution. Here is an example of loading the Google Maps API asynchronously.

User · Answer

I think it depends on the webpage execution  If the page that you want to display can not displayed properly  without loading JavaScript first then  you should include JavaScript file first  But If you can display render a webpage without initially download JavaScript file  then you should put JavaScript code at the bottom of the page  Because it will emulate a speedy page load  and from an user s point of view it would seems like that page is loading faster

User · Answer

If you are using JQuery then put the javascript wherever you find it best and use   document  ready   to ensure that things are loaded properly before executing any functions   On a side note  I like all my script tags in the  lt head gt  section as that seems to be the cleanest place

User · Answer

The conventional  and widely accepted  answer is  at the bottom   because then the entire DOM will have been loaded before anything can start executing   There are dissenters  for various reasons  starting with the available practice to intentionally begin execution with a page onload event

User · Answer

Depending on the script and its usage the best possible  in terms of page load and rendering time  may be to not use a conventional  lt script gt -tag per se  but to dynamically trigger the loading of the script asynchronously   There are some different techniques  but the most straight forward is to use document createElement  script   when the window onload event is triggered  Then the script is loaded first when the page itself has rendered  thus not impacting the time the user has to wait for the page to appear   This naturally requires that the script itself is not needed for the rendering of the page   For more information  see the post Coupling async scripts by Steve Souders  creator of YSlow but now at Google

User · Answer

XHTML Won t Validate if the script is anywhere other than within the head element  turns out it can be everywhere   You can defer the execution with something like jQuery so it doesn t matter where it s placed  except for a small performance hit during parsing

User · Answer

The conventional  and widely accepted  answer is  at the bottom   because then the entire DOM will have been loaded before anything can start executing   There are dissenters  for various reasons  starting with the available practice to intentionally begin execution with a page onload event

User · Answer

The best place to put  lt script gt  tag is before closing  lt  body gt  tag  so the downloading and executing it doesn t block the browser to parse the html in document   Also loading the js files externally has it s own advantages like it will be cached by browsers and can speed up page load times  it separates the HTML and JavaScript code and help to manage the code base better   but modern browsers also support some other optimal ways like async and defer to load external javascript files   Async and Defer  Normally HTML page execution starts line by line  When an external JavaScript  element is encountered  HTML parsing is stopped until a JavaScript is download and ready for execution  This normal page execution can be changed using defer and async attribute   Defer  When a defer attribute is used  JavaScript is downloaded parallelly with HTML parsing but  will be execute only after full HTML parsing is done    lt script src   local-js-path myScript js  defer gt  lt  script gt    Async  When async attribute is used   JavaScript is downloaded as soon as the script is encountered and after the download  it will be executed asynchronously  parallelly  along with HTML parsing    lt script src   local-js-path myScript js  async gt  lt  script gt    When to use which attributes   If your script is  independent of other scripts and is modular  use      async  If you are loading script1 and script2 with async  both will run parallelly along with HTML parsing  as soon as they are downloaded and available  If your script depends on another script then use defer for both  When script1 and script2 are loaded in that order with defer  then script1 is guaranteed to execute first  Then script2 will execute after script1 is fully executed  Must do this if script2 depends on script1  If your script is small enough and is depended by another script  of type async then use your script with no attributes and place it above all the async scripts    reference knowledgehills com

User · Answer

Just before the closing body tag  as stated on http   developer yahoo com performance rules html js bottom  Put Scripts at the Bottom The problem caused by scripts is that they block parallel downloads  The HTTP 1 1 specification suggests that browsers download no more than two components in parallel per hostname  If you serve your images from multiple hostnames  you can get more than two downloads to occur in parallel  While a script is downloading  however  the browser won t start any other downloads  even on different hostnames

User · Answer

You can place most of  lt script gt  references at the end of  lt body gt   But If there are active components on your page which are using external scripts  then their dependency  js files  should come before that  ideally in head tag

User · Answer

Depending on the script and its usage the best possible  in terms of page load and rendering time  may be to not use a conventional  lt script gt -tag per se  but to dynamically trigger the loading of the script asynchronously   There are some different techniques  but the most straight forward is to use document createElement  script   when the window onload event is triggered  Then the script is loaded first when the page itself has rendered  thus not impacting the time the user has to wait for the page to appear   This naturally requires that the script itself is not needed for the rendering of the page   For more information  see the post Coupling async scripts by Steve Souders  creator of YSlow but now at Google

User · Answer

The standard advice  promoted by the Yahoo  Exceptional Performance team  is to put the  lt script gt  tags at the end of the document body so they don t block rendering of the page   But there are some newer approaches that offer better performance  as described in this answer about the load time of the Google Analytics JavaScript file      There are some great slides by Steve Souders  client-side performance expert  about          Different techniques to load external JavaScript files in parallel   their effect on loading time and page rendering   what kind of  in progress  indicators the browser displays  e g   loading  in the status bar  hourglass mouse cursor

User · Answer

Just before the closing body tag  as stated on http   developer yahoo com performance rules html js bottom  Put Scripts at the Bottom The problem caused by scripts is that they block parallel downloads  The HTTP 1 1 specification suggests that browsers download no more than two components in parallel per hostname  If you serve your images from multiple hostnames  you can get more than two downloads to occur in parallel  While a script is downloading  however  the browser won t start any other downloads  even on different hostnames

User · Answer

You can add JavaScript code in an HTML document by employing the dedicated HTML tag  lt script gt  that wraps around JavaScript code  The  lt script gt  tag can be placed in the  lt head gt  section of your HTML  in the  lt body gt  section  or after the  lt  body gt  close tag  depending on when you want the JavaScript to load  Generally  JavaScript code can go inside of the document  lt head gt  section in order to keep them contained and out of the main content of your HTML document  However  if your script needs to run at a certain point within a page   s layout     like when using document write to generate content     you should put it at the point where it should be called  usually within the  lt body gt  section

User · Answer

It makes more sense to me to include the script  after the HTML  Because most of the time I need the Dom to load before I execute my script  I could put it in the head tag but I don t like all the Document loading listener overhead  I want my code to be short and sweet and easy to read     I ve heard old versions of safari was quarky when adding your script outside of the head tag but I say who cares  I don t know anybody using that old crap do you   Good question by the way

User · Answer

Script blocks DOM load untill it s loaded and executed   If you place scripts at the end of  lt body gt  all of DOM has chance to load and render  page will  display  faster    lt script gt  will have access to all of those DOM elements   In other hand placing it after  lt body gt  start or above will execute script  where there s still no DOM elements    You are including jQuery which means you can place it wherever you wish and use  ready

User · Answer

The modern approach in 2019 is using ES6 module type scripts    lt script type  module  src       gt  lt  script gt    By default  modules are loaded asynchronously and defered  i e  you can place them anywhere and they will load in parallel and execute when the page finishes loading    The differences between a script and a module are described here   https   stackoverflow com a 53821485 731548  The execution of a module compared to a script is described here   https   developers google com web fundamentals primers modules defer  Support is shown here   https   caniuse com  feat es6-module

User · Answer

It makes more sense to me to include the script  after the HTML  Because most of the time I need the Dom to load before I execute my script  I could put it in the head tag but I don t like all the Document loading listener overhead  I want my code to be short and sweet and easy to read     I ve heard old versions of safari was quarky when adding your script outside of the head tag but I say who cares  I don t know anybody using that old crap do you   Good question by the way

User · Answer

The conventional  and widely accepted  answer is  at the bottom   because then the entire DOM will have been loaded before anything can start executing   There are dissenters  for various reasons  starting with the available practice to intentionally begin execution with a page onload event

User · Answer

Just before the closing body tag  as stated on http   developer yahoo com performance rules html js bottom  Put Scripts at the Bottom The problem caused by scripts is that they block parallel downloads  The HTTP 1 1 specification suggests that browsers download no more than two components in parallel per hostname  If you serve your images from multiple hostnames  you can get more than two downloads to occur in parallel  While a script is downloading  however  the browser won t start any other downloads  even on different hostnames

User · Answer

If you still care a lot about support and performance in IE lt 10  it s best to ALWAYS make your script tags the last tags of your HTML body  That way  you re certain that the rest of the DOM has been loaded and you won t block and rendering  If you don t care too much anymore about IE lt 10  you might want to put your scripts in the head of your document and use defer to ensure they only run after your DOM has been loaded   lt script type  text javascript  src  path to script1 js  defer gt  lt  script gt    If you still want your code to work in IE lt 10  don t forget to wrap your code in a window onload even  though

User · Answer

The standard advice  promoted by the Yahoo  Exceptional Performance team  is to put the  lt script gt  tags at the end of the document body so they don t block rendering of the page   But there are some newer approaches that offer better performance  as described in this answer about the load time of the Google Analytics JavaScript file      There are some great slides by Steve Souders  client-side performance expert  about          Different techniques to load external JavaScript files in parallel   their effect on loading time and page rendering   what kind of  in progress  indicators the browser displays  e g   loading  in the status bar  hourglass mouse cursor

User · Answer

The best place to put  lt script gt  tag is before closing  lt  body gt  tag  so the downloading and executing it doesn t block the browser to parse the html in document   Also loading the js files externally has it s own advantages like it will be cached by browsers and can speed up page load times  it separates the HTML and JavaScript code and help to manage the code base better   but modern browsers also support some other optimal ways like async and defer to load external javascript files   Async and Defer  Normally HTML page execution starts line by line  When an external JavaScript  element is encountered  HTML parsing is stopped until a JavaScript is download and ready for execution  This normal page execution can be changed using defer and async attribute   Defer  When a defer attribute is used  JavaScript is downloaded parallelly with HTML parsing but  will be execute only after full HTML parsing is done    lt script src   local-js-path myScript js  defer gt  lt  script gt    Async  When async attribute is used   JavaScript is downloaded as soon as the script is encountered and after the download  it will be executed asynchronously  parallelly  along with HTML parsing    lt script src   local-js-path myScript js  async gt  lt  script gt    When to use which attributes   If your script is  independent of other scripts and is modular  use      async  If you are loading script1 and script2 with async  both will run parallelly along with HTML parsing  as soon as they are downloaded and available  If your script depends on another script then use defer for both  When script1 and script2 are loaded in that order with defer  then script1 is guaranteed to execute first  Then script2 will execute after script1 is fully executed  Must do this if script2 depends on script1  If your script is small enough and is depended by another script  of type async then use your script with no attributes and place it above all the async scripts    reference knowledgehills com

User · Answer

Depending on the script and its usage the best possible  in terms of page load and rendering time  may be to not use a conventional  lt script gt -tag per se  but to dynamically trigger the loading of the script asynchronously   There are some different techniques  but the most straight forward is to use document createElement  script   when the window onload event is triggered  Then the script is loaded first when the page itself has rendered  thus not impacting the time the user has to wait for the page to appear   This naturally requires that the script itself is not needed for the rendering of the page   For more information  see the post Coupling async scripts by Steve Souders  creator of YSlow but now at Google

User · Answer

Just before the closing body tag  as stated on http   developer yahoo com performance rules html js bottom  Put Scripts at the Bottom The problem caused by scripts is that they block parallel downloads  The HTTP 1 1 specification suggests that browsers download no more than two components in parallel per hostname  If you serve your images from multiple hostnames  you can get more than two downloads to occur in parallel  While a script is downloading  however  the browser won t start any other downloads  even on different hostnames

User · Answer

If you are using JQuery then put the javascript wherever you find it best and use   document  ready   to ensure that things are loaded properly before executing any functions   On a side note  I like all my script tags in the  lt head gt  section as that seems to be the cleanest place

User · Answer

The best place to write your JavaScript code is at the end of the document after or right before the  lt  body gt  tag to load the document first and then execute js code    lt script gt      your code here      lt  script gt   lt  body gt    And if you write in JQuery the following can be in the head document and it will execute after the document loads    lt script gt    document  ready function         your code here         lt  script gt

User · Answer

The modern approach in 2019 is using ES6 module type scripts    lt script type  module  src       gt  lt  script gt    By default  modules are loaded asynchronously and defered  i e  you can place them anywhere and they will load in parallel and execute when the page finishes loading    The differences between a script and a module are described here   https   stackoverflow com a 53821485 731548  The execution of a module compared to a script is described here   https   developers google com web fundamentals primers modules defer  Support is shown here   https   caniuse com  feat es6-module

User · Answer

Including scripts at the end is mainly used where the content  styles of the website is to be shown first   including the scripts in the head loads the scripts early and can be used before the loading of the whole web site   if the scripts are entered at last the validation will happen only after the loading of the entire styles and design which is not appreciated for fast responsive websites

User · Answer

You can place most of  lt script gt  references at the end of  lt body gt   But If there are active components on your page which are using external scripts  then their dependency  js files  should come before that  ideally in head tag

[javascript] Where should I put <script> tags in HTML markup?

Examples related to javascript

Examples related to jquery

Examples related to html