Menu
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?
844
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.
75
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