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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

3回答

9890閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

3クリップ

投稿2015/08/29 09:14

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>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

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

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

投稿2015/08/29 14:03

tsunex

総合スコア206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/08/29 14:54

ありがとうございます。 > また外部ファイルを使用しないことを推奨としているお仕事では アクセス数が多いと言うことで、 jsはもちろんcssまでも外部ファイルにはしないことになっていました。 そんなこともあるのですね。外部ファイルにすると、一度アクセスしたページの外部CSS、JSはキャッシュされるので、二度目からは外部ファイル化したほうが表示が早くなるのですね。一度目は遅くなりますが。 また、外部化するJSファイルは、プラグインの数だけ、作りますか? それともひとつにまとめたりするのでしょうか?
tsunex

2015/08/30 05:56

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

退会済みユーザー

2015/08/30 09:27

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

0

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

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

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

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

投稿2015/08/30 02:01

Ken.sakanakana

総合スコア1768

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/08/30 09:32

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

2015/08/30 11:51

私はですが、namespace単位といいますか、機能単位にファイルを分けて管理しています。 一つにまとめる事よりは、可読性と並行性による全体読み込みの完了時間を重視しています。 DocumentRootが読み込まれてから動作するものしか作成したことがなく、読み込み順序にシビアな運用はしたことがありません。 なので、依存性解決のツール等は今後必要になれば使おうかなといった程度です。 jQueryは、リリースサイクルの早いもの前出の通りgoogle呼び出しが多いです。 リリースサイクルの低い物はバージョン依存性までガッツリ試験するので、ローカルに設置しています。 最初の方の回答の通り、あらためて振り返ってみると、ケースバイケースの運用をしていますね。 色々なご意見が出てきて私も参考になります!クリップさせて頂きました。
退会済みユーザー

退会済みユーザー

2015/08/31 08: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 08:39

htmlファイルはどうしていますか? indexだけルートディレクトリですか? ファビコンと一緒にすべてルートディレクトリですか?
Ken.sakanakana

2015/08/31 13: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/08/31 15: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>
guest

0

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

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

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

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

投稿2015/08/30 00:45

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/08/30 09:31

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問