JSの非同期読み込み方法

defer と async

• defer

html4 は、スクリプト タグの拡張属性 defer を定義します。 defer は、この要素に含まれるスクリプトが DOM を変更しないことを指定するため、コードを安全に延期できます。ただし、このプロパティは理想的なクロスブラウザー ソリューションではありません。この属性は、IE4 以降および Firefox3.5 以降のブラウザでのみサポートされます。使い方は以下の通りです:

<script type=&#39;text/javascript&#39; src=&#39;test.js&#39; defer></script>

defer 属性を持つ ''script'' タグは、ドキュメント内のどこにでも配置できます。 defer 属性を持つ js ファイルがダウンロードされると、ブラウザの他のプロセスをブロックしません。このタイプのファイルは、ページ上の他のリソースと並行してダウンロードできます。 defer 属性を持つ script タグは、dom がロードされた後 (onload イベントがトリガーされる前) に実行されます。

• async
  html5 仕様では、スクリプトの非同期ロードのための async 属性が導入されています。

 <script type=&#39;text/javascript&#39; src=&#39;test.js&#39; async></script>

async と defer の同じことは、並列ダウンロードを使用し、ダウンロード プロセス中にブロックが発生しないことです。違いは、async は読み込み完了後に自動的に実行されるのに対し、defer はページが完了するまで待つ必要があることです。

スクリプトの動的作成

主な原則: javascript は HTML 内のほぼすべてのコンテンツを動的に作成できるため、JavaScript を使用してスクリプト タグを動的に作成し、それらを HTML に追加できます。

var script = document.createElement("script");
  script.type = "text/javasctipt";
  script.src = "file.js";
  document.getElementByTagName("head")[0].appendChild(script)

次のメソッドを使用して、スクリプトがダウンロードされ、準備ができていることを追跡して確認できます:

function loadScript(url,callback){var script = document.createElement("script");
  script.type = "text/javasctipt";  //IE
  if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState == 'loaded'||script.readyState =='complete'){
    script.onreadystatechange = null;
    callback()
}
}  
}else{
    script.onload = function(){
    callback();
}
}
script.src = url;
document.getElementByTagName("head")[0].appendChild(script)
}

メソッドの呼び出し:

loadScript('files.js',function(){
    alert("file is loaded")
})

XMLHttpスクリプト挿入のリクエスト

XHR オブジェクトを通じてスクリプトを取得し、ページに挿入します

/获取XMLHttpRequest对象，考虑兼容性。  var getXmlHttp = function(){
    var obj;    if (window.XMLHttpRequest)
      obj = new XMLHttpRequest();    else
      obj = new ActiveXObject("Microsoft.XMLHTTP");    return obj;
  }; 
  //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
  var xmlHttp = getXmlHttp();
  xmlHttp.open("GET", "file3.js", true);

  xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 {    if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){ var script = document.createElement("script");
      script.text = xmlHttp.responseText;
      document.body.appendChild(script);
}
    }
  } 
  xmlHttp.send(null);

以上がJSの非同期読み込み方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。