I try to optimize my pages by putting some async
attributes on my scripts. It seems to break my javascript since $(document).ready
is executed before the all scripts are loaded!
I saw that I can resolve my problem by putting $(window).load
instead of $(document).ready
but I was wondering if there is a better solution. This solution trigger 2 problems in my case :
$(document).ready
and tell all the developpers to not use it anymoreDo you have some magic tricks? Maybe putting all scripts at the end? use defer
instead of async
?
So technically they are both the same. Not major difference between these two declaration. They used based on weather you use JavaScript then you should use $(document). ready declaration in other case you use jQuery library which is a part of JavaScript then you should use $(function) declaration.
In jQuery 3.0, all other syntax methods except $(handler); are deprecated. The official justification is: This is because the selection has no bearing on the behavior of the . ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior.
The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.
ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.
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:
$(document).ready
or $(window).load
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With