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] 透過率を変更する(style.opacity)

JavaScriptで透過率を変更するには、style.opacityを使用します。 サンプルソース 例)id='tar ...

[JavaScript] メッセージIDでメッセージを管理する

メッセージIDを定義して、定義したIDでメッセージを管理するサンプルです。 サンプルソース 例)メッセージの定義と呼び出 ...

[JavaScript] 関数から複数値を返す

通常JavaScriptの関数の戻り値は1つですが、 以下のようにすれば複数値返すこともできます。 方法1)配列で返す ...

[JavaScript] テキストの選択開始時イベントを取得する(onSelectStart)

テキストの選択開始時イベントを取得するには、onselectstartを使用します。 IE、Edgeでのみ動作します。 ...

[JavaScript] 複数の同名idを定義した場合の動き

1つのHTML中ではidは一意にする必要がありますが、誤って同名のidを複数定義してしまった場合にどのような動きとなるか ...

スポンサーリンク