JSの勉強のため調べたのでメモメモ。
【読み込み順】
JSってとりあえずheadタグに書いておけばとりあえず動くって考えてました。
考えなきゃいけない発端が下記のコード。
(Vue.js の記事で書いたコードを少し変えて使用します。)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>双方向データバインディング</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p><input type="text" v-model="message"></p>
</div>
</body>
</html>
(function() {
'use strict';
new Vue({
el: '#app',
data: {
// name: 'taguchi'
message: 'ばなな'
}
})
})();
headでJSを読み込んでいるのですが、こちら下記のエラーが出ます。
[Vue warn]: Cannot find element: #app
まだappを読み込んでないってことです。
それはこちらで解決できます。
document.addEventListener('DOMContentLoaded', function() {
window.app = new Vue()
});
さて、自分が疑問に感じたところは
『Webページを読み込みはどの順番で実行されるの？』ということです。
基本的に、HTMLの一番上から順番に読んでいきます。
JSファイルを読み込んでいる間はHTMLの解析が止まります。
それにより、読み込み速度が遅くなります。
お客さんが見てることも考えるとSEO的にもよくありません。
CSSファイルの読み込みは、HTMLの読み込みと同時に行われます。
ページが表示されることを最優先に考えれば、
JSはbodyタグの一番下で読み込みのがいいとされます。
(Googleも推奨してるみたいですね)
一応、読み込みの順番を変えることもできます。
<script src=“パス” defer></script>
<script src="パス" async></script>
deferは、HTML読み込み後に実行されます。
asyncは
1.HTMLの読み込み中にJSのダウンロードが行われる。
2.ダウンロード終了後、HTMLの読み込みがストップしJS実行。
という順序です。
他にもonloadなど、しっかり順序は把握しないといけないですね。
JQueryの$(function(){})に関しても、ページの読み込み完了後に実行されるみたいです。
(初めて知りました)
何だかごちゃごちゃしますね。
ライブラリもフレームワークも使う時は調べてから使った方が良さげな感じがします。
その内、調べてまとめていきたいです。
【おまけ:letとvarの違い】
変数を宣言する際、letが流行っているらしいので意味もなくletを使ってました。
違いってあったんですね・・・・・・・・
(とりあえず変数を宣言してることがわかるように書いてるんだと思ってた)
var：宣言後、再代入・再宣言が可能。
let：宣言後、再代入が可能。再宣言ができない。
おやすみなさい