CloudFlareのRocket Loaderは実際にはどのように機能しますか（また、開発者はどのように互換性を確保できますか）？

CloudFlareには、Rocket Loaderと呼ばれる画期的なテクノロジーがあります（無料アカウントと有料アカウントの両方）。しかし、実際にはどのように機能しますか？

彼らは持っている夫婦のページ技術を説明し、ではなく技術的な詳細の多くを。重要な機能の1つは、すべてのJavascriptを非ブロッキング方式で（非同期的に）ロードすることです。これは非常に素晴らしい機能です。これは、スクリプトのロードと実行を待たずにHTML / CSSをレンダリングできることを意味します。

そんなことがあるものか？

確かにそれは単純にすべての変更はできません<script>使用にタグをasync="true"か、defer="true"このようないくつかのものを壊します...

1. スクリプトは正しい順序でロードする必要があります（たとえば、jQueryライブラリがロードされるまでjQueryプラグインをロードできません）。
2. document.write()これらのスクリプトの呼び出しは機能する必要があります（明らかに、これらは典型的な非同期スクリプトでは何もしません）。
3. DOMContentLoadedイベントはどうですか？これがトリガーされた後にいくつかのスクリプトがロードされると、それらのイベントハンドラーはトリガーされなくなりますか？

また、開発者として、サイト/スクリプト/プラグインがRocket Loaderとの互換性を維持するために注意する必要があることは他にありますか？

CloudFlareはRocket Loaderを次のように 説明しています...

Rocket Loaderは、window.onloadの後にJavaScriptコードを安全に実行できる軽量の仮想ブラウザーと結合された汎用非同期JavaScriptローダーです。

Rocket Loaderは多くのことを行います。

1. ページ上のすべてのスクリプトがページのコンテンツの読み込みをブロックしないようにします。
2. サードパーティのスクリプトを含む、ページ上のすべてのスクリプトを非同期でロードします。
3. すべてのスクリプトリクエストを単一のリクエストにバンドルし、複数のレスポンスをストリーミングできます。
4. ほとんどのブラウザーとほぼすべてのスマートフォンでLocalStorageを使用して、スクリプトをよりインテリジェントに保存し、必要な場合を除いて再取得しないようにします。

それはかなりクールですが、どのようにそれを達成しますか？

私が自分のサイトでCloudFlare + Rocket Loaderを実行して読んで発見したことから、おおよそ次のように機能します...

1. CloudFlareサーバーからHTMLページが要求されると、オリジンWebホストから読み込んだ後、すべてのスクリプトタグを <script type="text/rocketscript">

2. ブラウザは「text / rocketscript」の形式を理解しないため、スクリプトタグを自然に無視します。

3. CloudFlare cloudflare.min.jsは、魔法を実行する追加のスクリプトもページに挿入します（フォーマットされたバージョンはこちらをご覧ください）。これは、ブラウザーによって（非同期的に）最初にロードされる唯一のスクリプトです。

4. このスクリプトは、「text / rocketscript」タイプのスクリプトのページを解析します。

5. 次に、これらのスクリプトのいずれかがブラウザーのローカルストレージに既に存在するかどうかを確認します。そうでない場合は、CloudFlare CDNから（論理バンドルで結合された）それらに対してAJAXリクエストを行います。スクリプトをグループ化する方法がどのように機能するかはよくわかりません。

6. CDNサーバーは、キャッシュまたはオリジンサーバーからスクリプト（Google、Twitter、Facebook、その他のCDNなどの複数の異なるサーバーから取得される可能性があります）を収集し、それらを結合、縮小、GZIPしてから返信しますブラウザに。

7. 彼らが参照するこの仮想ブラウザは、単にこれらの各スクリプトを正しい順序で実行するJavaScriptでなければなりません。

   • すべての呼び出しをキャッチしdocument.write()、そのコンテンツをページ上の正しい場所に挿入します。（おそらくブラウザのwrite()機能をカスタム機能で上書きすることにより？）
   • DOMContentLoaded やloadなどのイベントを再トリガーします。

私は実際にそれが機能することにかなりショックを受けています（おそらくそうで はない かもしれませんが）。しかし、通常の状況では、開発者がJavaScriptを互換にするために特別なことをする必要はないと思います。

これはコミュニティWikiであるため、不足している詳細を編集して追加してください。