ダイナミックスクリプト


ダイナミックスクリプト


JavaScriptを使用すると、ドキュメントにスクリプトを動的に追加できます.このように追加されたスクリプトをダイナミックスクリプトと呼びます.
let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
document.body.append(script); // (*)
上記の例では、関連要素がドキュメントに追加されると、外部スクリプトのダウンロードが開始される((*)行).
しかし,動的スクリプトは基本的に「async」スクリプトのように表現される.
したがって、以下の特徴があります.
  • ダイナミックスクリプトは何も待たない.また、ダイナミックスクリプトは何も待たない.
  • ダウンロードしたスクリプト(「load-first」order)を最初に実行します.
  • 次の例では、2つのスクリプトをドキュメントに動的に追加します.ただし、script.async=falseがない場合、これらのスクリプトは「load-firstorder」で実行されます.では、まず、サイズの小さいsmall.jsを実行します.ただし、script.async=falseがあるため、実行は「文書に添付された順序」で行われる.
    function loadScript(src) {
      let script = document.createElement('script');
      script.src = src;
      script.async = false;
      document.body.append(script);
    }
    
    // async=false이기 때문에 long.js가 먼저 실행됩니다.
    loadScript("/article/script-async-defer/long.js");
    loadScript("/article/script-async-defer/small.js");