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で質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jsで、switch文で書かれた分をif文にできませんか。 1 2022/07/28 15:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript JAVASCRIPT 2 2022/04/15 15:10
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
ひとつの外部ファイルに複数の...
-
外部jsファイルの変数に代入す...
-
条件分岐で、読み込む外部スク...
-
外部ファイルを読み込ませるた...
-
javascriptとApacheの設定
-
JavaScriptのエラー ( 関数の...
-
<a href="#" …>の意味を教えて...
-
javascriptでalertの文字列をコ...
-
リンク移動先のURLを取得
-
スマホ上で、左右スワイプで次...
-
インラインフレームで表示され...
-
jqueryでのkeydownイベント発生...
-
二つの関数を一つにまとめるこ...
-
ハイパーリンクに下線を表示す...
-
bodyにidをつける理由は何ですか?
-
googleモバイルがiframeで表示...
-
base64encodeでの文字化けについて
-
SCRIPT5007: 未定義または NULL...
-
リンクを選択すると現れる点線枠
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
複数のJavascriptを1つのscrip...
-
Dreamweaver で 外部JSを読み込...
-
javascriptとApacheの設定
-
【Google Apps Script】「ライ...
-
cssにjavascriptを入れる?呼び...
-
JavaScriptのエラー ( 関数の...
-
ひとつの外部ファイルに複数の...
-
javascriptファイルは1つに統...
-
JavascriptとJqueryを混在し記述
-
<script src="">読み込まない
-
javascriptのalertで文字化けが...
-
レンタルサーバーでjavascript...
-
javascript内で外部ファイルを...
-
外部読み込みで動かないときの...
-
外部ファイルを実行
-
プルダウンメニューを別ファイ...
-
ホームディレクトリを示すチル...
-
外部.jsの内容を一部置き換えて...
-
xmlHttpRequest.send( EncodeHT...
おすすめ情報