web-dev-qa-db-fra.com

Comment fonctionne réellement 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 (comptes gratuits et comptes payants) ). Mais comment ça marche réellement?

Ils ont un couple de pages cela décrivent la technologie , mais pas beaucoup de détails techniques. Une caractéristique clé est que cela () charge tout le Javascript de manière non bloquante (de manière asynchrone) , ce qui est un exploit incroyable! Cela signifie que le code HTML/CSS peut être rendu sans attendre que les scripts soient chargés et exécutés.

CloudFlare Rocket Loader diagram

Comment est-ce possible?

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

  1. Les scripts doivent toujours être chargés dans le bon ordre (par exemple, vous ne pouvez pas charger de 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, ils ne font rien dans les scripts asynchrones classiques ).
  3. Qu'en est-il de l'événement DOMContentLoaded? Si certains scripts sont chargés après le déclenchement , leurs gestionnaires d'événements ne sont-ils pas déclenchés?

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

javascriptcdnoptimizationcloudflare
29
Simon East

CloudFlare décrit Rocket Loader commethis ...

Rocket Loader est un chargeur JavaScript asynchrone à usage général associé à un navigateur virtuel léger pouvant exécuter en toute sécurité tout code JavaScript après window.onload.

Rocket Loader fait un tas de choses:

  1. Cela 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 requêtes de script en une seule requête sur laquelle plusieurs réponses peuvent être diffusées;
  4. Utilise LocalStorage sur la plupart des navigateurs et de presque tous les téléphones intelligents pour stocker les scripts de manière plus intelligente, afin de ne pas les récupérer à moins que de besoin.

Alors c'est plutôt cool, mais comment y arriver?

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, toutes les balises de script sont réécrites en _<script type="_ text/rocketscript _">_

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

  3. CloudFlare injecte également un script supplémentaire cloudflare.min.js dans la page qui exécute la magie ( voir la version formatée ici ). C'est le 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 la mémoire de stockage locale du navigateur. Si ce n'est pas le cas, il fait alors une demande AJAX (combinée dans des 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 différents serveurs: Google, Twitter, Facebook, autres CDN, etc.), soit de leur cache, soit des serveurs Origin, puis combinent, réduisent et gzip avant de les renvoyer. au navigateur.

  7. Ce navigateur virtuel auquel ils font référence doit simplement être du code JavaScript qui exécute ensuite chacun de ces scripts dans le bon ordre, en effectuant les opérations suivantes:

    • Intercepter tous les appels sur document.write() et injecter ce contenu à l'emplacement correct de la page. (Peut-être en écrasant la fonction write() du navigateur avec une fonction personnalisée?)
    • Les événements de redéclenchement tels que DOMContentLoaded et chargent .

Je suis en fait assez choqué que cela fonctionne (bien que peut-être itne =toujours). Mais dans des circonstances normales, je ne pense pas que les développeurs doivent faire quelque chose de spécial pour rendre leur code JavaScript compatible.

Ceci est un wiki de communauté, veuillez donc éditer et ajouter tout détail supplémentaire manquant.

24
Simon East