Como o Rocket Loader da CloudFlare realmente funciona (e como um desenvolvedor pode garantir a compatibilidade)?

O CloudFlare possui uma tecnologia inovadora chamada Rocket Loader (em contas gratuitas e pagas). Mas como isso realmente funciona?

Eles têm um par de páginas que descrevem a tecnologia , mas não um monte de detalhes técnicos. Uma característica importante é que ele carrega todo o Javascript de maneira não-bloqueante (assincronamente) , o que é uma façanha incrível! Isso significa que o HTML / CSS pode ser renderizado sem aguardar o carregamento e a execução de scripts.

Como isso é possível?

Certamente, ele não pode simplesmente mudar todas as <script>tags para usar, async="true"ou defer="true"isso quebraria várias coisas ...

1. Os scripts ainda precisam ser carregados na ordem correta (por exemplo, você não pode carregar os plug-ins do jQuery até que a biblioteca do jQuery seja carregada.)
2. document.write()as chamadas nesses scripts precisam funcionar ( aparentemente elas não fazem nada nos scripts assíncronos típicos ).
3. E o evento DOMContentLoaded? Se alguns scripts forem carregados após o acionamento, os manipuladores de eventos não dispararão?

E, como desenvolvedor, há mais alguma coisa que eu preciso estar ciente para garantir que meus sites / scripts / plugins permaneçam compatíveis com o Rocket Loader?

CloudFlare descreve o Rocket Loader como este ...

O Rocket Loader é um carregador JavaScript assíncrono de uso geral, associado a um navegador virtual leve, que pode executar com segurança qualquer código JavaScript após o window.onload.

O Rocket Loader faz várias coisas:

1. Ele garante que todos os scripts da sua página não impeçam o carregamento do conteúdo da sua página;
2. Carrega todos os scripts da sua página, incluindo scripts de terceiros, de forma assíncrona;
3. Agrupa todos os pedidos de script em um único pedido, sobre o qual várias respostas podem ser transmitidas;
4. Usa o LocalStorage na maioria dos navegadores e em quase todos os smartphones para armazenar scripts de forma mais inteligente, para que não sejam recarregados a menos que seja necessário.

Então isso é muito legal, mas como isso acontece?

Pelo que li e descobri ao executar o CloudFlare + Rocket Loader no meu próprio site, ele funciona aproximadamente assim ...

1. Quando uma página HTML é solicitada a partir de um servidor CloudFlare, após carregá-la no host de origem, ela reescreve todas as tags de script em <script type="text/rocketscript">

2. Os navegadores ignoram naturalmente as tags de script, pois não entendem o formato "text / rocketscript"

3. O CloudFlare também injeta um cloudflare.min.jsscript adicional na página que executa a mágica ( veja a versão formatada aqui ). Este é o único script inicialmente carregado pelo navegador (assincronamente).

4. Este script analisa a página para qualquer script com o tipo "text / rocketscript".

5. Em seguida, verifica se algum desses scripts já existe no armazenamento local do navegador. Caso contrário, ele fará uma solicitação AJAX para eles (combinada em pacotes lógicos) da CDN do CloudFlare. Não sei ao certo como funciona como agrupar os scripts.

6. Os servidores CDN reúnem os scripts (que podem vir de vários servidores diferentes: Google, Twitter, Facebook, outros CDNs etc.), a partir do cache ou dos servidores de origem, e depois os combinam, minimizam e GZIP antes de enviá-los de volta. para o navegador.

7. Essa coisa de navegador virtual a que se referem deve ser simplesmente algum JavaScript que executa cada um desses scripts na ordem correta, fazendo coisas como:

   • Captura de todas as chamadas document.write()e injeção desse conteúdo no local correto da página. (Possivelmente substituindo a write()função do navegador por uma função personalizada?)
   • Recuperando eventos como DOMContentLoaded e load .

Estou realmente muito chocado que ele funciona (embora talvez isso não sempre ). Mas, em circunstâncias normais, acho que os desenvolvedores não precisam fazer nada de especial para tornar seu JavaScript compatível.

Este é um wiki da comunidade, portanto, edite e adicione qualquer detalhe adicional que estiver faltando.