1

I have been developing my frontend code with jQuery for a while now, and since I am implementing the site with partials in rails. Often I would use content_for :javascript to wrap up some code that is specific for a view.

and my question is, I end up with a lot of script tags and since most of them are jquery code, I have typed up a lot of $(document).ready(function() {});

So my question is, whether it is necessary to wrap everything in document.ready, and if I have too many of document.ready will it affect the performance?

Chris Yeung
  • 2,613
  • 6
  • 34
  • 57
  • 1
    If you have script content without $(document).ready() , then it may execute before the HTML is loaded and will not perform the desired functionality in most cases. – Varun Jun 17 '15 at 14:53
  • `How important it is to wrap jquery code in $(document).ready() function?` Very. `if I have too many of document.ready will it affect the performance?` Yes. -- both of these questions/answers are argumentative – vol7ron Jun 17 '15 at 14:57

3 Answers3

5

$(document).ready() has one purpose - to execute some code after the DOM has finished loading and is now ready for access or modification.

If your code is located before DOM elements such as in the <head> tag or in the top or middle of the <body> section before some DOM elements and that code does attempt to access the DOM upon first initialization, then it should be placed into a $(document).ready() block so it will not execute before the DOM is ready or the ` tag should be moved.

If your code is in a <script> tag within the <body> that is after the DOM elements that it needs to access then your code does not need to be in a $(document).ready() block.

Or, if your code is not called upon initialization (e.g. it's only called later upon other events) or your code does not access the DOM upon initialization, then that code does not need to be inside a $(document).ready() block.

Though you obviously have jQuery available, you can read this answer for a more detailed description: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it.

Having multiple $(document).ready() blocks is just like registering multiple callbacks for an event. It's really no big deal. Each one just takes an extra couple function calls to setup and is an extra callback execution at execution time. If that's the cleanest way to write your code, then by all means use multiple $(document).ready() blocks.

To summarize, put code into a $(document).ready() block when:

  1. A specific block of code needs to access the DOM when it is first run and the code is located in a script tag that is placed before the end of the <body> tag or is placed before some DOM elements that it might need to access.

There is no need to put code into a $(document).ready() block when:

  1. The part of the code that runs at first initialization does not access the DOM.
  2. The code is placed into a <script> tag that is after the DOM elements that it references.
  3. The <script> tag is marked defer because this explicitly instructs the browser to delay the running of this script tag until after the DOM has been parsed.

Also, keep in mind that it does not matter where functions are declared. It only matters where the functions are called from. So, you can define as many functions as you want outside of $(document).ready(). You just have to make sure that any functions that access the DOM are not called too soon.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
1

If your code does access your DOM element but you put it outside $(document).ready(), it may subject to fail or produce unexpected behavior. See this example below:

var listA = $('ul.myclass').children();
$(document).ready(function(){
    var listB = $('ul.myclass').children();
});

From simple snippet above, listA is calculated straightaway when the script is loaded even your document has not been fully loaded or ready, while listB is calculated when the document is loaded and ready.

listA and listB could be different in this scenario even though they are calculated from the same DOM selector.

It's OK for you to initialize some variable values or pre-load some values which have nothing to do with the UI outside of document.ready(). But when you want to initialize your UI or access the DOM upon startup, always do it when the document finishes loading (document.ready).

TaoPR
  • 5,932
  • 3
  • 25
  • 35
1

I agree with everything @jfriend00 says but also remember that not all your code needs to be in the document.ready event. What I mean by that is that you can create your functions at any time, they only need to be executed at document.ready. For instance:

function manipulateDOM( el ) {
  document.getElementById(el).classList.add('myClass');
}

$(document).ready(function()){
  manipulateDOM('myEl');
});
Gary Storey
  • 1,779
  • 2
  • 14
  • 19