[JavaScript]scriptタグの記述方法

JSカテゴリなのか、HTMLカテゴリなのか悩みますが。

外部JSをscriptタグで読み込む際にどうしようという話。

実行のタイミング

外部JSの実行のタイミングは、scriptタグを記述した位置に依存します。

わりとよく見るheadタグ内に記述した場合、「window.onload」等で読み込みを完了させずにbodyタグ内の要素を参照しようとすると上手く参照できません。

上記の「window.onload」というイベントハンドラメソッドは、HTMLに記述された内容(画像等も含める)の読み込みが全て終わった段階で処理を実行するので、headタグ内にscriptタグを記述してもbodyタグ内の要素がちゃんと参照できるタイミングで実行させる事ができます。

window.onloadでは遅い場合

上記の通り「window.onload」はHTMLに記述された内容(画像等も含める)の読み込みが全て終わった段階で実行されるので、巨大な画像があったりするとその読み込みが終わるのを待ってから処理をする事になってしまいます。

これではタイミングが遅い! という場合によく用いられるのがjQueryの「$(document).ready」になるかと思います。

こちらはHTMLの記述が解析された段階で処理を実行できるので、実行のタイミングとしてはとても素敵です。

jQueryを使わない場合

とはいえ、「$(document).ready」のためだけにjQueryを使うのも勿体無いというかなんというか。

そこで、昨今主流になっているらしいのがbodyの閉じタグ直前にscriptタグを記述する方法なんだそうです。

思えばgoogle analyticsはこの位置に配置する様に指示されていた気がします。

何故この方法が主流になったかと言う話をちょっと調べたのですが、head内にscriptタグを記述してJSを読み込んだ場合、JSの読み込みが終わるまで処理が止まってしまうという問題があったからなんだそうです。

でも、正直この方法、見た目が嫌いです。コード的に、なんとなく。

HTML5ではscriptタグにasync/defer属性が追加されました

HTML5の新機能! という訳ではないのですが、scriptタグにasync属性とdefer属性が追加され、headタグに記述したscriptタグの実行タイミングが設定できる様になっています。

async属性を設定すると、非同期で読み込みが完了したタイミングで処理を実行する様です。

defer属性を設定すると、非同期で読み込みますが、処理を実行するのはコンテンツの表示が終わった段階になります。

こちらの属性を利用すれば、headタグにscriptタグを記述しても、JSの読み込みを待たずにコンテンツも読み込んでくれるし、必要があればコンテンツの表示が完了してから処理を実行する事も可能と、良い事尽くめ!

っと、思いきや、一部対応していないブラウザがあるそうです。Androidとか。

処理の内容、コンテンツの内容、対応するブラウザ等を考慮して、どのタイミングでscriptタグを記述するか、処理を実行するかを考える必要がありそうですね。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>