JavaScriptの外部ファイル化の同期って？ async？ defer？

今回は、JavaScriptの外部ファイル化する際のスクリプト実行方法について記事にしてみます。

すでにこのブログを読んでいる方には薄々気が付かれていると思われますが、ガンオンネタ探しのモチベやガンオン熱が冷めてきていると・・・

いろんな方がブログや動画に手を出し始めたようなので、差別化を図ろうと新たなジャンルの開発に勤しんでおります。（手を抜いても、ど、どうせ誰かが新機体の性能、イベント情報とか動画やブログにあげるやろ？）

HTMLファイルの上部にある</head>前に記述したJavaScriptの関数を外部ファイル化する事で得られるメリットについて紹介しました。

今回はそのメリットを享受すべく、実践編になります。

過去記事でも紹介していますが、グローバルメニューをリスポインシブデザイン対応する機能を実装にこちらのブログの方からソースを拝借させていただいております。

ここで使用されている関数がいわゆる即時関数と呼ばれるものらしく、見たこともない形式の関数でした。。。

もちろん、何これ？と思いましたので調べたところ、即時関数という関数らしく、下記のサイトに詳しく説明がありましたので紹介しておきます。

もちろん、初心者の私にはこんなタイプの関数があることは知りませんでした。ただ、おそらく一時的に使用する関数であって、常時には事前宣言から行う一般的な関数利用が普通なのかな？と勝手に予想・・・

とりあえず、すでに記述されているJavaScriptの外部ファイル化をマネして書こうと思ったところ、記述方式が何パターンかあることに気付きました。

初心者ですので全く意味が分からなかったので調べてみたところ、とても意味のあるものでした。ASYNCは「Synchronize：同期」からきているでしょうから、同期タイミングを決めるものなのでしょう。そして、「Defer:異なる」から来ていると思うので、非同期ってことと予想。

この記述に関する詳細につきましては、こちらをご覧ください。

どうやら属性を指定することで、外部スクリプトの実行タイミングをコントロールできるみたいです。ただ、使い分けまでは正直わかっていませんので、前後にあわせて指定しました。

とりあえず、</head>前にJavaScriptの関数群を外部ファイルに移してみました。

クライアントキャッシュがうまく機能するはずですので、ブログ閲覧時には多少ではありますが、表示速度が改善されているはずです。