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/  
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

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

CAPTCHA