Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQl
Cédric Morin
@GusLeLapin

jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
Cékoidon ?
• Chargeur asynchrone pour jQuery
• Permettre le chargement non-bloquant de jQuery&plugin
• Prendre en charge l...
jQl n’est pas grand…
• Si pour charger du javascript sans bloquer le reste il faut d’abord
charger le chargeur en bloquant...
mais il est vaillant !
• Chargement de jQuery

• Chargement de jQuery depuis un CDN

• Chargement de jQuery + appel d’une ...
jQl est petit mais il peut beaucoup !
• Chargement de jQuery + plugins en parallèle

• Chargement parallèle de jQuery et d...
jQl nous libère avec un tour de sorcière
• Le principal problème du chargement asynchrone :
• les <script>…</script> inlin...
jQl est notre ami
• Intercepte et met en attente jQuery(function(){})

• La fonction sera lancée lorsque jQuery est chargé...
jQl est notre ami
• Intercepte et met en attente jQuery.getScript(‘’,function(){})

• le chargement du script sera lancé a...
La chronologie
• Chargement
• Charge jQuery (DOM injection) et les plugins en parallèle (xhr)
• Dès que jQuery est chargé
...
En résumé
• Bien adapté au chargement d’1 script monobloc minifié+concaténé
contenant jQuery+plugins
• Chargement parallèle...
Exemples
• http://www.yterium.net/
http://www.webpagetest.org/result/131104_BN_P4R/

jQl - 4/11/2013 - Chargeur Asynchrone...
• http://www.yterium.net/
http://www.webpagetest.org/result/131104_BN_P4R/

jQl - 4/11/2013 - Chargeur Asynchrone pour jQu...
Exemples
• http://www.monde-diplomatique.fr/
http://www.webpagetest.org/result/131104_GM_PQK/

jQl - 4/11/2013 - Chargeur ...
Exemples
• http://www.monde-diplomatique.fr/
http://www.webpagetest.org/result/131104_GM_PQK/
(ici jQl est inséré après l’...
Merci
Cédric Morin
@GusLeLapin
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader
https://github.com/Cerdic/jQl

jQl...
Upcoming SlideShare
Loading in …5
×

JQl : jQuery Async loader

1,582 views

Published on

  • Be the first to comment

  • Be the first to like this

JQl : jQuery Async loader

  1. 1. jQl Cédric Morin @GusLeLapin jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  2. 2. Cékoidon ? • Chargeur asynchrone pour jQuery • Permettre le chargement non-bloquant de jQuery&plugin • Prendre en charge les <script> inline dans la page jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  3. 3. 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 page avant les appels de CSS externes (http://www.stevesouders.com/blog/ 2009/05/06/positioning-inline-scripts/) jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  4. 4. mais il est vaillant ! • Chargement de jQuery • Chargement de jQuery depuis un CDN • Chargement de jQuery + appel d’une callback après chargement • jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  5. 5. 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 jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  6. 6. 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 modules Souvent 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() jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  7. 7. 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(){}) jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  8. 8. 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é jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  9. 9. 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 jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  10. 10. 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(){}) jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  11. 11. Exemples • http://www.yterium.net/ http://www.webpagetest.org/result/131104_BN_P4R/ jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  12. 12. • http://www.yterium.net/ http://www.webpagetest.org/result/131104_BN_P4R/ jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  13. 13. Exemples • http://www.monde-diplomatique.fr/ http://www.webpagetest.org/result/131104_GM_PQK/ jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  14. 14. 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) jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  15. 15. Merci Cédric Morin @GusLeLapin http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader https://github.com/Cerdic/jQl jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13

×