Bagaimana cara Rocket Loader CloudFlare bekerja (dan bagaimana pengembang memastikan kompatibilitasnya)?

CloudFlare memiliki teknologi yang sangat inovatif yang disebut Rocket Loader (baik pada akun gratis dan berbayar). Tetapi bagaimana cara kerjanya?

Mereka memiliki beberapa dari halaman yang menjelaskan teknologi , tetapi tidak banyak rincian teknis. Salah satu fitur utama adalah membuat semua Javascript memuat secara non-blocking (asinkron) , yang merupakan prestasi yang luar biasa! Ini berarti HTML / CSS dapat di-render tanpa menunggu skrip dimuat dan dijalankan.

Bagaimana mungkin?

Tentunya itu tidak bisa begitu saja mengubah semua <script>tag untuk digunakan async="true"atau defer="true"karena ini akan merusak beberapa hal ...

1. Skrip masih perlu dimuat dalam urutan yang benar (misalnya, Anda tidak dapat memuat plugin jQuery hingga pustaka jQuery dimuat.)
2. document.write()panggilan dalam skrip ini perlu berfungsi ( tampaknya ini tidak melakukan apa pun dalam skrip async khas ).
3. Bagaimana dengan acara DOMContentLoaded? Jika beberapa skrip di-load setelah ini dipicu, apakah event-handler-nya tidak dipicu?

Dan sebagai pengembang, apakah ada hal lain yang perlu saya perhatikan untuk memastikan situs / skrip / plugin saya tetap kompatibel dengan Rocket Loader?

CloudFlare menjelaskan Rocket Loader seperti ini ...

Rocket Loader adalah pemuat JavaScript asinkron untuk keperluan umum yang digabungkan dengan browser virtual ringan yang dapat dengan aman menjalankan kode JavaScript apa pun setelah window.onload.

Rocket Loader melakukan banyak hal:

1. Ini memastikan bahwa semua skrip pada halaman Anda tidak akan memblokir konten halaman Anda dari memuat;
2. Memuat semua skrip pada halaman Anda, termasuk skrip pihak ketiga, secara tidak sinkron;
3. Bundel semua permintaan skrip ke dalam satu permintaan di mana beberapa respons dapat dialirkan;
4. Menggunakan LocalStorage di sebagian besar browser dan hampir semua ponsel pintar untuk menyimpan skrip dengan lebih cerdas sehingga tidak dibuat ulang kecuali diperlukan.

Jadi itu keren, tapi bagaimana cara mencapainya?

Dari apa yang saya baca dan temukan dari menjalankan CloudFlare + Rocket Loader di situs saya sendiri, kerjanya kira-kira seperti ini ...

1. Ketika halaman HTML diminta dari server CloudFlare, setelah memuatnya dari host web asal, ia menulis ulang semua tag skrip ke dalam <script type="text/rocketscript">

2. Peramban secara alami mengabaikan tag skrip karena mereka tidak memahami format "teks / roket"

3. CloudFlare juga menyuntikkan cloudflare.min.jsskrip tambahan ke halaman yang melakukan keajaiban ( lihat versi diformat di sini ). Ini adalah satu-satunya skrip yang pada awalnya dimuat oleh browser (tidak sinkron).

4. Skrip ini mem-parsing halaman untuk skrip apa pun dengan tipe "teks / roket".

5. Kemudian memeriksa apakah ada skrip ini sudah ada di penyimpanan lokal browser. Jika tidak, itu kemudian membuat permintaan AJAX untuk mereka (digabungkan dalam bundel logis) dari CloudFlare CDN. Saya tidak yakin bagaimana cara mengelompokkan skrip.

6. Server CDN mengumpulkan skrip (yang mungkin berasal dari beberapa server berbeda: Google, Twitter, Facebook, CDN lain, dll.), Baik dari cache mereka, atau dari server asal, dan kemudian menggabungkan, memperkecil, dan GZIP sebelum mengirimnya kembali ke browser.

7. Peramban virtual ini yang mereka maksud hanya berupa JavaScript yang kemudian menjalankan setiap skrip ini dalam urutan yang benar, melakukan hal-hal seperti:

   • Menangkap semua panggilan ke document.write()dan menyuntikkan konten itu ke lokasi yang benar di halaman. (Mungkin dengan menimpa fungsi peramban write()dengan fungsi khusus?)
   • Retriggering events seperti DOMContentLoaded dan muat .

Saya sebenarnya cukup terkejut bahwa ia bekerja (meskipun mungkin itu tidak selalu ). Tetapi dalam keadaan normal, saya tidak berpikir pengembang perlu melakukan sesuatu yang khusus untuk membuat JavaScript mereka kompatibel.

Ini adalah wiki komunitas, jadi silakan edit dan tambahkan detail tambahan apa pun yang tidak ada.