$(document).ready(function(){}); vs script at the bottom of page

by

Very little in and of itself, either way the DOM will be ready for you to operate on (I was nervous about that until I read this from Google). If you use the end of page trick, your code may get called the slightest, slightest bit sooner, but nothing that will matter. But more importantly, this choice relates to where you link your JavaScript into the page.

If you include your script tag in the head and rely on ready, the browser encounters your script tag before it displays anything to the user. In the normal course of events, the browser comes to a screeching halt and goes and downloads your script, fires up the JavaScript interpreter, and hands the script to it, then waits while the interpreter processes the script (and then jQuery watches in various ways for the DOM to be ready). (I say “in the normal course of things” because some browsers support the async or defer attributes on script tags.)

If you include your script tag at the end of the body element, the browser doesn’t do all of that until your page is largely already displayed to the user. This improves perceived load time for your page.

So to get the best perceived load time, put your script at the bottom of the page. (This is also the guideline from the Yahoo folks.) And if you’re going to do that, then there’s no need to use ready, though of course you could if you liked.

There’s a price for that, though: You need to be sure that the things the user can see are ready to be interacted with. By moving the download time to after the page is largely displayed, you increase the possibility of the user starting to interact with the page before your script is loaded. That’s one of the counter-arguments to putting the script tag at the end. Frequently it’s not an issue, but you have to look at your page to see whether it is and, if so, how you want to deal with it. (You can put a small inline script element in the head that sets up a document-wide event handler to cope with this. That way, you get the improved load time but if they try to do something too early, you can either tell them that or, better, queue the thing they wanted to do and do it when your full script is ready.)

More Related Contents:

  1. Get the longest text in HTML document using Jquery or javascript
  2. Hide/Show image on one click [closed]
  3. How to move an element into another element?
  4. Convert blob to base64
  5. jquery (or pure js) simulate enter key pressed for testing
  6. Format date to MM/dd/yyyy in JavaScript [duplicate]
  7. Check if an array is empty or exists
  8. jQuery get textarea text
  9. How to bind Events on Ajax loaded Content?
  10. Detect if an element is visible with jQuery [duplicate]
  11. jquery attr(‘checked’,’checked’) works only once
  12. Adding POST parameters before submit
  13. jQuery: Finding partial class name [duplicate]
  14. My javascript is returning this error: $.ajax is not a function
  15. Simple Screen Scraping using jQuery
  16. AJAX jQuery refresh div every 5 seconds
  17. Modify object property in an array of objects
  18. Save a pre element as PDF with CSS
  19. Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
  20. Input field for Tags separated by comma
  21. Center flex item in container, when surrounded by other flex items
  22. JQuery Ajax Post results in 500 Internal Server Error
  23. Jquery: mousedown effect (while left click is held down)
  24. jQuery: How to listen for DOM changes?
  25. Using jQuery, how do you find only visible elements and leave hidden elements alone?
  26. Loop and get key/value pair for JSON array using jQuery
  27. jQuery show/hide options from one select drop down, when option on other select dropdown is slected
  28. How can I remove wrapper (parent element) without removing the child?
  29. Check which element has been clicked with jQuery
  30. How to get read data from response header in jquery/javascript [duplicate]

Leave a Comment