※本記事は数年前に書いたままだった下書きを投稿したものです。更新日時よりも情報が古い可能性があります。
はじめに
ウェブページのユーザビリティ向上には、Javascriptの読み込み順序や読み込み方法について考えることが必要になる場面があります。本記事は、ウェブページにおけるJavascriptの読み込みに関して、各種サイトの情報を私なりにまとめた形になっています。
WHERE:どこにJavascriptを書くか
Jascriptを読み込む方法には、次の2種類があります。
1.1. html自体への直接の書き込み (インラインスクリプト)
1.2. 外部ファイルの読み込み
これらの記載位置として、主に次の3つがあるかと思います。
2.1. header
2.2. bodyの中 (属性の間など)
2.3. bodyの末尾 (</body>の直前)
<html>
<header>
<script> (2.1) の書く場所 </script>
</header>
<body>
<div> hoge </div>
<script> (2.2) の書く場所 </script>
<div> hoge </div>
<script> (2.3) の書く場所 </script>
</body>
</html>
原則として、scriptは、htmlに記載された順番で読み込まれます。そのため、
- body本体よりも先に、最初に読み込んでおきたい場合は (2.1) header に書く
- そうでない場合は (2.3) bodyの末尾 に書く
- その他何らかの事情があれば、(2.2) bodyの中 に書く
とするのがよいとされています [1]。
なぜなら、jsをはじめや途中で読み込んでしまうと、DOM (htmlの構造) の構築が阻害されてしまうからです。
ページのユーザービリティを上げるには、こうしたJSの記載場所や処理順序を考える必要が出てくる場合があります。
WHEN:いつJavascriptを読み込むか
上記では、「どこにscriptを書くか」に注目しましたが、ここでは「どのタイミングで読み込むか」に注目して、より深堀したいと思います。
そこで、次の新たな用語を導入します[2][3]。
3.1. DOMContentLoadedイベント：DOMツリー (htmlの構造) が構築された直後に発火するイベント
3.2. loadイベント：ブラウザが他の要素全てを読み込んだ後に発火するイベント
3.3. unloadイベント：ユーザーがページを離れるときに発火するイベント
説明からも分かるように、3.1 -> 3.2 -> 3.3 の順番でスクリプトが実行されます。
最初に述べたように、Jacascriptの基本的な読み込みは、2.1 > 2.2 > 2.3 で読み込まれるので、
これらの位置のどこかで、特定のスクリプトが 3.1 - 3.3 のタイミングで動くように、特別に設定する必要があります。
これらを実現する仕組みは、javascript自体やライブラリにもあるので、次の文献[3]などをご参照ください。
HOW:どうやってJavascriptを読み込むか
本節では、3つのjavascriptの読み込み方を紹介します。
4.1. default (同期的)
4.2. async
4.3. defer
以下のの文献[4]が本当に美しくまとまっているので、こちらを読んでください。
簡潔に述べると、デフォルトでは同期的に、すなわち最初から順番にscriptが処理されていきます。
asyncでは、scriptのロードをhtmlのパースの裏で行うなどすることで、効率化が見込めます。ただし、「非同期」というワードからわかるように、scriptの実行順序は保存されません。そのため、「効率化はしたいけど処理を後ろにはあまり回したくない」という場合に使うことが考えられます。
deferでは、htmlの処理が終わった後、DOMContentLoadedが実行される前に実行を行います。事前のロード自体はasync同様に行われるので、defaultよりも効率的になる可能性が高いです。こちらは、実行順序は保存されます。
これらは、次のように書くことで実行できます。
<script src="hoge.js" async></script>
<script src="hoge.js" defer></script>
まとめ
ユーザービリティ向上に関連するjavascriptの内容について、次の3つの観点を取り上げました。
- WHERE：scriptの記入位置
- WHEN：scriptの実行タイミング
- HOW：scriptの読み込み方法
言えることは、「不要であれば後に配置/実行する」「htmlの邪魔をしない」ということです。
ウェブページのパフォーマンス改善には、念頭に入れたいですね。
参考文献
[1] https://webukatu.com/wordpress/blog/39711/
[2] https://noumenon-th.net/programming/2017/06/11/domcontentloaded/
[3] https://ja.javascript.info/onload-ondomcontentloaded
[4] https://qiita.com/phanect/items/82c85ea4b8f9c373d684