CloudFlare'nın Roket Yükleyicisi gerçekte nasıl çalışıyor (ve bir geliştirici uyumluluğu nasıl sağlayabilir)?

CloudFlare , Rocket Loader (hem ücretsiz hem de ücretli hesaplarda) adı verilen çığır açan bir teknolojiye sahiptir . Fakat gerçekte nasıl çalışır?

Onlar sahip çift arasında sayfalarında teknolojiyi tanımlamak değil, teknik detaylar bir sürü. Anahtar özelliklerinden biri, tüm Javascript yüklerini engelleyici olmayan bir şekilde (eşzamansız) yüklemesidir , ki bu inanılmaz bir başarı! Bu, HTML / CSS'nin komut dosyalarının yüklenmesini ve çalışmasını beklemeden oluşturulabileceği anlamına gelir.

Bu nasıl mümkün olabilir?

Şüphesiz, sadece <script>kullanmak için tüm etiketleri değiştiremez async="true"ya defer="true"da birkaç şeyi kıracağı için ...

1. Komut dosyalarının hala doğru sırada yüklenmesi gerekir (örneğin, jQuery kütüphanesi yüklenene kadar jQuery eklentilerini yükleyemezsiniz.)
2. document.write()Bu betikler içindeki çağrıların çalışması gerekir ( görünüşe göre bunlar tipik asenkron komut dosyalarında hiçbir şey yapmaz ).
3. DOMContentLoaded olayı ne olacak? Bazı komut dosyaları bu tetiklendikten sonra yüklenirse , olay işleyicileri tetiklenmez mi?

Bir geliştirici olarak, sitelerimin / komut dosyalarımın / eklentilerimin Roket Yükleyici ile uyumlu kalmasını sağlamak için bilmem gereken başka bir şey var mı?

CloudFlare Roket Loader açıklar gibi bu ...

Roket Yükleyici, window.onload'dan sonra herhangi bir JavaScript kodunu güvenle çalıştırabilen hafif bir sanal tarayıcıyla birleştirilmiş genel amaçlı bir eşzamansız JavaScript yükleyicisidir.

Roket Yükleyici bir sürü şey yapar:

1. Sayfanızdaki tüm komut dosyalarının, sayfanızın içeriğinin yüklenmesini engellememesini sağlar;
2. Üçüncü taraf komut dosyaları da dahil olmak üzere sayfanızdaki tüm komut dosyalarını eşzamansız olarak yükler;
3. Tüm komut dosyası isteklerini, birden fazla yanıtın yayınlanabileceği tek bir istek halinde bir araya getirir;
4. Komut dosyalarını daha akıllıca depolamak için çoğu tarayıcıda ve hemen hemen tüm akıllı telefonlarda LocalStorage kullanır, böylece gerekmedikçe yeniden ayarlanmazlar.

Yani bu oldukça havalı, ama nasıl başardı?

CloudFlare + Roket Yükleyicisini kendi sitemde çalıştırırken okuduğum ve keşfettiğim şeye göre, kabaca bu şekilde çalışıyor ...

1. Bir CloudFlare sunucusundan bir HTML sayfası istendiğinde, onu kaynak web sunucusundan yükledikten sonra, tüm komut dosyası etiketlerini yeniden yazar. <script type="text/rocketscript">

2. Tarayıcılar doğal olarak "text / rocketscript" biçimini anlamadıkları için script etiketlerini yok sayarlar.

3. CloudFlare ayrıca cloudflare.min.js, sihri gerçekleştiren sayfaya ek bir komut dosyası ekler ( burada biçimlendirilmiş sürüme bakın ). Bu başlangıçta tarayıcı tarafından yüklenen tek komut dosyasıdır (zaman uyumsuz olarak).

4. Bu komut dosyası, "text / rocketscript" türündeki tüm komut dosyaları için sayfayı ayrıştırır.

5. Daha sonra bu komut dosyalarından herhangi birinin tarayıcının yerel deposunda zaten var olup olmadığını kontrol eder. Değilse, daha sonra CloudFlare CDN'sinden onlar için (mantıksal paketlerde birleştirilmiş) bir AJAX talebi yapar. Senaryoları birlikte nasıl gruplayacağımı tam olarak bilmiyorum.

6. CDN sunucuları komut dosyalarını (birkaç farklı sunucudan gelebilir: Google, Twitter, Facebook, diğer CDN'ler vb.), Önbelleklerinden veya orijinal sunuculardan toplar ve geri göndermeden önce bunları birleştirir, küçültür ve GZIP Tarayıcıya

7. Söz ettikleri bu sanal tarayıcı , aşağıdaki komutların her birini doğru sırayla çalıştıran ve aşağıdakileri yapan basit bir JavaScript olmalı:

   • Tüm çağrıları yakalamak document.write()ve bu içeriğe sayfadaki doğru konuma enjekte etmek. (Muhtemelen tarayıcının write()işlevini özel bir işlevle değiştirerek?)
   • DOMContentLoaded ve load gibi olayların yeniden başlatılması .

(Belki rağmen aslında oldukça çalıştığını şok olduğum o değil her zaman ). Ancak normal şartlar altında, geliştiricilerin JavaScriptlerini uyumlu hale getirmek için özel bir şey yapmaları gerektiğini düşünmüyorum.

Bu bir topluluk wiki, bu yüzden lütfen eksik olan ek ayrıntıları düzenle ve ekle.