
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ランキング
-
このスクリプトを説明してください
-
JavaScriptのエラー ( 関数の...
-
cssにjavascriptを入れる?呼び...
-
javascriptファイルは1つに統...
-
javascriptのalertで文字化けが...
-
複数の外部jsをランダム表示さ...
-
エラー行の行数の不思議
-
呼出したjsファイル内で他jsフ...
-
<a href="#" …>の意味を教えて...
-
POSTで<a hrefを送る方法について
-
function の return 値を表示し...
-
親ウインドウの判別
-
検索フォームでの結果を別窓に...
-
<DIV id=""></DIV>勘でいれたら...
-
<head>と<body>どっちに入れる...
-
URLを引数とし、フレーム間で渡...
-
同意を求めて、次のページに進...
-
角丸うまくいきません
-
適切なページ分けのループを教...
-
window.openでフルスクリーン表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssにjavascriptを入れる?呼び...
-
javascriptとApacheの設定
-
プルダウンメニューを別ファイ...
-
レンタルサーバーでjavascript...
-
初心者です。あまりに初歩的な...
-
JavascriptとJqueryを混在し記述
-
Dreamweaver で 外部JSを読み込...
-
JavaScriptのエラー ( 関数の...
-
複数のJavascriptを1つのscrip...
-
javascriptファイルは1つに統...
-
別ファイルのfunctionの読み込み方
-
JavaScriptの外部ファイル読み込み
-
processing
-
ホームディレクトリを示すチル...
-
【Google Apps Script】「ライ...
-
エラー行の行数の不思議
-
<script src="">読み込まない
-
ひとつの外部ファイルに複数の...
-
静的と動的なJavascriptの同時...
-
外部.jsの内容を一部置き換えて...
おすすめ情報