0

lab.jsやscript.jsなどの非同期 javascript ロード ライブラリを調べ始めました。私の質問は、このタイプの非同期読み込みパターンを使用するためのベスト プラクティスについてです。

私はいくつかの可能なセットアップを考えました：

  1. スクリプト タグを使用して、上部またはページで非同期ローダーを読み込みます。これにより、gzip とキャッシュが可能になりますが、この初期ロード中にブロックされます。これらのローダーはかなり小さいはずなので、これはおそらく大したことではありません(それでも最初に css をロードする必要があります) ?

  2. 非同期ローダー コードを HTML にインラインで配置し、すぐに使用を開始して依存関係を読み込みます。これは、非同期ローダーに対する個別のリクエストがないため、おそらく少し高速ですが、gzip されてキャッシュされないため、毎回ロードする必要があることを意味します。

  3. スタイルシートなどが最初に読み込まれるように、ページの下部で JS の従来の読み込みを行います。ページの下部にあるブロッキング スクリプト タグに非同期ローダーを配置し、すべての依存関係を非同期的に読み込みます。

最もよく使用されるシナリオは何ですか? 人々は通常どのように js を非同期でロードしますか??

4

1 に答える 1

5 
<head>
   <!-- data-main attribute tells require.js to load
        scripts/main.js after require.js loads. -->
   <script data-main="scripts/main" src="scripts/require.js"></script>
</head>

( 1 ) ヘッドにロードすることをお勧めします。

キャッシュを停止するため、html ( 2 )にインライン化する価値はありません。言うまでもなく、どこにでもインライン化する必要があり、醜いだけです。

有効な代替手段 ( 3 ) (ただし個人的には価値がない) は、<script>JavaScript を使用してタグを作成し、それを頭に挿入することです。これが本体の下部で行われる場合、うまくいけば、非同期ローダーが開始される前に html/css が完全に読み込まれるようになるはずです。

おまけとして、require.js を使用すると、メイン スクリプトへのポインタを指定でき、require が読み込まれると、それが読み込まれます。その後、ほとんどの非同期ファイルの読み込みをメイン スクリプトで実行し、ページで必要なものに関して、各ファイルの明確に定義された一連の要件を設定できます。

JavaScript を非同期的にロードする理由には、

  • 初期 HTML/CSS の高速ロード。
  • ヘッダーは「クリーン」なままです
  • あなたのjavascriptとhtmlは明確に分離されています。
  • 特徴検出に基づいてファイルを動的にロードできます。
  • ファイル間の依存関係を明確に定義できます。
  • ライブラリ全体を (jQuery のように) ロードする代わりに、モジュール方式 (YUI のように) でライブラリをロードできます。

そして、リストは続きます。上記のような行を既定/共有ビューまたはマスター ページに含めることは、非常にクリーンで整頓されています。

機能検出に基づいて JavaScript ファイルを動的にロードする方法を拡張します。つまり、javascript ファイルをロードする必要がある DOM を参照できるということです。たとえば<ul class="image-slider">、ページに がある場合、標準の css セレクターを介してそれを検出し、image-slider.jsファイルをロードして JavaScript で目立たないように拡張することができます。

これは、画像スライダーを使用してすべてのページに手動で含める必要がないことを意味します。デフォルトですべてのページに含める必要はなく、1 つの情報 (クラス名) を使用して、視覚的なスタイルと機能の両方を適用できます。

于 2011-03-31T15:43:44.170 に答える