Does the – Daniel Sokolowski Nov 18 '15 at 23:51

Question

Script elements at the top of the document are available sooner (so you can bind event handlers and have JS run as soon as an element becomes available), but they do block parsing of the rest of the page.

Script elements at the bottom aren't (so you can't) and there isn't any significant page left, so it doesn't matter if that is blocked.

Which is best depends on the relative ~~importance~~ priority (which has to be determined on a case-by-case basis) of having the JS running Vs. having the HTML rendering.

Note that a script element at the bottom must appear inside the body element. So it should be:

<script>...</script></body></html>

and not

</body><script>...</script></html>

Quentin · Answer 1 · 2010-12-09T10:05:51.943

Script elements at the top of the document are available sooner (so you can bind event handlers and have JS run as soon as an element becomes available), but they do block parsing of the rest of the page.

Script elements at the bottom aren't (so you can't) and there isn't any significant page left, so it doesn't matter if that is blocked.

Which is best depends on the relative ~~importance~~ priority (which has to be determined on a case-by-case basis) of having the JS running Vs. having the HTML rendering.

Note that a script element at the bottom must appear inside the body element. So it should be:

<script>...</script></body></html>

and not

</body><script>...</script></html>

score 13 · Answer 2 · answered Dec 09 '10 at 10:09

Yes, it does affect the performance of the web page.

The problem with JavaScript is that is blocks the execution/loading of the rest of the page. If you have something that takes a long time in your JavaScript then it will prevent the rest of the page from loading:

See these examples:

Script at top, blocks whole page: http://jsfiddle.net/jonathon/wcQqn/
Script in the middle, blocks bottom: http://jsfiddle.net/jonathon/wcQqn/1
Script at bottom, blocks nothing: http://jsfiddle.net/jonathon/wcQqn/3/

You can see the effect the alert has on the rendering of the rest of the page. Any JavaScript that you put into the top of your page will have the same effect. In general, it is better to put anything critical to the layout of your page (i.e. menu plugins or something). Anything that requires a user interaction (popup handlers) or doesn't involve the user at all (Google Analytics) should go to the bottom of the page.

You can get lazy loaders that will inject your script tags into your code. Since the code isn't on the HTML, you can be sure that your whole page has rendered correctly and that the JS you're including will not block anything.

In Safari 8 each of those examples is exactly the same and the alert blocks everything. — Daniel Wood, Feb 19 '15 at 10:42
This code example shows how modern browser works which [above answer](https://stackoverflow.com/a/21482906/5125954) describes. — kidkkr, Mar 03 '19 at 04:39

score 6 · Answer 3 · answered Dec 09 '10 at 10:01

6

Yes, it does affect the performance of the webpage loading.

The problem is, normal <script> tags are blocking so everything after the script tag has to wait till the script tag is done loading and parsing before the rest of the page can load.

Now someone will probably note that if you use async="true" in your script tag, it won't block. But that's only supported by a couple of browsers yet so that won't help the general case yet.

Either way, in general it's a good idea to place your script tags at the bottom of the page so they won't hold up other parts of the page.

answered Dec 09 '10 at 10:01

Wolph

78,177
11
137
148

The position of the script doesn't affect the speed of the page loading - this is reliant on your internet connection. It actually affects the perceived performance - the visible elements of the page load first (rather than having to wait for a script to load), so the page appears to load faster than usual, while actually taking the same amount of time. – whostolemyhat Dec 09 '10 at 10:35
@What: not completely true unfortunately, since it blocks your browser from loading other files while loading the script tag it results in the page loading slower. While it is loading the page won't be able to load the images while those could normally be loaded in parallel during the entire pageload. – Wolph Dec 09 '10 at 18:01

score 4 · Answer 4 · answered Dec 09 '10 at 10:11

Firstly script tags not inside body/head elements create invalid HTML and might even cause some exceptions in some browsers.

Script tags inside the head element will be loaded and interpreted before any HTML is rendered, this blocks HTML/CSS rendering.

Script tags at the bottom of the body tag, will not block HTML/CSS and since you can only play around with the DOM on DomReady, this is the best position to put your JavaScript. As a side note, you won't even need to use a domReady event wrapper.

Alternatively, you can also use libraries like LABJS and RequireJS to kickstart your JavaScript from the head tag (minimal HTML/CSS blocking). Any scripts loaded through either of these libraries will run in paralel to HTML/CSS rendering.

<head>
   <script data-main="INITSCRIPT.js" src="require.js"></script>
</head>

INITSCRIPT.js

require( [ "jQuery" , "somePlugin" ] , function(){
   $(document).ready(function(){
      $("#someId").somePlugin();   
   });
} );

In the above example, only the load and interpretation of require.js will block HTML/CSS rendering, which usually is insignificant. After which jQuery and somePlugin will be loaded in paralel, so HTML/CSS renders just nicely.

score 2 · Answer 5 · edited May 29 '16 at 21:05

Performance of the script itself will definitely be the same.

The placement is important though, as explained in the article you linked, since the browser will "halt" (or "freeze") simultaneous downloads and rendering of the page when it encounters and loads the contents of a <script> tag. So it's probably best to let the browser render the page and apply CSS styles, and then include your .js. It will look smoother to the user.

Also, including the script at the bottom probably means right before you close the <body> tag.

score -1 · Answer 6 · edited May 23 '17 at 11:47

Along with the Performance aspect, you also need to be careful whenever you include the <script> tag inside the <head> tag.

Let's consider the following example:

<head>
 <script>document.getElementById("demo").innerHTML="hello";</script>
</head>
<body>
 <p id="demo">The content of the document......</p>
</body>

Here, notice that the script is loaded before the DOM (or the <p> tag) is loaded, which causes a failure in the script (Since the getElementById cant find the element with name 'demo').

In such cases you have to use the script within the body tag only.

Considering the other answers, its better to have the script always before the </body> tag as you never know whether the scripts that you would load externally have any such dependencies on your DOM.

Reference: Detailed problem description

Does the – Daniel Sokolowski Nov 18 '15 at 23:51

Linked

Related