Home > Réalisations > Projets Libres > jQl an asynchronous jQuery Loader

jQl an asynchronous jQuery Loader

“Put javascript at bottom”… or not ?

One good practice in web performance optimization is to “put script at bottom”.
The reason is that while scripts are loading, most browsers block others components from loading.
When you put your scripts at the bottom of the HTML document, all components can be loaded without delay, and, in the end, scripts can be loaded.

However, doing this way has some drawbacks :

One is that the loading of externals scripts is delayed after all other components. Then, browsers have to execute it and the onload event of the page can also be delayed due to this late loading.
Another major drawback is the presence of inline <script> in the <body>.
Of course, as externals scripts are loaded at the end of the page, any inline script that needs to use it has also to be pushed at the end of the page.
This can be quite easy when the HTML page is hand-made.
But in most cases, HTML document scripts are added by several modules provided by a CMS or jQuery plugins. And these modules often have inline javascript in order to initialize behaviors related to the functionality they provide, when the document is ready.
Especially when working with jQuery, if you load it at the bottom, all preceding jQuery('document').ready() calls will fail.

I’ve been wondering for a long time if it would be possible to get rid of these drawbacks while reaching the following goals:

early external jQuery loading
non blocking jQuery loading that allow other components on the same page to be loaded in parallel, including jQuery plugins
non blocking inline script in the HTML document, that could call jQuery('document').ready(), even when jQuery and its plugins havent’ been loaded yet.

jQl is my solution.

jQl an inline loader

As our purpose is to async load an external script, the loader can’t be external. It has to be embedded inline in the HTML, and as short as possible.

At the moment jQl is 700bytes minified and gziped. It is small enough to be embedded in every HTML page.

Asynchronously loading jQuery

loadjQ(src[,callback])
This asynchronously loads jQuery without blocking other components:

jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');

jQl automatically catches all jQuery().ready() calls, so you can write:

<script type="text/javascript">
jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
jQuery('document').ready(function(){
	alert('Hello world');
});
</script>

jQl will queue these function calls, and execute them as soon as jQuery is loaded and the DOM is ready, as they would be executed in the usual way.

jQl also support the shorthand form :

<script type="text/javascript">
jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
jQuery(function(){
	alert('Hello world');
});
</script>

and of course, the $ syntax works also :

<script type="text/javascript">
jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
$(function(){
	alert('Hello world');
});
</script>

You can see a demonstration of this on http://www.yterium.net/jQl/demos/jquery-loadjQ.php [1]

loadjQ can also get a callback function as the second argument. This is a function that will be called as soon as jQuery is loaded and jQl booted (most often, this will happen before the document.ready event).
This can be used to launch a special operation that needs jQuery but can occur before document is ready:

<script type="text/javascript">
jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
	function(){
		$.get('extrastuff.html',function(){
			// do some special things
		})
	});
</script>

Most of times, we will also load jQuery plugins. A good practice is to concatenate all scripts into one large file in order to be able to load it with only one HTTP hit, and call the loadjQ method on the big script.

Asynchronous parallel loading of jQuery plugins

However you sometimes want to keep all your scripts dispatched into two or more scripts.A good reason could be web performance optimization!

Let’s explain this.

Aggregating all externals scripts in only one is sure a good practice. But it can lead to large file, and if all the rest of your page is fast loading because it is also well optimized, the unique script file downloading can become critical. In this case, splitting it in 2 or 3 files could be a good idea, if only the browser is able to download these scripts in parallel and execute jQuery-dependent modules only when jQuery is loaded.

This can be done with jQl !

loadjQdep(src)
The loadjQdep function helps download jQuery-dependents modules in parallel with jQuery downloading, while still executing them in the correct order.
Example:

jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
jQl.loadjQdep('js/myplugin.jquery.js');

jQuery and myplugin will be downloaded in parallel. Then, as soon as jQuery is loaded, jQl will wait for the myplugin script to finish downloading (if it is not already present) and then will execute all catched inline calls to jQuery.ready() function.

If myplugin is faster to download than jQuery, it will be queued, waiting jQuery to be run, and if it is longer, it will run as soon as it is downloaded.

You can load several jQuery dependent modules in parallel, all of them will be queued and only called when jQuery is present.

One limit to loadjQdep is that only scripts from same domain as the HTML page can be loaded with, as it uses XHR loading.

Wrap up

jQl provides an innovating way to optimize jQuery and plugins loading, without blocking browser’s loading of other components.
It doesn’t need to put all javascript at the bottom, and especially deals well with inline calls to jQuery.ready() function, without blocking any inline js execution.

It’s a good solution to improve jQuery loading in HTML documents composed in an automated way.

To try it, just replace your conventional script call by inlining minified version of jQl and loading your script :

<script type="text/javascript">
var jQl=....
jQl.loadjQ('url/of/jQuery.js')
</script>

All jQl files are available on GitHub.

P.S.

Thanks to fil for reading and correcting my poor english.

Footnotes

[1] All demo files available on Github https://github.com/Cerdic/jQl/tree/master/demos

Your comments

# On 3 December 2010 at 10:15, by ? Replying to: jQl an asynchronous jQuery Loader

Ca sert à rien ce truc
# On 3 December 2010 at 10:53, by Vincent Voyer Replying to: jQl an asynchronous jQuery Loader

La réalisation et la technique sont intéressantes.

Mais mettre les javascripts en bas de page ce n’est pas seulement pour que les autres requêtes ne soient pas bloquées. C’est aussi pour privilégier l’affichage graphique rapide par rapport au parsing javascript par exemple.

Il faudrait faire des tests supplémentaires pour voir si ça n’a pas d’impact sur le start render et le rendu progressif des pages.
# On 6 December 2010 at 13:28, by Ben S. Replying to: jQl an asynchronous jQuery Loader

Je suis pour la part de l’avis de Vincent, sur l’utilité de réaliser quelques tests de chargement de pages avec et sans jQI.

Toutefois, le projet est très intéressant et utile à beaucoup de monde.
Si les tests sont concluants, il est clair que ce script a de l’avenir.

Je viens à l’instant de tomber sur quelque chose de similaire, plus évolué en termes de fonctionnalités : http://www.webresourcesdepot.com/speed-up-modernize-websites-with-head-js/

J’avoue avoir lu les descriptifs de jQI et Head JS un peu en diagonale, mais ça peut t’aider éventuellement pour peaufiner ton plugin.
# On 22 January 2011 at 23:47, by Rogério Madureira Replying to: jQl an asynchronous jQuery Loader

Interesting... I’ll give it a shot. Thank you very much.
# On 22 February 2011 at 19:03, by Niska Replying to: jQl an asynchronous jQuery Loader

“One limit to loadjQdep is that only scripts from same domain as the HTML page can be loaded with, as it uses XHR loading.”

What if I need to load a script from another domain, that is dependent on jquery. Can I use jQl to load jquery and this external script sequential, and then load other jquery dependent scripts from the same domain asynchronous?

Or is there a better solution?
# On 22 February 2011 at 22:57, by Cedric Replying to: jQl an asynchronous jQuery Loader

You’re right : using jQl for sequentially loading jQuery and the external script is here the best solution.

Just keep in mind that others scritps on same domain can be run just after jQuery is loaded. That can be before the external script on another domain.
# On 12 June 2011 at 14:08, by uweschaefer Replying to: jQl an asynchronous jQuery Loader

awesome replacement for the fragile, halfworking thing i did. thanks a bunch!
# On 8 September 2011 at 00:26, by Ian Replying to: jQl an asynchronous jQuery Loader

Niska: Just make sure that the server the script you’re loading is on is setting the HTTP Access-Control-Allow-Origin header appropriately.
# On 9 September 2012 at 12:05, by Hameedullah Replying to: jQl an asynchronous jQuery Loader

Thank you very much, I was having issue with all versions of IE where the jQuery was not loaded in a dynamic iframe, I used your jQL solution and it worked. Thank you very much!
# On 29 May 2013 at 13:41, by Cédric Replying to: jQl an asynchronous jQuery Loader

I had the following question :

Hi Cédric. I’m about to try your Loader, but I need to ask you a question first. I am using Google APIs jQuery along with a local version on every page I develop. The idea being -if remote jQuery takes too long to load, say four-five seconds, I can run the local version. Can your Loader help and if so, how ?

I thing this can be easily done using callback en setTimeout :
<script type="text/javascript"> var fallback_timer = setTimeout(function(){jQl.loadjQ('jquery.min.js');},5000); jQl.loadjQ('//any.cdn.com/jquery.min.js',function(){clearTimeout(fallback_timer);}); </script>
# On 7 October 2013 at 10:45, by Simon Replying to: jQl an asynchronous jQuery Loader

This is great! Unfortunately I get problems due to inline calls getting run before the jquery dependant modules. As you say “At the moment, inline call executions are not waiting jQuery-dependent modules, but only jQuery core.”

Are there any way to solve this? Is it possible to queue these to run after the jQuery dependant modules?
# On 17 January 2014 at 13:00, by Recupero Dati Hard Disk [Robert - owner] Replying to: jQl an asynchronous jQuery Loader

Hello Cédric

reading this page
https://developers.google.com/speed/docs/insights/UseAsync

looks like that your script do provides a great solution for the google directives, since in the scripts list, jquery is not yet present, great for you and the amount of contacts you could receive.

Now the problem is :-))) ... reading the comments I don’t understand if it works and how to manage jquery + the various plugins I do use in my website for the recupero dati hard disk.

I do use “standard” and “typical” jquery plugins like scroll to top a jquery navigation menu (really cool, though), some modal lightbox like.

Can you kindly provide the actual status of your script?

Does it allow the asynchronous loading of jquery?
What does it mean that the scripts must reside on the same domain?

Thank you for the clarifications

Robert
# On 17 January 2014 at 21:04, by Recupero Dati Hard Disk [Robert - owner] Replying to: jQl an asynchronous jQuery Loader

Please allow me a kind suggestion:

in the github repository it would be useful to place a couple of real world examples, like one page with jquery plus some jquery plugins that normally won’t work if someone places the calls script at the end of the document.

This would help newbies (like me) to get a better idea about the fucntionality and where to place the scripts.

Thank you

Robert
# On 9 April 2014 at 13:23, by Alexi Replying to: jQl an asynchronous jQuery Loader

Link not work

http://www.yterium.net/jQl/demos/jquery-loadjQ.php

If you can repair it... thanks
# On 14 March 2016 at 22:45, by wp-admin Replying to: jQl an asynchronous jQuery Loader

I tried it and it works, thank you very much. It has long been looking for a solution.
# On 19 January 2018 at 18:37, by Ariel Estrin Replying to: jQl an asynchronous jQuery Loader

THANK YOU SO MUCH !!!!
# On 2 May 2018 at 10:19, by David Replying to: jQl an asynchronous jQuery Loader

Hi!

Since the script is elder than 5 years, is it still working with latest iquery versions?

The demo is broken :-(
# On 31 July 2019 at 14:54, by Cedric Replying to: jQl an asynchronous jQuery Loader

Hi all,

I put the demo file online again, however it was still available on GitHub https://github.com/Cerdic/jQl/tree/master/demos

Please note that jQl is still perfectly working with last version of jQuery and I’m using it now for years on production website without any trouble.

It’s also used in the CMS SPIP to async load the minified/concatened JS file https://zone.spip.net/trac/spip-zone/changeset/85361/spip-zone