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] 都道府県選択セレクトボックスを生成する

都道府県選択セレクトボックスをJavaScriptで生成するサンプルです。 サンプルソース 例)onLoad時に都道府県 ...

[JavaScript] サブウィンドウから親ウィンドウを参照する(window.opener)

サブウィンドウから親ウィンドウを参照するには、window.openerで参照できます。 サンプルソース 例)子画面(s ...

[JavaScript] スクロール イベントを取得する(onScroll)

スクロールイベントを取得するには、onscrollイベントハンドラを使用します。 サンプルソース スクロールすると、スク ...

[JavaScript] ウィンドウを最前面にする(window名.focus())

ウィンドウを最前面にするには、window名.focus() を使用します。 サンプルソース 例)ボタンを押すと、サブウ ...

[JavaScript] 横位置を指定する(style.textAlign)

JavaScriptで横位置を指定するには、style.textAlignを使用します。 サンプルソース 例)ボタンを押 ...

スポンサーリンク