jquery - Async and document ready -

jquery - Async and document ready -

i seek optimize pages putting async attributes on scripts. seems break javascript since $(document).ready executed before scripts loaded!

i saw can resolve problem putting $(window).load instead of $(document).ready wondering if there improve solution. solution trigger 2 problems in case :

i have alter $(document).ready , tell developpers not utilize anymore the scripts executed after images loaded. website has lot of heavy images , need scripts executed asap after dom ready.

do have magic tricks? maybe putting scripts @ end? utilize defer instead of async?

after extensive research, can putting scripts @ end of page best practice.

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

google don't talk practice , seems prefer async scripts : https://developers.google.com/speed/docs/best-practices/rtt#preferasyncresources

imho, putting script @ end of page has several benefits on async/defer:

it work browser (yes, ie ;) ) you guarantee execution order you not need utilize $(document).ready or $(window).load your scripts can execute before images loaded as async/defer, page displayed quicker when dom trigger ready event, scripts loaded can optimized merging js in 1 file without problem (by tool mod_pagespeed)

the drawback can see browser won't able parallelize downloads. 1 reason utilize async/defer instead when have script completly independant ( not need rely on execution order) , don't need executed @ specific timing. illustration : google analytics.

jquery html html5