【社内lt】jsあれこれ -読み込み編-
TRANSCRIPT
JavaScript あれこれ 読み込み編
WP部 うえはら
Ｑ．外部JSを読み込む時ってどの位置に書いてもいいの？
<html> </html>
<script>…</script>
Ｑ．外部JSを読み込む時ってどの位置に書いてもいいの？
A．よろしくないです。 処理の内容に沿って、適切な位置で読み込むのがいいよ！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウェッブサイト</title>
① headの中
</head>
<body>
② bodyの中
<div id=“lightbox“>ふわっと出る。</div>
③ body閉じタグの直前
</body>
</html>
たとえばJSでできること
１. User Agent によるデバイス判別
２．カルーセル、ライトボックス .etc
３．アクセス解析（Google Aalytics）
1.UA判別を読み込む位置は
① headの中
ブラウザがhtmlの描画をするよりも先に処理が走る。
UA判別は、表示よりも先に、デバイスの判別の為に行うことが目的なので、ここに書く。
2.ライトボックスを読み込む位置は
② bodyの中
もっと正しくは、処理を当てるhtmlタグ（Dom要素）の直前。
に、ライブラリを動作させるscriptを書く。
※書く人の趣味にもよる
3. Google Aalyticsを読み込む位置は
③ body閉じタグの直前
htmlが全て読み込まれたあとに処理をしたいので、ここ。
全ページ共通のものや、htmlタグ（Dom要素）が「存在している」状態で処理する必要があるJSを入れよう。
レンダリング （htmlの読み込み→表示） の順番とJSで行う処理との 関係を考えて入れるのが良い。
めざせパフォーマンス向上！