Javascript外部ファイルの読み込みについて（ブラウザにキャッシュさせたい）
- webページ表示にかかる時間を短縮するために、Javascriptの外部ファイルの読み込み方法に問題があります。現在、サイトの表示には5秒～15秒かかっており、特にIE6の環境では重くなる場合があります。
- 外部ファイルの読み込み箇所を削除すると表示速度が向上することから、読み込み処理に問題があると考えられます。既に圧縮やキャッシュ設定を試してみましたが、改善は見られませんでした。
- 外部ファイルをキャッシュさせる方法を探しています。現在のスクリプト呼び出し部分は、prototype.jsやjquery.jsを統合するなどの試みも行っていますが、まだ解決策が見つかっていません。
- ベストアンサー
Javascript外部ファイルの読み込みについて（ブラウザにキャッシュさせたい）
現在、製作中のサイトにおいて、webページが表示されるまで、5秒～15秒程度かかる事態が発生しています。 該当サイトでは、prototype.js等のjavascriptのライブラリを使用しており、合計で5個のjsファイルを読み込んでいます。 jsファイルの読み込み箇所を削除するとサクサクと快適になるので、jsファイルの読み込みに問題があると考え、jsファイルを圧縮したり（http://dean.edwards.name/packer/等）、ブラウザにキャッシュさせるために<script src=""での読み込み時に引数「?version=1」を追加してみたりしていますが、あまり改善しません。 読み込みの数を減らすため、prototype.jsとjquery.jsを統合するなども試してみました。（統合後のサイズは116KB） 利用環境によってはそれほど気にならない速度なのですが、IE6の環境でかなり重い場合がありますので、改善方法を探しています。 一回目の表示はともかく、2回目以降も毎回トップページ表示に5秒以上かかるのは問題がありますので…。 現時点で原因は、外部jsファイルがキャッシュされず毎回サーバーに読みにいっているために遅くなっていると思うのですが…。 ブラウザに外部ファイルをキャッシュさせる方法は何かないのでしょうか？ ちなみに、重くなる環境で、他のサイト（外部JSファイル読み込み多数）のサイトを表示しても、2回目以降は重くなりません。ブラウザのキャッシュの削除も一度試しています。 参考に、現在のスクリプト呼び出し部分を記述します。 ---------------------ソースここから--------------------------- <script type='text/javascript' src='js/prototype-1602-and_jquery.js?version=1'></script> <script type='text/javascript' src='js/js.js?version=1'></script> <script type="text/javascript" src="js/lib/jquery_auto_j.js?version=1"></script> <script type='text/javascript' src='js/scriptaculous-js-181/src/scriptaculous.js?load=effects'></script> <script type='text/javascript' src='js/lightview.js?version=1'></script> ---------------------ソースここまで--------------------------- また、スクリプトはPHPで作っていますので、キャッシュを許可する記述を以下のようにしています。 ---------------------ソースここから--------------------------- session_cache_limiter('private_no_expire'); session_start(); ---------------------ソースここまで--------------------------- また、現状ではjsファイルの読み込みが原因かと考えていますが、それ以外でも改善点などがあれば、それをご指摘頂ければありがたいです。 宜しくお願い致します。 確認環境：windows XP、 IE6 HP作成スクリプト：PHP
- ttknet123
- お礼率37% (3/8)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
本質的な解決方法は・・・ 意味もなく外部jsライブラリに頼らないことです。 prototypeにしても確かに便利かもしれませんが、いかんせん コンパイル言語のライブラリと違って容量もリソースも無駄が多い。 使う機能よりおそらく使わない機能の方が圧倒的に多いはずなのに・・・ 簡単なモノは手で書く。 ちょっと手間のモノも各ライブラリから抜き出して、オリジナルの ライブラリにしておく・・・くらいでしょうか。 jsのキャッシュは仮にできたとしてもリスクが高いので割にあわないと思います。
関連するQ&A
- javascriptの外部ファイル読み込みの不具合
質問させて頂きます。 javascript初心者です。 現在サイト作成にあたり、jsを組み込んでおります。 ajaxmailを設置しようと、参考サイトの手順通りに行ったのですが、 <script type="text/javascript" src="./js/protoculous-effects-packer.js"></script> の記述をすると、他のjsが動作しなくなってしまいます。 現在読み込んでいるものをコピペさせて頂きます。 <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script src="./js/mapstyle.js"></script> <script src="./js/modernizr.custom.min.js"></script> <script src="./js/jquery-1.10.2.js"></script> <script src="./js/hoge.js"></script> <script src="./js/jquery.smooth-scroll.min.js"></script> <script src="./js/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript" src="./js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="./js/lightview.js"></script> 下２行がajax設置の際に読み込むものです。 lightview.jsだけの場合は機能しています。 どなたかご教示の程、よろしくお願い致します。
- ベストアンサー
- JavaScript
- javascriptファイルは１つに統合できますか
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箇所にコピー＆ペーストするようなイメージで） お手数ですが、ご教示のほど、宜しくお願い致します。
- ベストアンサー
- JavaScript
- 【javascript】２つ同時に上手く動かない
javascript初心者です。 現在作成している画面に２つのjavascriptを動かしたいと思っております。 しかしながら、一つずつでは動くのですが、同時に表示すると上手く動作しません。 いい方法などありましたらご教授お願い致します。 【htmlのヘッド】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.coda-slider-2.0.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sm_scroll.js"></script> <script type="text/javascript" src="js/jcaption.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#coda-slider-1').codaSlider({ autoSlide:false, autoHeight:false, autoSlideStopWhenClicked:false, autoSlideInterval:10000, firstPanelToLoad:1, dynamicArrows: false, }); }); </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 【上部のjavascript】 Coda-Slider 参照URL：http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 【下部のjavascript】 litebox 参照URL：http://lokeshdhakar.com/projects/lightbox2/ javascript内が初期化されているのが問題なのでしょうか？ 解決の方法などありませんでしょうか？ 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
- JavaScriptの外部ファイル読み込み
JavaScriptの外部ファイル読み込みについてご教授下さい。 現在、Webサイトを作ろうとPHPとJavaScriptをレンタルサーバーにアップしたのですが、 ローカルではPHPから外部ファイルのJavaScriptを読み込めるのに、 サーバーにアップするとPHPからJavaScriptを読み込めなくなってしまいます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>TEST</title> <meta charset=utf-8" /> <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script> ・・・ 上記のようにしてもjquery-1.4.2.min.jsが読み込まれず、jQueryが使えません。 FireBugでスクリプトを確認すると以下のようなエラーが出ていました。 1Failed to load source for: http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.js ちなみに以下のようにJavaScriptファイルを開こうとするとブラウザは真っ白なのですが、 http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.js テキストファイルに変更したものだと中身を見ることができました。 http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.txt ブラウザはFireFox3.0.11とIE8.0の両方でダメでした。 なぜJavaScriptファイルだけ読み込めないのでしょうか。 ご教授お願いいたします。 ※ちなみに、別のレンタルサーバーにアップロードしたら問題なく読み込めました。 しかし、そこにはDBがなかったので、なるべく今のレンタルサーバーを使いたいのです。。
- ベストアンサー
- JavaScript
- javascript外部読み込みの際の引数
教えてください。 HTML内で以下のように ?ver=12 と引数付きでjavascriptを読み込みます。 <script type="text/javascript" src="hoge.js?ver=12"></script> このver=12をhoge.js内で利用するにはどうやって取得したらよいでしょうか？ ※画像等のキャッシュの制御のためにバージョンナンバーをつけて管理します。
- ベストアンサー
- JavaScript
- 複数のjavascriptが作動しない
http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！
- ベストアンサー
- JavaScript
- prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
- 複数のjQueryを導入するには…？
見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・？ プログラムさっぱりでとても困っています。 解決策よろしくお願いします。
- 締切済み
- JavaScript
- アコーディオンとロールアップの共用について
今、あるホームページを作っていて、アコーディオンとロールアップの機能を使用したいと思っています。 ロールアップについては今までも使ったことがあり、以下の2つのスクリプトを使用しています。 ○jquery.js ○yuga.js これに、今回はアコーディオンの機能を使いたいので、以下の3つのスクリプトを組み込んで使おうと思いました。 ○accordion.js ○prototype.js ○effects.js で、以下のようにHTMLソースのHEAD内にスクリプトを読み込む記述をして、動作テストを行ったところ、どちらか片方しか動作しないというトラブルが発生しました。 記述の順番を変えると、どちらかが動作するようです。 例1：ロールアップのみ動作する <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/effects.js"></script> <script type="text/javascript" src="../js/accordion.js"></script> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/yuga.js"></script> 例2：アコーディオンのみ動作する <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/yuga.js"></script> <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/effects.js"></script> <script type="text/javascript" src="../js/accordion.js"></script> これら2つの機能を同時に使用するにはどうすればいいでしょうか？
- ベストアンサー
- JavaScript
- 複数スクリプトの読み込みでlightboxが動作しません
MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示（lightbox）をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示（lightbox（最新版））のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示（lightbox）が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示（lightbox）のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。
- 締切済み
- JavaScript
お礼
お返事が遅くなりました。 結果として、prototypeは用いてますが、ライブラリをlightviewではなくlightboxを用いることでアクセス速度は向上しました。 根本的な原因がわかって解決、ってことではないのですっきりはしないですが…。 やはり原因がわかりづらくなる原因ともなるので、何でもライブラリにたよるのも考え物ですね。