Comment fonctionne Rocket Loader de CloudFlare (et comment un développeur peut-il garantir la compatibilité)?

CloudFlare possède une technologie révolutionnaire appelée Rocket Loader (sur les comptes gratuits et payants). Mais comment cela fonctionne-t-il réellement?

Ils ont deux ou trois des pages qui décrivent la technologie , mais pas beaucoup de détails techniques. Une caractéristique clé est qu'il charge tout Javascript de manière non bloquante (de manière asynchrone) , ce qui est un exploit incroyable! Cela signifie que le HTML / CSS peut être rendu sans attendre le chargement et l'exécution des scripts.

Comment est-ce possible?

Certes, il ne peut pas simplement changer toutes les <script>balises à utiliser async="true"ou defer="true"cela casserait plusieurs choses ...

1. Les scripts doivent toujours être chargés dans le bon ordre (par exemple, vous ne pouvez pas charger les plug-ins jQuery tant que la bibliothèque jQuery n'est pas chargée.)
2. document.write()les appels dans ces scripts doivent fonctionner ( apparemment, ceux-ci ne font rien dans les scripts asynchrones typiques ).
3. Qu'en est-il de l'événement DOMContentLoaded? Si certains scripts sont chargés après que cela s'est déclenché, leurs gestionnaires d'événements ne sont-ils pas déclenchés?

Et en tant que développeur, y a-t-il autre chose dont je dois être conscient pour que mes sites / scripts / plugins restent compatibles avec Rocket Loader?

CloudFlare décrit Rocket Loader comme ceci ...

Rocket Loader est un chargeur JavaScript asynchrone à usage général couplé à un navigateur virtuel léger qui peut exécuter en toute sécurité n'importe quel code JavaScript après window.onload.

Rocket Loader fait un tas de choses:

1. Il garantit que tous les scripts de votre page ne bloqueront pas le chargement du contenu de votre page;
2. Charge tous les scripts de votre page, y compris les scripts tiers, de manière asynchrone;
3. Regroupe toutes les demandes de script en une seule demande sur laquelle plusieurs réponses peuvent être diffusées;
4. Utilise LocalStorage sur la plupart des navigateurs et presque tous les téléphones intelligents pour stocker plus intelligemment les scripts afin qu'ils ne soient pas récupérés à moins que cela ne soit nécessaire.

C'est donc plutôt cool, mais comment y parvient-il?

D'après ce que j'ai lu et découvert en exécutant CloudFlare + Rocket Loader sur mon propre site, cela fonctionne à peu près comme ceci ...

1. Lorsqu'une page HTML est demandée à un serveur CloudFlare, après l'avoir chargée à partir de l'hôte Web d'origine, elle réécrit toutes les balises de script dans <script type="text/rocketscript">

2. Les navigateurs ignorent naturellement les balises de script car ils ne comprennent pas le format "texte / rocketscript"

3. CloudFlare injecte également un cloudflare.min.jsscript supplémentaire dans la page qui effectue la magie ( voir la version formatée ici ). Il s'agit du seul script initialement chargé par le navigateur (de manière asynchrone).

4. Ce script analyse la page pour tous les scripts de type "text / rocketscript".

5. Il vérifie ensuite si l'un de ces scripts existe déjà dans le stockage local du navigateur. Si ce n'est pas le cas, il fait ensuite une demande AJAX pour eux (combinés en ensembles logiques) à partir du CDN CloudFlare. Je ne sais pas trop comment cela fonctionne pour regrouper les scripts.

6. Les serveurs CDN rassemblent les scripts (qui peuvent provenir de plusieurs serveurs différents: Google, Twitter, Facebook, autres CDN etc.), soit depuis leur cache, soit depuis les serveurs d'origine, puis les combinent, les minifient et les GZIP avant de les renvoyer au navigateur.

7. Ce navigateur virtuel auquel ils se réfèrent doit simplement être du JavaScript qui exécute ensuite chacun de ces scripts dans le bon ordre, en procédant par exemple:

   • Attraper tous les appels document.write()et injecter ce contenu au bon endroit sur la page. (Peut-être en remplaçant la write()fonction du navigateur par une fonction personnalisée?)
   • Redéclencher des événements tels que DOMContentLoaded et charger .

Je suis en fait assez choqué que cela fonctionne (même si ce n'est peut-être pas toujours le cas ). Mais dans des circonstances normales, je ne pense pas que les développeurs doivent faire quelque chose de spécial pour rendre leur JavaScript compatible.

Il s'agit d'un wiki communautaire, veuillez donc modifier et ajouter tout détail supplémentaire manquant.