JavaScriptの読み込み

javascriptの実行方法

javascriptの実行方法には、ページ内にスクリプトを記述して読み込む方法と、外部ファイルを作成してそこから読み込む方法があります。CSSの読み込み方法と同じ形態ですね。

内部ファイルで読み込む

HTML内部に記述して読み込むには、javascriptの構文をscriptタグでくくってあげる必要があります。HTML5以上であれば、type属性の初期値がtext/javascriptとなっているので省略することが可能です。コードの見易さのために記述するってのもアリです。

<HTML内>
<script>
<!--
//適用スクリプト
-->
</script>

設置する場所はhead内か、それともbody内かと言われれば、どちらでも構いません。ページ高速化の観点からスクリプトファイルはhead内よりも/body直前に置くのが望ましいとされています。ただし、HTMLの表示に関連するようなスクリプトはHTMLが読み込まれる前に実行されている必要があるため、head内に記述します。

外部ファイルで読み込む

そのページだけにしか適用しないファイルであれば内部ファイルもアリですけど、すべてのページに適用させたいスクリプトがあった時は修正しやすさの観点から通常外部ファイルとして読み込みます。あとはHTMLのソースを見やすくするためにCSSやjavascriptのファイルは外部から読み込むといった考え方もあります。

<HTML内>
<script type="text/javascript" src="aaa.js" charset="utf-8" async="async"></script>

type属性はHTML5で組んでる人は省略可能で、srcの中に読み込みたいjsファイル名を、charsetは文字コードを、そしてasyncというのがちょっと重要です。

async属性はHTML5実装以前からありましたが、HTML5で新たなasync属性が追加されて注目を浴び始めました。これの記述方法は上記のような方法と、scriptに続けて記述する方法があるようで、どちらを使っても問題ありません。

async 属性と defer 属性は、src 属性が指定されている場合にのみ使うことができます。

script 要素の async 属性を使うと、ページの残りの部分に対して関連スクリプトを非同期で読み込んで実行できます。つまり、ページで解析を続けながら、バックグラウンドではスクリプトが読み込まれて実行されます。プロセス負荷の高いスクリプトが使われるページでは、async 属性を使うと、ページの読み込みパフォーマンスを大幅に向上することができます。

CLS改善（遅延読み込み）には特段問題なければ、defer属性を使用する。

使用法	説明
<script src="widgets.js"></script>	スクリプトを直ちに実行し、スクリプトの終了後にページの解析を続けます。この方法は、ページの読み込みパフォーマンスを大幅に低下させる可能性があります。
<script async src="widgets.js"></script>	ページの解析を続けながら、スクリプトを非同期にダウンロードします。スクリプトは、ダウンロードの完了後に実行されます。
<script defer src="widgets.js"></script>	ページの解析が終了した後にスクリプトを実行します。
<script async defer src="widgets.js"></script>	async 属性を優先し、defer 属性を無視します。これにより、開発者は、async をサポートするブラウザーではこの属性を使い、async をサポートしないブラウザーでは defer にフォールバックできます。

意図的にページ下部に設置しているのであればasync属性は使用する必要はありません。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>