JSは外部ファイル化した方が早いと聞いて、下記のようにみん外部ファイル化したのですが、読み込み数が増えると、逆に遅くならないでしょうか?
現場でも下記のようにHTMLファイル内で外部ファイル化していますか?
また、
おそらくHTMLファイルにJS本文が記載されていないとHTMLファイルの読み込み自体が早くなるメリットがあるのだと思いますが、body終了直前にあれば、HTMLタグ自体はすでに読み込まれていると思います。
下記のようにするメリットはいったい何なのでしょうか?
<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ページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
同感です。
読み込みの速さを求めるのであれば、
ファイルサイズを小さく、リクエスト数を少なくすべきです。
ただこれはアクセス数の要因などケースバイケースと考えた方が良いかもしれません。
外部ファイルとして切り出しする理由は以下だと思います。
1.可読性も上がり、共通化も出来るため管理もしやすくなる。
2.外部ファイルはブラウザのキャッシュが使用されるので読み込みが速くなる。
参考までに自分が関わったお仕事では
基本的に可読性重視でしたので外部ファイルにしていました。
またデザイン変更が頻繁にあるためブラウザのキャッシュは使用しないように
src="hogehoge.js?yyyyMMddHHmmssSSS"としていました。
また外部ファイルを使用しないことを推奨としているお仕事では
アクセス数が多いと言うことで、
jsはもちろんcssまでも外部ファイルにはしないことになっていました。
月間PV500万くらいのアクセス数だったと記憶してます。
投稿2015/08/29 14:03
総合スコア206
0
JavaScript自体をクライアントにキャッシュさせてもよいのであれば、外部ファイル化を進める方が、WEBサイトの高速化および負荷対策に貢献できます。それにメンテナンス性も高くなるので良いと思います!
サーバ側の同時接続数の負荷を減らすのか、利用者の高速な利便性を重視するのかですが、ファイルを小分けにした方がパラレル度が上がり、クライアントキャッシュが適用され、最終的なページ構成の完了時間は短縮されます。
あと、通信自体はWebサーバがクライアントとネゴシエーションして適切な圧縮方式が選択されますが、コード自体の圧縮(ミニマイズ?軽量化?)はして置いた方が良いと思います。
ハイパフォーマンスWebサイト
※少し古い本ですが今でも適用できるものかと思います
投稿2015/08/30 02:01
総合スコア1768
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/30 11:51
退会済みユーザー
2015/08/31 08:34
退会済みユーザー
2015/08/31 08:39
2015/08/31 13:49
退会済みユーザー
2015/08/31 15:59
0
最近は、GulpやGrunt、Rails付属のSprocketsのように、JavaScriptやCSSを事前処理するようなシステムが普及しています。これらを使うと、
- ライブラリの依存関係を自動で解決してくれる
- CSS、JavaScriptそのままではなく、LESSやTypeScriptのようなより高度な言語で書いたものを自動変換する
- すべてを1本のファイルにまとめる(HTTPのオーバーヘッドも最小限になる)
- コメントや改行を削ったり識別子を短くしたりして、容量を削減する
ような高度な処理を加えることができますが、HTMLに埋め込む形式ではそうも行きません。
なお、jQueryやBootstrapなどの超メジャーなライブラリは、誰でも使えるCDNに置いてあることがあるので(Googleにおいてあるもの)、そっちから呼び出したほうが自分のサーバの負荷にもならないし、配信は最適化してあるし、同じライブラリをほかのサイトで使っていたらすでにキャッシュされているかもしれないしで、おすすめです。
投稿2015/08/30 00:45
総合スコア145121
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/08/30 09:31
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/08/29 14:54
2015/08/30 05:56
退会済みユーザー
2015/08/30 09:27