Originally Posted by felgall
1. You would use defer OR async - using both together doesn't make any sense since there the defer overrides the async.
2. Both of these attributes are relatively new and so not all browsers currently support them. This means that if you do use either of them then you need to allow for the fact that some browsers will try to run the scripts straight away.
3. document.ready becomes completely unnecessary if you place the scripts at the bottom of the body. You then avoid having to wait for the rest of the scripts to load before you can run the ones that are already loaded. This is the benefit of placing the scripts at the bottom that you don't get with any other placement.
1. some like only one or the other. both hits more than async alone...
2. that's 100% ok with my approach, those browsers just fetch them sync like always.
3. any tags using async/defer above the script at the bottom can "jump over" the bottom script, so proper execution is still important. ready() should only fire once all the scripts have been loaded and parsed, which makes it useful. unless you use 100% sync loading, in which case your site is going to be slower no matter where or how you place the tags...
it's all about the blue line.
BROWSER STATS [% share]
(2013/10/31) IE7:0.5, IE8:8.6, IE9:5.3, IE10:12.3, FF:17.7, CH:41.8, SF:8.1, MOBILE:20.4