JavaScript

[JavaScript] JavaScriptファイルを非同期で読み込む(async/defer)

投稿日:2018年6月25日 更新日:

JavaScriptファイルを非同期で読み込むには、async/deferキーワードを使用します。

サンプル

例1)同期で読み込む(通常の方法)

例2)非同期で読み込む(ファイルの読込順は保証しない)

asyncキーワードを指定します。

例3)非同期で読み込む(ファイルの読込順は保証する)

deferキーワードを指定します。

【async/deferについて】
キーワード解説
なし同期読込みする
(デフォルト)
async非同期で読込みする
(読み込み順は保証しない<scriptタグを記述したとは限らない>)
defer非同期で読込みする
(読み込み順は保証する<scriptタグを記述した順>)

解説

  • 非同期読込みでは、jsファイル読込み時にHTMLのパースを止めることはなく処理が行われます。
  • asyncを使う時は、jsファイルの読込順が重要となる場合は注意が必要です。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] functionを変数で定義する

functionを変数で定義するサンプルです。 サンプルソース 例)functionを変数で定義する(2パターン) [c ...

[JavaScript] アロー関数のサンプル

アロー関数は、矢(アロー)のような見た目の「=>」を使用した関数です。 無名関数をさらに省略した書き方ができ、慣れ ...

[JavaScript] ブラウザの新規タブにopen.windowする

ブラウザの新規タブにopen.windowするには、 オプションを指定せずにopen.windowすればOKです。 サン ...

[JavaScript] undefinedとnullについて

undefinedと、nullについてまとめてみました。 どういった場合にundefinedやnullとなるか 変数を宣 ...

[JavaScript] 要素を生成する(document.createElement)

JavaScriptでHTMLの要素を生成するには、document.createElementを使用します。 サンプル ...

スポンサーリンク