www.webdeveloper.com
Results 1 to 10 of 10

Thread: using modernizr to load jQuery

Hybrid View

  1. #1
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242

    using modernizr to load jQuery

    I'm just getting to know modernizr and would like some confirmation that I'm doing things the in an efficient way. So I load modernizr.js and then immediately have an inline script to call Modernizr.load to load jQuery. Is this a good practice?

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<title>Handcrafted Web Design &amp Development</title>
    	<link rel="stylesheet" type="text/css" href="css/reset.css" />
    	<link rel="stylesheet" type="text/css" href="css/hw.css" />
    	<script src="/js/libs/modernizr.js"></script>
    
    	<script type="text/javascript">
    	<!--
    Modernizr.load([
    	{
    		load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    		complete: function () {
    			if ( !window.jQuery ) {
    				Modernizr.load('/js/libs/jquery-1.7.1.min.js');
    			}
    		}
    	},
    	{
    		// fallback:
    		load: '/js/no-jQuery.js'
    	}
    ]);
    	// -->
    	</script>
    
    </head>

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    so you want to use a javscript library, to load another javascript library? The most efficient way would be to simply load jquery, unless im missing something?

  3. #3
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by DanInMA View Post
    so you want to use a javscript library, to load another javascript library?
    Yes, that's what script loaders are generally for.

    I needed Modernizr for some browser tests so I figures I'd use it's loader (which is really the yepnope loader) as well. So this loading script

    Code:
    Modernizr.load([
    	{
    		load: ['//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', '/js/hw.js'],
    		complete: function () {
    			if ( !window.jQuery ) {
    				Modernizr.load('/js/libs/jquery-1.7.1.min.js');
    			}
    		}
    	}
    ]);
    if I understand it correctly, will load jQuery from google's CDN (which is likely faster than from my own server) and in parallel load my JS file (hw.js), and after the load is complete will check to see if jQuery successfully loaded and if not it will load it from my server.

    I'm not an expert in this stuff I'm just trying to home in on best practices, to develop a rugged boilerplate to be the foundation for sites I make.

  4. #4
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by handcraftedweb View Post
    Yes, that's what script loaders are generally for.
    To further clarify the point of using a loader (as I understand it and correct me if I'm wrong), I first bring in Modernizr (8k) in the document head in conventional way:
    HTML Code:
    <script src="/js/libs/modernizr.js"></script>
    Page loading is blocked until this loads and executes (Modernizr docs recommend loading it in the head otherwise flashes occur). Then use Modernizr's loader to load the rest of the JS, included jQuery and any other libs and my own site specific JS. These subsequent script loads do not block the loading/rendering of the HTML, the page renders while the JS is loaded in parallel in the background.

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    I think the spirit of script loaders is more for dependency management than simply to load libraries, even though people are using script loaders to load just about anything these days.

    From my point of view, if you've got no dependencies (except for the one you created by first requiring your script loader so you can use it to require a library) then you've got no reason to use a script loader.

    Also, you can configure your Modernizr build to only include what you want - it doesn't come with a loader if you exclude it from your build. The only thing I use modernizr for is HTML5 Shiv and certain CSS tests.

    For the record, I'm more than willing to change my point of view if the right argument comes along.

    EDIT: As for your comment about not blocking the rest of your page and loading JavaScripts in parallel - well, if you can load them in parallel, then that means that you can also stick them right before you closing </body> tag which accomplishes your original goal.
    Last edited by aj_nsc; 04-23-2012 at 12:15 PM.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  6. #6
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by aj_nsc View Post
    ...EDIT: As for your comment about not blocking the rest of your page and loading JavaScripts in parallel - well, if you can load them in parallel, then that means that you can also stick them right before you closing </body> tag which accomplishes your original goal.
    As I understand it, this will load the 2 files in sequence:
    HTML Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script src="/js/hw.js"></script>
    whereas this will load them in parallel, theoretically potentially faster:
    Code:
    load: ['//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', '/js/hw.js']
    Out of curiosity, I built a custom modernizr with and without the loader, with loader it's 8k, and without loader it's 4k. So the question is, if there's an advantage to using the loader is it worth the extra 4k? The loader does give me the fallback if jQuery doesn't load from google's CDN, but that's probably not that important.

  7. #7
    Join Date
    Dec 2005
    Posts
    2,984
    I did not deny that loading them asynchronously isn't faster than using <script> tags.

    What I said was that if you were using the argument that you didn't want to block the rest of the DOM from loading while you were loading your scripts, then stick them at the end of the body, or use the async or defer attributes and your body and the DOM will load up equally as fast either way.

    ...fallback if jQuery doesn't load from google's CDN, but that's probably not that important.
    I'm very happy that you came to this conclusion. In my opinion, if Google's CDN is down, then it's probably because the world has come to an end in which case you don't need to serve a fallback src for jQuery.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  8. #8
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by aj_nsc View Post
    I did not deny that loading them asynchronously isn't faster than using <script> tags.

    What I said was that if you were using the argument that you didn't want to block the rest of the DOM from loading while you were loading your scripts, then stick them at the end of the body, or use the async or defer attributes and your body and the DOM will load up equally as fast either way.
    ...
    Thanks to this discussion I just discovered google's pagespeed analysis. In my meager test page I'm loading modernizr in the head (version including loader in all cases) and 2 JS files at body bottom: jQuery (from CDN) and my JS file from my server. Using the loader I get a PageSpeed score of 92, with <script async> it's 90, and with <script defer> it's 88.

    I suspect <script async> is at least as efficient as the loader (probably more efficient since I would't need the loader code). But unfortunately script async isn't supported on IE. So I guess I'm going to stick with the loader. Even if there's no significant difference those few extra points might make me look good in someone's eyes.

  9. #9
    Join Date
    Dec 2005
    Posts
    2,984
    I love it when people come on these forums asking for 'best practices' and then, when somebody offers a different opinion with valid reasoning they choose to ignore it and say, 'nah, my way's better because this useless tool that has no meaning in the real world in the context of our current discussion scored it 2 points higher'.

    Just a question - can you tell me why, technically speaking, without using 'because google gave it a higher score' using a script loader is better to load 2 non-dependent scripts that have no affect on the DOM?

    Yes, those couple of worthless points make you look better in someone's eyes the way that a meticulously HTML validated page is not necessarily any better than a page with 100 errors - yet dev's without a clue love to validate their pages and say that that makes them better devs than those who don't validate. (Actual devs know the difference).

    Anyway, I'm glad to know how you stand on things. Next time I see you ask an 'am I doing this right?' question, I'll make sure to ignore it.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  10. #10
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by aj_nsc View Post
    I love it when people come on these forums asking for 'best practices' and then, when somebody offers a different opinion with valid reasoning they choose to ignore it and say, 'nah, my way's better because this useless tool that has no meaning in the real world in the context of our current discussion scored it 2 points higher'.

    Just a question - can you tell me why, technically speaking, without using 'because google gave it a higher score' using a script loader is better to load 2 non-dependent scripts that have no affect on the DOM?

    Yes, those couple of worthless points make you look better in someone's eyes the way that a meticulously HTML validated page is not necessarily any better than a page with 100 errors - yet dev's without a clue love to validate their pages and say that that makes them better devs than those who don't validate. (Actual devs know the difference).

    Anyway, I'm glad to know how you stand on things. Next time I see you ask an 'am I doing this right?' question, I'll make sure to ignore it.
    I think you're devaluing our discussion. The things you said gave me some new info, got me to try things and discover things. Had the <script async> been more widely supported I would have gone that direction. But all the info I could gather suggested that there wasn't a more efficient widely supported way than the loader.

    Just a question - can you tell me why, technically speaking, without using 'because google gave it a higher score' using a script loader is better to load 2 non-dependent scripts that have no affect on the DOM?
    Because the loader loads them in parallel (asynchronously).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles