Does the tag position in HTML affects performance of the webpage?

by

Javascript assets, by default, tend to block any other parallel downloads from occurring. So, you can imagine if you have plenty of <script> tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the JS files have completely loaded.

In order to combat this issue, many developers have opted to placing JS at the bottom of the HTML page (before the </body> tag). This seems logical because, most of the time JS is not required until the user begins interacting with the site. Placing JS files at the bottom also enables progressive rendering.

Alternatively, you can choose to load Javascript files asynchronously. There are plenty of existing methods which this can be accomplished by:

XHR Eval

var xhrObj = getXHRObject();
xhrObj.onreadystatechange = 
  function() { 
    if ( xhrObj.readyState != 4 ) return;
    eval(xhrObj.responseText);
  };
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');

Script DOM Element

var se = document.createElement('script');
se.src="http://anydomain.com/A.js";
document.getElementsByTagName('head')
[0].appendChild(se);

Meebo Iframed JS

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();

To name a few…

Note: Only a maximum of five scripts can be loaded in parallel in current browsers.

ForIE there is the defer attribute you can use like so:

<script defer src="jsasset.js" type="text/javascript"></script>

When set, this boolean attribute
provides a hint to the user agent that
the script is not going to generate
any document content (e.g., no
“document.write” in javascript) and
thus, the user agent can continue
parsing and rendering.

Update 2022: all browsers now accept the defer attribute.

More Related Contents:

  1. Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?
  2. Where to place JavaScript in an HTML file?
  3. Fastest method to escape HTML tags as HTML entities?
  4. Which browsers support ?
  5. Unobtrusive JavaScript: at the top or the bottom of the HTML code?
  6. Does use of anonymous functions affect performance?
  7. Performance differences between visibility:hidden and display:none
  8. Best way to execute js only on specific page
  9. Why is iterating through an array backwards faster than forwards
  10. How to change the playing speed of videos in HTML5?
  11. Is optimizing JavaScript for loops really necessary?
  12. Are data attribute css selectors faster than class selectors?
  13. HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices [closed]
  14. Javascript (jQuery) performance measurement and best practices (not load time)
  15. draw 10,000 objects on canvas javascript
  16. Chrome extension – retrieving global variable from webpage
  17. JSFiddle code not working in my own page
  18. All About…. Z-Index?
  19. How do I escape a single quote ( ‘ ) in JavaScript? [duplicate]
  20. Detecting if a browser is using Private Browsing mode
  21. Coordinates of selected text in browser page
  22. Chrome Autofill/Autocomplete no value for password
  23. Set date in input type date
  24. Is there a best practice for generating html with javascript
  25. How to capture generated audio from window.speechSynthesis.speak() call?
  26. Storing arbitrary info in HTML tags for JavaScript?
  27. Measure distance between two HTML elements’ centers
  28. How to flip images horizontally with HTML5
  29. HTML form input tag name element array with JavaScript
  30. Get drop down value

Leave a Comment