HTML/CSS
【HTML】JavascriptとCSSを読み込む順番
ヤス
更新日:2021/08/05
こんにちわ!ヤスです。
HTMLを書いていて、こんな感じで↓外部ソースのJavascriptやCSSを読み込むことがあると思います。
1 2 |
<script src="xxxx.js" /> <link rel="xxxx.css" /> |
ふと、いつも適当に記述しているけど、読み込む順番あるのかなと考え、調査してみました。
cssとjsを読み込む順番
結論から言いますと、CSSはHTMLの上部。JavascriptはHTMLの下部それはHTMLの読み込む順番が関係しています。
HTMLは通常上から下に順番に行を読み込むので、ライブラリや処理の大きいJavascriptを上部に書くと読み込みに時間がかかり、文書構造を整形するCSSを下部に書くのもスタイルの反映があとになり、結果読み込みに時間がかかります。
どっちが上か迷った時は、アルファベットの順番で書く!と覚えるといいかもしれませんね。
CSS
Javascript
HTMLとブラウザの仕組みを正しく理解して、よりよいWebサイトを構築していきたいです。