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] HTMLタグに独自属性を設定する(dataset)

HTMLタグに独自の属性を設定したい場合は、datasetという仕組みを使用します。 カスタムデータ属性とも呼ばれます ...

[JavaScript] セレクトボックスの選択中のvalue値を取得する

セレクトボックスの選択中のvalue値を取得するサンプルです。 サンプルソース 例)ボタンを押すと、セレクトボックスで選 ...

[JavaScript] 動的に追加したイベントを削除する(removeEventListener)

動的に追加したイベントを削除するには、removeEventListenerを使用します。 (動的にイベントを追加する方 ...

[JavaScript] オンラインかどうかチェックする

JavaScriptでオンラインかどうかチェックするには、navigator.onLineを使用します。 サンプル 例) ...

[JavaScript] マウスボタン押下/押上イベントを取得する(onMouseDown, onMouseUp)

マウスボタンを押したイベントを取得するにはonmousedown、 押し下げたマウスボタンを離したイベントを取得するには ...

スポンサーリンク