CloudFlareのRocket Loaderは実際にどのように機能しますか（また、開発者はどのように互換性を確保できますか）？
CloudFlare と呼ばれる画期的なテクノロジーを備えていますRocket Loader（無料アカウントと有料アカウントの両方で）。しかし、実際にはどのように機能しますか？
カップル of ページ that テクノロジーの説明 がありますが、技術的な詳細はあまりありません。重要な機能の1つは、すべてのJavascriptを非ブロック方式で（非同期的に）ロードすることです。これは非常に素晴らしい作業です。これは、スクリプトのロードと実行を待たずにHTML/CSSをレンダリングできることを意味します。
それはどのように可能ですか？
<script>またはasync="true"を使用するようにすべてのdefer="true"タグを単純に変更することはできません。
- スクリプトは正しい順序でロードする必要があります（たとえば、jQueryライブラリがロードされるまでjQueryプラグインをロードできません）。
- これらのスクリプトの
document.write()呼び出しは機能する必要があります（ 明らかに、これらは典型的な非同期スクリプトでは何もしません ）。 - DOMContentLoadedイベントはどうですか？一部のスクリプトがロードされた場合afterこれがトリガーされた場合、イベントハンドラーはトリガーされませんか？
開発者として、サイト/スクリプト/プラグインがRocket Loaderとの互換性を維持するために注意する必要があることは他にありますか？
CloudFlareはRocket Loaderについて説明しています likethis ...
Rocket Loaderは、window.onloadの後にJavaScriptコードを安全に実行できる軽量の仮想ブラウザーと結合された汎用非同期JavaScriptローダーです。
Rocket Loaderは多くのことを行います。
- ページ上のすべてのスクリプトがページのコンテンツの読み込みをブロックしないようにします。
- サードパーティのスクリプトを含む、ページ上のすべてのスクリプトを非同期でロードします。
- すべてのスクリプト要求を単一の要求にバンドルし、複数の応答をストリーミングできるようにします。
- ほとんどのブラウザーとほぼすべてのスマートフォンでLocalStorageを使用して、スクリプトをよりインテリジェントに保存し、必要な場合を除き、スクリプトが再取得されないようにします。
だからそれはかなりクールですが、どのようにそれを達成しますか？
私が自分のサイトでCloudFlare + Rocket Loaderを実行して読んで発見したことから、おおよそ次のように動作します...
CloudFlareサーバーからHTMLページがリクエストされると、Origin Webホストから読み込んでから、すべてのスクリプトタグを
<script type="text/rocketscript">に書き換えますブラウザは「text/rocketscript」という形式を理解していないため、スクリプトタグを自然に無視します。
CloudFlareは、追加の
cloudflare.min.jsスクリプトをページに挿入して、マジックを実行します（ フォーマットされたバージョンを参照 ）。これは、ブラウザーによって（非同期的に）最初にロードされる唯一のスクリプトです。このスクリプトは、「text/rocketscript」タイプのスクリプトのページを解析します。
次に、これらのスクリプトのいずれかがブラウザーのローカルストレージに既に存在するかどうかを確認します。そうでない場合、CloudFlare CDNからAJAXリクエスト（論理バンドルに結合）を作成します。スクリプトをグループ化する方法がどのように機能するかはよくわかりません。
CDNサーバーは、キャッシュまたはOriginサーバーからスクリプト（Google、Twitter、Facebook、その他のCDNなどの複数のサーバーから取得される可能性があります）を収集し、それらを結合、縮小、GZIPしてから返信しますブラウザに。
参照するこのvirtual browserは、単にこれらの各スクリプトを正しい順序で実行するJavaScriptである必要があります。
document.write()へのすべての呼び出しをキャッチし、そのコンテンツをページ上の正しい場所に挿入します。 （おそらくブラウザのwrite()関数をカスタム関数で上書きすることにより？）- DOMContentLoadedやloadなどの再トリガーイベント。
私は実際にそれが機能することにかなりショックを受けています（おそらく itdoes n'talways ）。しかし、通常の状況では、開発者はJavaScriptを互換にするために特別なことをする必要はないと思います。
これはコミュニティWikiであるため、不足している詳細を編集して追加してください。