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...
Prochain SlideShare
Chargement dans…5
×

JQl : jQuery Async loader

1 236 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 236
Sur SlideShare
0
Issues des intégrations
0
Intégrations
23
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×