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

826 views
689 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
826
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×