1

ここでの目的は、ブラウザーが defer または async をサポートしている場合に、スクリプトを非同期で読み込むことです。
ブラウザがどちらもサポートしていない場合、非同期ロードは気にしません (悪くはありません)。
jQueryがロードされているなど、スクリプトの前提条件が満たされている場合にのみ、スクリプトが実行されるようにしたいと考えています。他のスクリプトがロードされている間に自分のスクリプトをロードしたい (ブラウザーが defer または async をサポートしている場合のみ)。

ブラウザの API のみを使用してこれを行いたい。どんなに小さくても、ブラウザーが信頼できる (またはそうでない) スクリプトをロードすることは望ましくありません。

これは、IE8+、Gecko v.1.9.1+ (例: firefox 3.5.* または firefox 9.0+)、webkit (例: chrome)、presto (例: Opera) で動作する必要があります。バージョンについて言及しなかったものについては、最新の安定版を意味します。

可能であれば、簡単ではないスクリプトは必要ありません。この仕事をするのに簡単なものが必要です。つまり
、可能であれば、他のページで見たようないくつかの回避策を実行するためのいくつかのメソッドを備えた AJAX 呼び出しや派手なオブジェクトなどは必要ありません。これらは、非同期または遅延をサポートしていないブラウザでスクリプトの非同期ロードを強制するためのものです

繰り返しますが、スクリプトを非同期にするために凝ったものは必要ありません。ブラウザーが defer または async をサポートしていない場合、私は気にしません。前提条件が満たされた後に各部分が実行され、ブラウザーがサポートしている場合はasync または defer を使用するように、スクリプトが読み込まれることに注意してください。

4

1 に答える 1

1

まず、 のようなライブラリを使用するとjQuery、このプロセス全体が非常に簡単になり、ブラウザー間で信頼性が高くなります。ページのダウンロード サイズが (ごくわずかに) 増加する可能性がありますが、効率的なスクリプトの読み込み/実行によって得られる速度は、ほとんどの場合それを上回ります。

スクリプトの async および defer 属性について:

  1. async="async": スクリプト タグでは、IE8/9 ではまったくサポートされていません。スクリプトはすぐに実行されます (質問によると、これは問題ありません)。

  2. defer="defer": script タグでは、遅延スクリプトが HTML に表示される順序ですべての後、DOM Ready の前にロードが開始されます。しかし、Firefox では、dom の準備が整った後にスクリプトが実行されることがよくあります。この違いによりdefer、dom の準備が整った後に関数を実行する前にスクリプトがロードされることを保証する手段として信頼性が低くなります。

を使用しない場合の一般的なガイドラインjQuery:

  1. スクリプトに下流の依存関係がある場合は、それを body タグの最後に標準のスクリプト タグとして配置し、ドキュメントの準備が整った後にすべてのインライン タグを実行する必要があります。そうしないと、依存関係の実行前にスクリプトが実行されるという保証はありません。ここでの主な問題は Firefox です。DOM の準備が整った後でも、「遅延」スクリプトが終了していない可能性があります。

  2. スクリプトに下流の依存関係がない場合は、スクリプトを body タグの最後に配置し、スクリプト タグで async="async" 属性を使用します。IE はすぐにレンダリングし、他の人はそれを受け取ったときにレンダリングします。

を使用する際の一般的なガイドラインjQuery:

  1. に jQuery のみを配置します<head>。

  2. として他のすべてのスクリプトを実行し$.getScript()ます。

  3. スクリプトをできるだけ早く実行する必要がある場合 (分析など) $.getScript、本文の先頭で a を使用します (これはノンブロッキング リクエストになりますが、クライアントがファイルを受信するとすぐに処理されます)。

  4. スクリプトが DOM の準備が整うまで待機できる場合は、$.getScript()呼び出しをラップします。$(function() {});

  5. スクリプトに多くのダウンストリーム依存関係がある場合は、それぞれが特定のスクリプトのコールバック関数に登録されるようにします。

  $(function() { 
    $.getScript("script.js", function() {
      for(var i = 0; i < myCallbacks.length;i++) {
        myCallbacks[i]();
      }
    });
  });
于 2012-04-19T22:05:10.187 に答える