SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
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

Más contenido relacionado

Destacado

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.pdfmarketingartwork
 
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 2024Neil 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 2024Albert 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 InsightsKurio // 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 2024Search 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 summarySpeakerHub
 
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 IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Destacado (20)

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
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

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