外部Javascriptの読み込み方法あれこれ
jQueryなど外部Javascriptの読み込み方法はいくつかあるし流行もある。
設置場所は
・headタグ下部に入れる
・bodyタグ下部に入れる
・bodyタグ上部に入れる
URLは
・ファイルを同サーバー上に設置する。
・Google等のCDNを指定する（//開始）。
・Google等のCDNを指定する（https://開始）。
レトロな方法は「headタグ下部に入れる」「ファイルを同サーバー上に設置する」の組み合わせで、モダンな方法は「bodyタグ下部に入れる」「Google等のCDNを指定する（https://開始）」の組み合わせになるが、単純にこの方法が良いとか悪いとかは言えない。
headタグ下部に入れる
bodyのコンテンツ読み込み前に読み込まれるので表示に必須なCSSファイルと同タイミングの読み込みになるのでコンテンツを表示するのが遅くなることになる事から最近は敬遠されがちだが、AJAXなどでコンテンツを読ませるなどサイトの描画にjQueryが必須な場合やコンテンツが重過ぎて読み込みを待ってくれないサイトでもアナライザーにはカウントさせたい時などは適している。
bodyタグ下部に入れる
bodyタグ下部に設置するとコンテンツを全て読み込んだ後にjQueryが動くようになり、コンテンツの表示スピードが上がる。
スクロールアニメーションやホバーアクションなどちょっとしたアクセントに使ってるだけの場合は最適だが重いサイトだとJavascriptの実行前に読み込みを中断される可能性もある。
bodyタグ上部に入れる
やってるサイトは少ないが、「なる早で」って感じの無難な結果になるという場所。
ファイルを同サーバー上に設置する。
普通で無難な方法、自分のサーバー上にあるのでGoogle様（CDNの配給元）が落ちても動作する。
自分の書いたスクリプトは必然的にこの方法になる。
Google等のCDNを指定する。
まずCDNというのはContents Delivery Networkの略で「サイト単体で考えるのではなく全サイト共通のファイルとして読み込ませればキャッシュが効いてサイトごとにjquery読まなくてもいいんじゃないの」という考えで生まれたもので超高速なサーバーからちゃんと圧縮転送される上にキャッシュはされてるって最強と思いきやjQueryくらいメジャーなライブラリだと効果はあるがバージョンが多数ありすぎるので長い目で見ると微妙だし、同じバージョンでも本家（jQuery CDN）、Google版（Google CDN）、Microsoft版（ASP CDN）等いくつかに分散されてるので100％マッチする訳では無く、キャッシュされてなければCDN側がいくら高速なサーバーを用意しても別サーバーのを読み込むとDNSの解決も必要になるので絶対的に良いとは言い切れない。
最悪サポートが切られる可能性もあるので長期的なサイトに使うには読み込み失敗したらローカルファイルを読むようにするといった配慮も必要だ。
色々ネガティブな事を書いたが「html5.js」とかバージョンアップされないものには適してるし、jQuery1.6.4のように超人気バージョンが再び現れ、多くの人がCDNを使うようになってくれたりると問題は無くなる。
あと、URLが「//開始」と「https://開始」があるがhttpやhttpsといったプロトコル表記の省略したURLを指定するとURLを記述したページのプロトコルが継承されるので便利だ。
ただ、ローカルファイルをIEで見ると挙動がおかしい（激重になる）ので、ついついローカルで見てしまう人はhttps://に決め打ちすると正常に動作する。もちろん無駄に暗号化するので理論上遅くなるが気になるほどではない。（逆にhttpsのページにhttpのスクリプトを読み込むとセキュリティ警告が出る）
Google検索などは「外部ファイルにせず全てHTMLに埋め込む」という方法を使っている。毎回同じデータを読ませられ無駄な気もするが、ごくまれに混雑してるサーバーでXSSやJSの読み込みに失敗して変になったりする、この手法を使うと画像も埋め込んでるので途中で通信が遮断されても描画に影響が無いというメリットもある。
色々書いたが結論は毎回考えるしか無い、jQueryの場合は古いブラウザも対応した1.x系と古いブラウザ切りスリム化した2.x系も悩むところだし、そもそもjQueryじゃなくJavascriptで書いた方がいい場合もあるしZeptoの方がいい場合もある。
Tags: html, JavaScript, jQuery