Come funziona effettivamente il caricatore di razzi di CloudFlare (e come può uno sviluppatore garantire la compatibilità)?

CloudFlare ha una tecnologia abbastanza innovativa chiamata Rocket Loader (sia su account gratuiti che a pagamento). Ma come funziona davvero?

Hanno un paio di pagine che descrivono la tecnologia , ma non molti dettagli tecnici. Una caratteristica chiave è che tutto il Javascript viene caricato in modo non bloccante (in modo asincrono) , il che è un'impresa davvero incredibile! Ciò significa che è possibile eseguire il rendering di HTML / CSS senza attendere il caricamento e l'esecuzione degli script.

Come è possibile?

Sicuramente non può semplicemente cambiare tutti i <script>tag da usare async="true"o in defer="true"quanto ciò spezzerebbe diverse cose ...

1. Gli script devono ancora essere caricati nell'ordine corretto (ad esempio, non è possibile caricare i plug-in jQuery fino a quando non è stata caricata la libreria jQuery.)
2. document.write()le chiamate in questi script devono funzionare ( apparentemente non fanno nulla nei tipici script asincroni ).
3. Che dire dell'evento DOMContentLoaded? Se alcuni script vengono caricati dopo l'attivazione, i gestori degli eventi non vengono attivati?

E come sviluppatore, c'è qualcos'altro di cui devo essere consapevole per garantire che i miei siti / script / plugin rimangano compatibili con Rocket Loader?

CloudFlare descrive Rocket Loader come questo ...

Rocket Loader è un caricatore JavaScript asincrono per uso generico abbinato a un browser virtuale leggero che può eseguire in modo sicuro qualsiasi codice JavaScript dopo window.onload.

Rocket Loader fa un sacco di cose:

1. Assicura che tutti gli script sulla tua pagina non blocchino il caricamento del contenuto della tua pagina;
2. Carica tutti gli script sulla tua pagina, inclusi script di terze parti, in modo asincrono;
3. Raggruppa tutte le richieste di script in un'unica richiesta su cui è possibile trasmettere più risposte;
4. Utilizza LocalStorage sulla maggior parte dei browser e quasi tutti gli smartphone per archiviare gli script in modo più intelligente in modo che non vengano recuperati se non necessario.

Quindi è abbastanza bello, ma come lo raggiunge?

Da quello che ho letto e scoperto eseguendo CloudFlare + Rocket Loader sul mio sito, funziona più o meno in questo modo ...

1. Quando una pagina HTML viene richiesta da un server CloudFlare, dopo averla caricata dall'host Web di origine, riscrive tutti i tag di script in <script type="text/rocketscript">

2. I browser ignorano naturalmente i tag di script in quanto non comprendono il formato "text / rocketscript"

3. CloudFlare inietta anche uno cloudflare.min.jsscript aggiuntivo nella pagina che esegue la magia ( vedi la versione formattata qui ). Questo è l'unico script inizialmente caricato dal browser (in modo asincrono).

4. Questo script analizza la pagina per tutti gli script con il tipo "text / rocketscript".

5. Quindi controlla se uno di questi script esiste già nella memoria locale del browser. In caso contrario, effettua una richiesta AJAX per loro (combinata in bundle logici) dal CloudNlare CDN. Non sono sicuro di come funzioni come raggruppare gli script.

6. I server CDN raccolgono gli script (che possono provenire da diversi server diversi: Google, Twitter, Facebook, altri CDN ecc.), Dalla loro cache o dai server di origine, quindi combinarli, minimizzarli e GZIP prima di rispedirli al browser.

7. Questa cosa del browser virtuale a cui si riferiscono deve essere semplicemente un codice JavaScript che esegue ciascuno di questi script nel giusto ordine, facendo cose come:

   • Catturare tutte le chiamate document.write()e iniettare quel contenuto nella posizione corretta sulla pagina. (Forse sovrascrivendo la write()funzione del browser con una personalizzata?)
   • Ripristino di eventi come DOMContentLoaded e caricamento .

Sono in realtà abbastanza scioccato che funziona (anche se forse esso non lo fa sempre ). Ma in circostanze normali, non penso che gli sviluppatori debbano fare qualcosa di speciale per rendere compatibile il loro JavaScript.

Questa è una wiki della comunità, quindi modifica e aggiungi eventuali dettagli aggiuntivi mancanti.