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:
- Ini memastikan bahwa semua skrip pada halaman Anda tidak akan memblokir konten halaman Anda dari memuat;
- Memuat semua skrip pada halaman Anda, termasuk skrip pihak ketiga, secara tidak sinkron;
- Bundel semua permintaan skrip ke dalam satu permintaan di mana beberapa respons dapat dialirkan;
- 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 ...
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
">
Peramban secara alami mengabaikan tag skrip karena mereka tidak memahami format "teks / roket"
CloudFlare juga menyuntikkan cloudflare.min.js
skrip tambahan ke halaman yang melakukan keajaiban ( lihat versi diformat di sini ). Ini adalah satu-satunya skrip yang pada awalnya dimuat oleh browser (tidak sinkron).
Skrip ini mem-parsing halaman untuk skrip apa pun dengan tipe "teks / roket".
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.
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.
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.