JavaScript on the bottom of the page?

by

It is very important for best practice reasons.

When you have scripts loading in your header, they stop other downloads from taking place! This includes your styling, and will also stop your images from downloading until the script has finished.

This is because JavaScript files load synchronously.

Also note that you will get a flash of unstyled content (FOUT) during loading if you do not move your JavaScript files to the bottom of your page. This is because your CSS will not download until the script has finished loading.

Here is an excerpt from Yahoo performance rule 6.

The second problem caused by scripts is blocking 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. (I’ve gotten Internet Explorer to download over 100 images in parallel.) While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

References

http://developer.yahoo.com/performance/rules.html/

Especially note rule 6.

More Related Contents:

  1. Switch classes on click of button
  2. How can I modify with css an image appended with javascript?
  3. How to get children id when I click the parent?
  4. best tools for theme design? [closed]
  5. Java script on focus instead of onclick
  6. Scroll Function working in reverse order [closed]
  7. HTML text input allow only numeric input
  8. How to send FormData objects with Ajax-requests in jQuery? [duplicate]
  9. How can I change an element’s text without changing its child elements?
  10. horizontal scrollbar on top and bottom of table
  11. Persisting the changes of range objects after selection in HTML
  12. Set custom HTML5 required field validation message
  13. How to pass parameters on onChange of html select
  14. Show and hide divs at a specific time interval using jQuery
  15. How do I detect “shift+enter” and generate a new line in Textarea?
  16. Adding additional data to select options using jQuery
  17. HTML5 dragleave fired when hovering a child element
  18. HTML5 Local Storage fallback solutions [closed]
  19. jQuery $(“#radioButton”).change(…) not firing during de-selection
  20. Open a new javascript window(.open) along with its CSS styling
  21. Multiple Select limit number of selection
  22. Search and Highlight in jQuery
  23. HTML5 audio playlist – how to play a second audio file after the first has ended?
  24. HTML5 drag and drop folder detection in firefox. Is it even possible?
  25. Is it possible to do mathematics inside CSS?
  26. Adding click event for a button created dynamically using jQuery [duplicate]
  27. Select a row from html table and send values onclick of a button
  28. How to compare two HTML elements
  29. html() vs innerHTML jquery/javascript & XSS attacks
  30. script order for jquery with bootstrap

Leave a Comment