Possible Duplicate:
jquery - Is $(document).ready necessary?
Putting the JS just above the </body>
tag improves perceived load time because the browser doesn't have to read and parse through all the JS before it can start rendering the page.
But it has another benefit, doesn't it? We don't need to wrap the JS in $(document).ready(function() { ... })
because all the elements are already above the JS and thus are ready for manipulation.
Is $(document).ready
necessary to ensure the DOM has fully loaded and is ready for manipulation?
Is there any difference between the execution times? Would one method fire faster than the other?
Could we link our external JS files (<script src="..." />
) at the bottom of the page too then, or does that need to be in the header?
To avoid multiple server requests, group your JavaScript files into one. Whatever you use for performance, try to minify JavaScript to improve the load time of the web page. If you are using single page application, then group all the scripts in a single file.
$( document ). ready()A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ). ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
No, it is not necessary. You can either put the script tag right before the body closing tag or if you are supporting IE9+ you can use native JS.
So technically it doesn't matter where you put it. Many people like putting script in the head, because it makes sure the script is read before the page is loaded. Other people like putting it at the very end (just before the end body tag) so that all of the elements of the page are loaded before the script reads them.
This SO answer says NO:
stackoveflow question
$(document).ready is for assurance full DOM is available at the time the function is called. Any functions and events not depending on the DOM don't need to be put into the ready event.
Also - to improve page rendering speed - load javascript files dynamically in non-blocking fashion: http://berklee.github.com/nbl/ or https://github.com/rgrove/lazyload/
This technique works somewhat like this:
var script = document.createElement("script"); script.type = "text/javascript"; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script);
This new element loads the source file file1.js. The file begins downloading as soon as the element is added to the page. The important thing about this technique is that the file is downloaded and executed without blocking other page processes, regardless of where the download is initiated. You can even place this code in the header of a document without affecting the rest of the page (aside from the one HTTP connection that is used to download the file).
this book: "High Performance JavaScript" by Nickolas Zakas has a lot of interesting information about JavaScript performace optimization.
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