webentwicklung-frage-antwort-db.com.de

Wie funktioniert der Rocket Loader von CloudFlare tatsächlich (und wie kann ein Entwickler die Kompatibilität sicherstellen)?

CloudFlare hat eine bahnbrechende Technologie namens Rocket Loader (sowohl für kostenlose als auch für kostenpflichtige Konten). Aber wie geht das eigentlich?

Sie haben ein Paar von Seiten das beschreibt die Technologie , aber nicht viele technische Details. Ein Schlüsselmerkmal ist, dass es alle Javascript-Ladevorgänge blockierungsfrei (asynchron) macht, was eine unglaubliche Leistung ist! Dies bedeutet, dass HTML/CSS gerendert werden kann, ohne auf das Laden und Ausführen von Skripten zu warten.

CloudFlare Rocket Loader diagram

Wie ist das möglich?

Sicherlich kann es nicht einfach alle <script> -Tags ändern, um async="true" oder defer="true" zu verwenden, da dies verschiedene Probleme verursachen würde ...

  1. Skripte müssen weiterhin in der richtigen Reihenfolge geladen werden (zum Beispiel können Sie jQuery-Plugins erst laden, wenn die jQuery-Bibliothek geladen wurde.)
  2. document.write() Aufrufe in diesen Skripten müssen funktionieren ( anscheinend tun diese in typischen asynchronen Skripten nichts ).
  3. Was ist mit dem Ereignis DOMContentLoaded? Wenn einige Skripte geladen werden , nachdem dies ausgelöst hat, werden ihre Event-Handler nicht ausgelöst?

Und gibt es als Entwickler noch etwas, das ich beachten muss, um sicherzustellen, dass meine Websites/Skripte/Plugins mit Rocket Loader kompatibel bleiben?

javascriptcdnoptimizationcloudflare
29
Simon East

CloudFlare beschreibt Rocket Loader likethis ...

Rocket Loader ist ein asynchroner Allzweck-JavaScript-Loader, der mit einem einfachen virtuellen Browser gekoppelt ist und nach window.onload jeden JavaScript-Code sicher ausführen kann.

Rocket Loader macht eine Reihe von Dingen:

  1. Dadurch wird sichergestellt, dass nicht alle Skripts auf Ihrer Seite das Laden des Inhalts Ihrer Seite blockieren.
  2. Lädt alle Skripts auf Ihrer Seite, einschließlich Skripts von Drittanbietern, asynchron.
  3. Bündelt alle Skriptanforderungen in einer einzigen Anforderung, über die mehrere Antworten gestreamt werden können.
  4. Verwendet LocalStorage in den meisten Browsern und auf fast allen Smartphones, um Skripts intelligenter zu speichern, sodass sie nur bei Bedarf erneut abgerufen werden können.

Das ist also ziemlich cool, aber wie schafft es das?

Nach dem, was ich beim Ausführen von CloudFlare + Rocket Loader auf meiner eigenen Website gelesen und entdeckt habe, funktioniert es ungefähr so ​​...

  1. Wenn eine HTML-Seite von einem CloudFlare-Server angefordert wird, schreibt sie nach dem Laden vom Origin-Webhost alle Skript-Tags in _<script type="_ text/rocketscript _">_

  2. Browser ignorieren natürlich die Skript-Tags, da sie das Format "text/rocketscript" nicht verstehen.

  3. CloudFlare fügt außerdem ein zusätzliches cloudflare.min.js Skript in die Seite ein, das die Magie ausführt ( siehe formatierte Version hier ). Dies ist das einzige Skript, das ursprünglich vom Browser geladen wurde (asynchron).

  4. Dieses Skript analysiert die Seite nach Skripten vom Typ "text/rocketscript".

  5. Anschließend wird geprüft, ob eines dieser Skripte bereits im lokalen Speicher des Browsers vorhanden ist. Andernfalls wird eine AJAX Anforderung für sie (in logischen Bündeln zusammengefasst) vom CloudFlare-CDN gesendet. Ich bin nicht ganz sicher, wie es funktioniert, um die Skripte zu gruppieren.

  6. Die CDN-Server erfassen die Skripte (die von verschiedenen Servern stammen können: Google, Twitter, Facebook, andere CDNs usw.) entweder aus ihrem Cache oder von den Origin-Servern und kombinieren, verkleinern und GZIP-Dateien, bevor sie zurückgesendet werden zum Browser.

  7. Bei diesem virtuellen Browser , auf den sie verweisen, muss es sich lediglich um ein JavaScript handeln, das dann jedes dieser Skripte in der richtigen Reihenfolge ausführt und Folgendes ausführt:

    • Alle Aufrufe von document.write() abfangen und diesen Inhalt an der richtigen Stelle auf der Seite einfügen. (Möglicherweise durch Überschreiben der write() -Funktion des Browsers mit einer benutzerdefinierten?)
    • Ereignisse wie DOMContentLoaded und load werden erneut ausgelöst.

Ich bin eigentlich ziemlich schockiert, dass es funktioniert (obwohl vielleicht esnichtimmer ). Aber unter normalen Umständen glaube ich nicht, dass Entwickler etwas Besonderes tun müssen, um ihre JavaScript-Kompatibilität zu gewährleisten.

Dies ist ein Community-Wiki. Bearbeiten Sie daher alle fehlenden Details und fügen Sie sie hinzu.

24
Simon East