JQl : jQuery Async loader

jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery

jQl

Cédric Morin@GusLeLapin

lundi 4 novembre 13


Cékoidon ?

• Chargeur asynchrone pour jQuery

• Permettre le chargement non-bloquant de jQuery&plugin

• Prendre en charge les <script> inline dans la page

lundi 4 novembre 13


jQl n’est pas grand…

• Si pour charger du javascript sans bloquer le reste il faut d’abord charger le chargeur en bloquant tout… on a tout perdu

• 1.7ko minifié, ~700 octets minifié+gzip

• Permet de l’inclure au début du <head> de chaque pageavant les appels de CSS externes (http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/)

lundi 4 novembre 13

http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/





mais il est vaillant !

• Chargement de jQuery

• Chargement de jQuery depuis un CDN

• Chargement de jQuery + appel d’une callback après chargement

•

lundi 4 novembre 13


jQl est petit mais il peut beaucoup !

• Chargement de jQuery + plugins en parallèle

• Chargement parallèle de jQuery et des plugins

• Lancement de jQuery

• Lancement des plugins, dans leur ordre d’arrivée (et non d’appel)

• Pas de gestion complexe de dépendance

lundi 4 novembre 13


jQl nous libère avec un tour de sorcière

• Le principal problème du chargement asynchrone :

• les <script>…</script> inline dans la page qui utilisent jQuery et plugins

• avec un CMS ou un framework, la page est composée de morceaux provenant de différents modulesSouvent compliqué de modifier tous les appels de <script>

• La magie de jQl : intercepte et met en attente

• tous les appels à jQuery(document).ready() (et variantes)

• tous les appels à jQuery.getScript()

lundi 4 novembre 13


jQl est notre ami

• Intercepte et met en attente jQuery(function(){})

• La fonction sera lancée lorsque jQuery est chargé ET le DOM ready

• Variantes :

• $(function(){})

• jQuery().ready(function(){})

• $().ready(function(){})

lundi 4 novembre 13


jQl est notre ami

• Intercepte et met en attente jQuery.getScript(‘’,function(){})

• le chargement du script sera lancé après que jQuery soit chargé et initialisé

lundi 4 novembre 13


La chronologie

• Chargement

• Charge jQuery (DOM injection) et les plugins en parallèle (xhr)

• Dès que jQuery est chargé

• initialise les plugins finis de chargé, dans l’ordre d’arrivée /!\

• lance les appels jQuery.getScript() mis en attente

• relance les jQuery().ready() en attente

• appelle la fonction de callback

lundi 4 novembre 13


En résumé

• Bien adapté au chargement d’1 script monobloc minifié+concaténé contenant jQuery+plugins

• Chargement parallèle des plugins assez simpliste

• alternativement utiliser getScript() mais le chargement démarre plus tard

• Permet un HTML unique avec scripts inline qui fonctionne aussi bien en synchrone qu’en asynchrone

• il faut parfois encapsuler dans un jQuery(function(){}) pour ne pas casser

• il faudrait un jQuery().asap(function(){})

lundi 4 novembre 13


Exemples

• http://www.yterium.net/http://www.webpagetest.org/result/131104_BN_P4R/

lundi 4 novembre 13

http://www.yterium.net


http://www.webpagetest.org/result/131104_BN_P4R/



• http://www.yterium.net/http://www.webpagetest.org/result/131104_BN_P4R/

lundi 4 novembre 13






Exemples

• http://www.monde-diplomatique.fr/http://www.webpagetest.org/result/131104_GM_PQK/

lundi 4 novembre 13

http://www.monde-diplomatique.fr


http://www.webpagetest.org/result/131104_GM_PQK/



Exemples

• http://www.monde-diplomatique.fr/http://www.webpagetest.org/result/131104_GM_PQK/(ici jQl est inséré après l’appel à la CSS qui devient alors bloquante)

lundi 4 novembre 13






Merci

Cédric Morin@GusLeLapin

http://www.yterium.net/jQl-an-asynchronous-jQuery-Loaderhttps://github.com/Cerdic/jQl

lundi 4 novembre 13

http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader

http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader

https://github.com/Cerdic/jQl

https://github.com/Cerdic/jQl

JQl : jQuery Async loader

Documents

Transcript of JQl : jQuery Async loader