JQuery document.ready () overhead

Question

I am working with an application that uses more of the jQuery I've dealt with before, and I'm trying to figure out what the jQuery document.ready () does for the web application a little better. I hope someone more experienced in JS / JQuery can help me.

Suppose I have a separate .js file with 100 jQuery functions inside document.ready ():

$(document).ready(function() { $("#something1").click(function() { ... }); $("#something2").click(function() { ... }); $("#something3").click(function() { ... }); etc... }); 

I understand that they will now be loaded and ready for every page of the website (through the inclusion of a .js file). However, I could also use these internal functions of document.ready () on every single page of a website, where each page would only get what it actually uses. Or I could do something even more complex by selectively invoking functions that group event handlers inside document.ready ();

Given that the entire .js file is readable by the browser anyway, I would like to know what the effect may be between these approaches when working. It seems inconsistent to load all the event handlers for each page, but at the same time it makes me wonder if I am creating a problem from something that is not really there.

It would be helpful to take a look at the look. Thanks.

Answer 1

The best overall result is often achieved by creating a code library that can be accessed by all of your pages in a single minified external JS file. Then enter the page initialization code, either embedded with the page, or in an external JS file specifically for this page.

This has the following advantages:

• You have only one copy of all your functions, which makes it easier to maintain.
• A single minified external JS file can be very efficiently cached by the browser. It will load from the first page that the viewer sees, and from that moment it will be sent from the browser cache.
• You only use the initialization code that is appropriate for the particular page displayed. If you mix all your initialization code and just let a lot of them fail, because in fact for other pages you can quickly create a big mess on a large site, you could achieve quite high performance by performing all these initialization functions and looking for DOM objects that are not there.
• It is much easier to debug if only those initializing functions that should work are working.
• With external JS in one cached external file, you can minimize the number of external files that need to be loaded if the initialization code for a particular page is included in the line on the actual web page and not in its own external JS file. For maximum page rendering performance, this should be after the HTML page.

For further optimizations in a large project, if the external JS file is very large, and you have a large classification of functions that are needed only in one part of the site, then you can split them into another external JS file, which is included only in this part of the site. Since these files are effectively cached by the browser, the main savings are analyzing the parsing time and the amount of memory that may or may not be significant (this depends on how large the project is). There is usually a practical limit to these optimizations, since downloading multiple external JS files usually takes longer than downloading one larger one.

Be sure to specify the version number of your external JS files, so when you change them, the file name changes, so browsers are forced to retrieve the new version and not get stuck in the old version from the cache.

Answer 2

jQuery gracefully crashes when the selector does not match, so the only real success you get is the fact that jQuery does a search for each selector. Although this could be a potential bottleneck if you are trying to register several thousand handlers, it is unlikely to be noticeable by 100.

In addition, if you register them with id (#), you don’t even need to search the entire DOM, so the penalty is even less noticeable.

jQuery docs when searching by id:

For id selectors, jQuery uses the JavaScript function document.getElementById (), which is extremely efficient.

Answer 3

My perspective from my research:

• Put all your functions in one file, which is loaded once using long ends with headers.
• I recommend putting ALL js in one file (you can use if (location.pathname) only to run on every page.
• Use comments and it will be supported
• If you really need some js per page, still keep all the functions in 1 js, but you can have different js to load each function at the top of each page .... I think

Answer 4

If you place the startup code for each individual page in a separate external file, this is not supported at all. Just stick to the solution for every page.

Answer 5

I would advise you to stick to the implementation of each page, because it makes no sense to have code that is not going to do anything on the page, but will consume memory. You can even do $ (document) .ready (approPriatefunctionName); from the server side to each page and make sure that the necessary functions are defined in js and they are loaded before you render the js script.

Answer 6

I think you should store all your functions in one big file. It is easier to maintain, and when it is reduced, it will load quickly. Once this is stored in the user cache, it does not restart every time.