CODEWITHSUNDEEP
jqueryhtml
Praful Bagai
Praful Bagai

Reputation: 17392

HTML page loading time?

Does including jQuery functions with those #id or .class which are not present in the HTML code effect the loading time of the webpage?

For eg :- 

$(function (){
    $("#id1").click(function(){

//something

});

There exist a function for id1, but there doesnt exist any tag with id = id1. Does this effect the loading time of the page?

Actually, I wanted to add my own widgets to my page, thereby letting the user customize his/her dashboard by placing/adding the widgets. I thought of a solution of adding for the widgets dynamically by letting the user select the widgets from the list of widgets. After selecting the widgets, it will dynamically add divs for those widgets via $( "#container" ).append( "<div id='id1'></div>" ); and thereby loading their respective jQuery functions. Will keeping the functions for those ids or classes in the js file optimized ? Is it the correct way of loading jQuery functions or is there something better?Just wanted to know is it the correct way of implementing widgets?

Upvotes: 1

Views: 243

Answers (3)

Avram Cosmin
Avram Cosmin

Reputation: 373

If in jour *.js file you use:

$(function() {
//your jQuery code here
});

and if you load your external *.js file at the end of the document right before the tag </body> and only after you already loaded jQuery from Google CDN than the script will be executed only after the page loads completely.

By running your code in this way, if jQuery find no element with the specified id will do nothing. It will be affected the memory consumed by the browser of the user when parsing the DOM and searching after a possible element with the id you specified. That's all.

A correct way to work with jQuery is by loading and executing the jQuery code as I described you above.

One thought; when you append to the DOM elements, do it before searching for that elements:

$(function() {
$( "#container" ).append( "<div id='id1'></div>" );
$('#id1').append('some HTML content');
});

Upvotes: 0

Ram
Ram

Reputation: 144709

No, this really doesn't affect the page-load time, the query fails and no handler is attached. If you are developing a Single Page Application then the thing that is important is performance of your application, if the application works slowly only then you should be worried about the performance.

http://c2.com/cgi/wiki?PrematureOptimization

If your application heavily uses JavaScript then you can consider using a library like RequireJS that is a module loader that can load the assets dynamically and improves the speed and quality of your code. RequireJS also has an optimization tool than can be used for combining the related scripts together into build layers and minifing them via UglifyJS or Google Closure Compiler(requires Java) after development.

Upvotes: 1

over_optimistic
over_optimistic

Reputation: 1419

I would say load jquery from google CDN this will substantially reduce loading of jquery library. In terms of the function call, yes it does increase page loading time. But not by causing network delay. The function call you want to do after the page has been loaded so that id=id1 already exists. The function call setup will not increase page load time to a noticeable extent and do as many as you like. As your page becomes more javascript heavy then you'll want to consider optimizing it for run-time speed.

Upvotes: 1

Related Questions