Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is $(document).ready necessary if I put all my JavaScript at the bottom of the page? [duplicate]

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.

  1. Is $(document).ready necessary to ensure the DOM has fully loaded and is ready for manipulation?

  2. Is there any difference between the execution times? Would one method fire faster than the other?

  3. 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?

like image 497
mpen Avatar asked Jul 29 '11 18:07

mpen


People also ask

Should I put all my JavaScript in one file?

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.

What does $( document .ready do?

$( 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.

Is document ready necessary?

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.

Where do I put document ready script?

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.


1 Answers

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.

like image 121
ThatGuy Avatar answered Sep 28 '22 14:09

ThatGuy