SlideShare une entreprise Scribd logo
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 les <script> inline dans la page

jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
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 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
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
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
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
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
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
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
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
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
• http://www.yterium.net/
http://www.webpagetest.org/result/131104_BN_P4R/

jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 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
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
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

Contenu connexe

En vedette

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 

En vedette (20)

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 

JQl : jQuery Async loader

  • 1. jQl Cédric Morin @GusLeLapin jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery lundi 4 novembre 13
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. • 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. 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. 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