Async and document ready

by

After some extensive research, I can definitely say that putting scripts at the end of the page is THE best practice.

Yahoo agrees with me : http://developer.yahoo.com/performance/rules.html#js_bottom

Google don’t talk about this practice and seems to prefer async scripts : https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

IMHO, putting script at the end of the page has several benefits over async/defer:

  • It will work for all browser (yes, even IE 😉 )
  • You guarantee the execution order
  • You do not need to use $(document).ready or $(window).load
  • Your scripts can execute before your images are loaded
  • As async/defer, your page will be displayed quicker
  • When the DOM trigger the ready event, all scripts are loaded
  • Can be optimized by merging all js in one file without problem (by a tool like mod_pagespeed)

The only drawback that I can see is that the browser won’t be able to parallelize the downloads.
One good reason to use async/defer instead is when you have a script that is completly independant ( do not need to rely on the execution order) and that don’t need to be executed at a specific timing. Example : google analytics.

More Related Contents:

  1. Slide DIV from left after load the website
  2. How make my CSS responsive using Bootstrap 3.1
  3. CSS block doesn’t show click on a button
  4. how to force list items to go to differents rows?
  5. Issue with a design when content increase [closed]
  6. Auto-size dynamic text to fill fixed size container
  7. Table header to stay fixed at the top when user scrolls it out of view with jQuery
  8. Why does the jquery change event not trigger when I set the value of a select using val()?
  9. How can I simulate an anchor click via jquery?
  10. Export to CSV using jQuery and HTML
  11. jQuery removeClass wildcard
  12. HTML5 Canvas 100% Width Height of Viewport?
  13. ng-click not working from dynamically generated HTML
  14. Selecting elements with special characters in the ID
  15. Load content of a div on another page
  16. jQuery .html() vs .append()
  17. jQuery, get html of a whole element [duplicate]
  18. jQuery split long ul list in smaller lists
  19. How to add additional fields to form before submit?
  20. How to get only direct text without tags with jQuery in HTML
  21. jQuery select change show/hide div event
  22. How to use jQuery to add form elements dynamically
  23. Get the value of -webkit-transform of an element with jquery
  24. Auto-click button element on page load using jQuery
  25. jQuery get selected option value (not the text, but the attribute ‘value’)
  26. jQuery checkbox event handling
  27. Draggable div without jQuery UI
  28. How to force an HTML form to validate without submitting it via jQuery
  29. Trying to make multiple background images cycle through a slideshow with CSS and JQUERY
  30. Jquery Multiple load in a DIV

Leave a Comment