Javascriptの記述場所によって表示速度の違い
2014/12/5 JavaScript
外部JavaScriptファイルを読み込むためのscript要素は、HTMLのhead要素内にしか記述できないわけではありません。 このscript要素の記述位置は、ウェブページの表示速度(表示完了までにかかる時間)に影響する可能性があります。
script要素の記述位置によってページの表示速度が変わる
WebブラウザはHTMLを上から順番に解釈する
Webブラウザはソースコードを読み込んだ後に上から順番に解釈していきます。このときにscript要素があると、Webブラウザはscript要素の中身を解釈し、読み終わるまで、ウェブページのレンダリング(描画)が止まってしまうからです。
JavaScriptはbody要素を閉じる直前に配置
JavaScriptファイルの読み込みによってページの表示完了にかかる時間が遅くなるのを防ぐためには、できるだけ(外部JavaScriptファイルを読み込むための)script要素は、HTMLの最後に記述するようにしましょう。
ページの描画に直接影響するようなスクリプトであれば、末尾に追いやるわけにはいかない場合もあります。。その場合も、サイズ圧縮や複数のライブラリを1ファイルにまとめて転送時間を短くする工夫を行ったり、なるべく応答性のいいサーバに配置するよう心掛けましょう。
※外部JavaScriptファイルの読み込み位置を変更した場合は、描画途中にエラーが発生しないかどうかや、描画が想定通り正しく行えているかどうかなどを、公開前に確認して下さい。 参考サイト:
http://www.pori2.net/js/kihon/2.html http://www.atmarkit.co.jp/fwcr/design/benkyo/htmltuning02/02.html http://allabout.co.jp/gm/gc/380498/2/