
javascript初心者のため、どなたかご教示いただけるとありがたいです。
html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。
<現状>
<script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script>
<script type="text/javascript" src="・・/js/jquery.cookie.js"></script>
<script type="text/javascript" src="・・・/js/ui.core.js"></script>
<script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script>
<script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script>
<script type="text/javascript" src="・・・/js/set_slider.js"></script>
・・・
jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか?
(単純に1箇所にコピー&ペーストするようなイメージで)
お手数ですが、ご教示のほど、宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
外部スクリプトの読み込みは、原則として(いくつかの例外を除き)順番通りです。
1.js を読み込んだら 2.js、それも終わったら 3.js……のようにです。裏を返せば、1.js が読み込まれない限り 2.js も 3.js も読み込まれず、しかも後続のページ描画すらストップしてしまうわけです。
ですから、1 個の外部スクリプトにまとめることは非常に大切です。そのためには「もともと読み込んでいた順番通りに」1 個のスクリプトファイルに書き写していけば、まずは十分です。ただし、ライセンスの表記を消さないように注意して下さい。
No.1 のご懸念の通り、使わない部分も書いてしまうのは無駄に思えるかもしれません。しかしながら、たかだか数十~数百 kB のファイルサイズの心配よりは、HTTP コネクションの数を減らすことの方が、はるかに速度向上につながります。キャッシュも効きますからね。
---
Web アプリケーションならば、表示されたボタンを押しても何も起きない、なんて事態になっては困りますので、ボタンを表示する前にスクリプトを読み込んでおく必要があります。しかし、普通の Web ページでは、スクリプトが動作することよりもページ内容をなるべく早く表示させることの方が重要です。
head 要素内に 5 個も 6 個も外部スクリプトを並べてページ描画をスタックさせるよりは、1 個にまとめるか、あるいはページ末尾にでも置いた方がずっとマシです。「スクリプトのオンデマンドな読み込み」なんて色気を出して良いのは、開発中かせいぜいテストまでです。実運用を開始するときは、なるべく 1 ファイルにまとめて下さい。
No.1
- 回答日時:
基本的には、つなげて一つのファイルにしてもいけるはずです。
ただし、charsetが同じになっていることや実行順が正しくなっていることが必要です。
でも、まとめてしまうと使わない部分がある時でも全部を読み込んで実行してしまうので、無駄になる場合がありそう。
つなげなくても、以下の質問に出ているような方法でも可能です。
http://oshiete.goo.ne.jp/qa/6469598.html
このような方法の場合、回答No3様があげられている参考サイトが役に立つかも。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
jQueryで同じクラス名のものを...
-
タグを教えてください。
-
ラジオボタンを複数選択したと...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Adobe acrobat proでフォームを...
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptとApacheの設定
-
JavaScriptのエラー ( 関数の...
-
javascriptファイルは1つに統...
-
cssにjavascriptを入れる?呼び...
-
別ファイルのfunctionの読み込み方
-
Dreamweaver で 外部JSを読み込...
-
【Google Apps Script】「ライ...
-
初心者です。あまりに初歩的な...
-
このスクリプトを説明してください
-
外部JavaSqriptについて
-
呼出したjsファイル内で他jsフ...
-
外部ファイルの読み込みに失敗...
-
外部ファイル
-
外部ファイル名を変数で指定で...
-
外部ファイルを読み込ませるた...
-
レンタルサーバーでjavascript...
-
テンプレート適用でJavaが動かない
-
JavaScriptで最新ニュース5件を...
-
Yahoo!ウィジットでJavaScript
-
JavaScriptの外部ファイル化とS...
おすすめ情報