質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • JavaScript

    15955questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JSは外部ファイル化した方が早いと聞いて、下記のようにみん外部ファイル化したのですが、読み込み数が増えると、逆に遅くならないでしょうか?

解決済

回答 3

投稿

  • 評価
  • クリップ 3
  • VIEW 3,348
退会済みユーザー

退会済みユーザー

JSは外部ファイル化した方が早いと聞いて、下記のようにみん外部ファイル化したのですが、読み込み数が増えると、逆に遅くならないでしょうか?

現場でも下記のようにHTMLファイル内で外部ファイル化していますか?

また、
おそらくHTMLファイルにJS本文が記載されていないとHTMLファイルの読み込み自体が早くなるメリットがあるのだと思いますが、body終了直前にあれば、HTMLタグ自体はすでに読み込まれていると思います。 
下記のようにするメリットはいったい何なのでしょうか?


   <!--hover-->
    <script type="text/javascript" src="js/hover.js"></script>
     
    <!--scroll_top-->
    <script type="text/javascript" src="js/jquery.gptop-1.0.js"></script>
    <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script>
    <script type="text/javascript">
        ( function() {
          $( '#goto_top').gpTop();
        }());
    </script>
    
    <!--Wink Opacity-rollover2.1.js-->    
    <script type="text/javascript" src="js/opacity-rollover2.1.js"></script>
    <script type="text/javascript">
        $("h1 img").wink(); 
    </script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

同感です。
読み込みの速さを求めるのであれば、
ファイルサイズを小さく、リクエスト数を少なくすべきです。
ただこれはアクセス数の要因などケースバイケースと考えた方が良いかもしれません。

外部ファイルとして切り出しする理由は以下だと思います。
1.可読性も上がり、共通化も出来るため管理もしやすくなる。
2.外部ファイルはブラウザのキャッシュが使用されるので読み込みが速くなる。

参考までに自分が関わったお仕事では
基本的に可読性重視でしたので外部ファイルにしていました。
またデザイン変更が頻繁にあるためブラウザのキャッシュは使用しないように
src="hogehoge.js?yyyyMMddHHmmssSSS"としていました。

また外部ファイルを使用しないことを推奨としているお仕事では
アクセス数が多いと言うことで、
jsはもちろんcssまでも外部ファイルにはしないことになっていました。
月間PV500万くらいのアクセス数だったと記憶してます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/29 23:54

    ありがとうございます。


    また外部ファイルを使用しないことを推奨としているお仕事では
    アクセス数が多いと言うことで、
    jsはもちろんcssまでも外部ファイルにはしないことになっていました。


    そんなこともあるのですね。外部ファイルにすると、一度アクセスしたページの外部CSS、JSはキャッシュされるので、二度目からは外部ファイル化したほうが表示が早くなるのですね。一度目は遅くなりますが。

    また、外部化するJSファイルは、プラグインの数だけ、作りますか?
    それともひとつにまとめたりするのでしょうか?

    キャンセル

  • 2015/08/30 14:56

    >また、外部化するJSファイルは、プラグインの数だけ、作りますか?
    >それともひとつにまとめたりするのでしょうか?
    自分の場合、共通機能以外はプラグインの数だけ作ります。
    ファイル名もなるべく一般的、どんな機能か大体解るようにします。
    これは他人が修正を加える際に、意図しない使われ方を避けるためです。
    悩ましいところですけど。

    キャンセル

  • 2015/08/30 18:27

    外部ファイルはJSの数分、プラグインの数分作られるのですね。

    キャンセル

0

最近は、GulpGrunt、Rails付属のSprocketsのように、JavaScriptやCSSを事前処理するようなシステムが普及しています。これらを使うと、

  • ライブラリの依存関係を自動で解決してくれる
  • CSS、JavaScriptそのままではなく、LESSやTypeScriptのようなより高度な言語で書いたものを自動変換する
  • すべてを1本のファイルにまとめる(HTTPのオーバーヘッドも最小限になる)
  • コメントや改行を削ったり識別子を短くしたりして、容量を削減する

ような高度な処理を加えることができますが、HTMLに埋め込む形式ではそうも行きません。

なお、jQueryやBootstrapなどの超メジャーなライブラリは、誰でも使えるCDNに置いてあることがあるので(Googleにおいてあるもの)、そっちから呼び出したほうが自分のサーバの負荷にもならないし、配信は最適化してあるし、同じライブラリをほかのサイトで使っていたらすでにキャッシュされているかもしれないしで、おすすめです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/30 18:31

    Gulpが一番よいでしょうね。
    外部ファイルはJSの数分、プラグインの数分作って、ひとつにまとめるのが一番ですね。

    キャンセル

0

JavaScript自体をクライアントにキャッシュさせてもよいのであれば、外部ファイル化を進める方が、WEBサイトの高速化および負荷対策に貢献できます。それにメンテナンス性も高くなるので良いと思います!

サーバ側の同時接続数の負荷を減らすのか、利用者の高速な利便性を重視するのかですが、ファイルを小分けにした方がパラレル度が上がり、クライアントキャッシュが適用され、最終的なページ構成の完了時間は短縮されます。

あと、通信自体はWebサーバがクライアントとネゴシエーションして適切な圧縮方式が選択されますが、コード自体の圧縮(ミニマイズ?軽量化?)はして置いた方が良いと思います。

ハイパフォーマンスWebサイト
※少し古い本ですが今でも適用できるものかと思います


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/30 18:32

    外部ファイルはJSの数分、プラグインの数分作るということでしょうか?

    キャンセル

  • 2015/08/30 20:51

    私はですが、namespace単位といいますか、機能単位にファイルを分けて管理しています。
    一つにまとめる事よりは、可読性と並行性による全体読み込みの完了時間を重視しています。
    DocumentRootが読み込まれてから動作するものしか作成したことがなく、読み込み順序にシビアな運用はしたことがありません。
    なので、依存性解決のツール等は今後必要になれば使おうかなといった程度です。

    jQueryは、リリースサイクルの早いもの前出の通りgoogle呼び出しが多いです。
    リリースサイクルの低い物はバージョン依存性までガッツリ試験するので、ローカルに設置しています。
    最初の方の回答の通り、あらためて振り返ってみると、ケースバイケースの運用をしていますね。

    色々なご意見が出てきて私も参考になります!クリップさせて頂きました。

    キャンセル

  • 2015/08/31 17:34

    ありがとうございます。


    JQUERYやJSは下記のように複数設置することになると思うのですが、
    下記のようにそれぞれ、別ファイルとして、外部ファイル化していると考えてよいでしょうか?

    <!--hover-->
    <script type="text/javascript" src="js/hover.js"></script>

    <!--scroll_top-->
    <script type="text/javascript" src="js/jquery.gptop-1.0.js"></script>
    <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script>
    <script type="text/javascript">
    ( function() {
    $( '#goto_top').gpTop();
    }());
    </script>

    <!--Wink Opacity-rollover2.1.js-->
    <script type="text/javascript" src="js/opacity-rollover2.1.js"></script>
    <script type="text/javascript">
    $("h1 img").wink();
    </script>

    キャンセル

  • 2015/08/31 17:39

    htmlファイルはどうしていますか?

    indexだけルートディレクトリですか?
    ファビコンと一緒にすべてルートディレクトリですか?

    キャンセル

  • 2015/08/31 22:49

    WEBサイトとWEBアプリ・ゲームとで分けて考えると、WEBサイトでは、HTML内にはほぼJavaScriptは記述しません。HTML内から関数的に呼び出してイベントドリブンに動作させることが多いです。この場合Documentが読み込まれた際に関数が使える状態になっている事が望ましいので、HEADにて読み込みさせてます。
    イベントドリブンな感じではなく、自発的に動作を開始させるものについては、上記参考の様に

    $( function() {

    の様にして、ドキュメントの読み込みが終わってから発動するように仕掛けます。
    で、ないと、HTML内要素への変更などがあるとエラーになるので・・・

    ゲームなどは、そもそも、HTMLがほとんどなく、JavaScriptで構成します。
    WEBアプリでは、両方の要素が混じることがあります。HTML内にループを書くこともあります。たとえばバックエンドキューに飛ばした処理の完了を待って表示するなど。
    時々で色々と変わりますね。。。

    index.htmlだけ・・・というのは、ページの構成で変わるので何ともお答えしようが・・・
    Favorit Iconは、link ref="shortcut icon"でも指定できますが、ブラウザがサイトのルートに自動でとってきてくれるので、そこまで複雑な事をしたことがありません。
    といいますか、サイトの顔なので1個に統一してます。
    Favorit Iconを変えるのはどんなメリットがあるのですか?!私の想像しているサイト運用とは違うのでしょうねぇ。色々な利用があるのですね~

    キャンセル

  • 2015/09/01 00:59

    ありがとうございます。

    >>
    index.htmlだけ・・・というのは、ページの構成で変わるので何ともお答えしようが・・・
    Favorit Iconは、link ref="shortcut icon"でも指定できますが、ブラウザがサイトのルートに自動でとってきてくれるので、そこまで複雑な事をしたことがありません。
    といいますか、サイトの顔なので1個に統一してます。
    Favorit Iconを変えるのはどんなメリットがあるのですか?!私の想像しているサイト運用とは違うのでしょうねぇ。色々な利用があるのですね~

    うまく伝わらず恐縮ですが、Favorit Iconはもちろんひとつです。
    ファビコンのファイルをどこのフォルダに置くかというお話です。
    ルートディレクトリに置くのがやはり一般的でしょうね。
    indexについては、htmlフォルダを用意する人と、ルートにすべてhtmlファイルを置く人がいるので、現場ではどちらなのかということでした。


    JSは下記のような形でよいのですね。


    <!--illuminate-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.illuminate.0.7.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#h1').illuminate({
    'intensity': '0.3',
    'color': '#98cb00',
    'blink': 'true',
    'blinkSpeed': '1200',
    'outerGlow': 'true',
    'outerGlowSize': '80px',
    'outerGlowColor': '#FF9'
    });
    });
    </script>

    <!--Gnavi Toggle-->
    <script type="text/javascript" src="js/gnavi_toggle.js"></script>

    <!--LoadingImg Fadeout-->
    <script type="text/javascript" src="js/loadingimg_fadeout.js"></script>
    <!-- **************************end script************************** -->


    </body>

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15955questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • トップ
  • JavaScriptに関する質問
  • JSは外部ファイル化した方が早いと聞いて、下記のようにみん外部ファイル化したのですが、読み込み数が増えると、逆に遅くならないでしょうか?