JavaScriptの動作を改善する方法とは?

このQ&Aのポイント
  • JavaScriptの動作が重くてデータ入力が非常に効率が悪いという問題があります。同僚はJavaScriptのキャッシュが原因だと考えていますが、改善方法がわかりません。
  • カスタマイズされているCMSのデータ入力処理はJavaScriptで行われており、確定ボタンを押すとリクエストするURLが変わり、データがDBに反映されます。DBはオラクルで、XMLも関連しているそうです。
  • 同僚は時間の制約があるため、大規模な改造はできません。そこで、対処療法的な改善方法を探しています。Ajaxで定期的に自動保存するか、JavaScriptのキャッシュを破棄する方法が考えられますが、工数やキャッシュのクリアの可否についてはわかりません。また、JavaScriptの動作を圧縮する方法も知りたいです。
回答を見る
  • ベストアンサー

動作が重いJavaScriptを改善したい

今、同僚が、某CMSのカスタマイズをしていて、自分はそれを使ってデータ入力しています。 なお、データ入力の際に使っているのはIE8です。 (大人の事情で、バージョンアップやブラウザ変更はできません) で、1ページを作るのに、「段落(<p>」を加えたり「画像ファイルをアップ」したり、 Hn見出しをつけたり、その他いろんなブロック要素を加えたり、といったデータ入力の処理を JavaScriptで行っており「確定ボタン」を押すと、リクエストするURLが代わり、 入力していたデータがはじめてDBに反映されるというしくみになっています。 DBはオラクル(バージョン不明)です。 自分は詳しくないですが、どこかのタイミングでXMLも関連しているそうです。 で、そのおかげで、JavaScriptが重くて(遅くて)データ入力時に、 どっかのボタンを押してもしばらくブラウザが無反応という状態で、 非常にデータ入力の効率が悪いです。 そのカスタマイズしている人は「JavaScriptのキャッシュのせいで重くなってるのかなあ?」と言っています。 これを改善する方法はないでしょうか? あれば、その方法を同僚におしえます。 ただし、あまりその同僚もCMSのカスタマイズに時間をとれないので、 時間の大幅に食うような大規模な改造はできません。 対処療法的な改善で、これを改善する方法はないでしょうか? (ちなみに、私自身のJSの知識は5年ほど前で止まっており、JQueryやprototype.jsの知識はありません) ただ、カスタマイズでおそらくJQueryを使っています。 自分が思ったのは、Ajaxで定期的に自動保存して(ただ現状DBへのアクセスはJSを使っていないので難しいかも)、 JSのキャッシュ(←具体的に何をさしてるのか自分でも分かりませんが・・・)を破棄すればいいのではと思ったのですが、 それをやろうとすると工数がかかるでしょうか? でも、不要なキャッシュ(メモリ?)のクリアならできるのでしょうか? //----------------------------------------------------------- また、JSのコードは理屈上同じでも、JSの動作を圧縮する(?)ような手段があった気がするのですが、 忘れてしまいました。ご存知でしたら、お教えください。 以上、よろしくお願い申し上げます。

質問者が選んだベストアンサー

  • ベストアンサー
  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.2

> これを使ってカスタマイズするといのは、工数が結構かかるものなんでしょうか? 完全にケースバイケース。基本は地道にやるしかない。 (特効薬的な物があるのかどうかだってケースバイケースなんだから。) ただ、プログラムの中身をよく知っている人がやった方が早いとは思います。 プロファイラは遅い関数を教えてくれるかもしれないけど、 どう直せばいいかまでは教えてくれませんから。 JavaScriptの一般的な性能向上について知りたいなら 「ハイパフォーマンスJavaScript」という本でも読んでみてはどうかと思います。 特定のプログラム固有の問題について直接の解決策を示してくれるようなものでは無いですが、 まあ知っていて損はないことは書いてあるかと。 > 感覚的でかまわないので工数はどのくらいかかりますか? 私はそちらのプログラムの規模さえ知りません。 > また、何%くらい動作が軽くなりますか?(JSの中身次第だとは思いますが) ケースバイケース。 アルゴリズムの選定間違えてたとか酷いミスがあったら桁違いに早くできることもあるし、 (言い換えると桁違いに遅くなるような物書く人がいるって事なんだけど・・・) 既に改善の余地がほとんど無ければ数%しか早くならなかったり。 > あと個人的な興味なのですが、この「JSのプロファイラ」というのは世間的によく使われているのでしょうか? JavaScriptというか、プログラミングやってて性能改善しようとしてるなら普通は使うものじゃない? > おすすめの、JST用プロファイラというのはどれでしょうか? 普段はFirefoxでFirebug付属のプロファイラ使ってます。 IEだったら、最近のIEなら標準で開発者ツールにプロファイラ付いてるはず。

その他の回答 (1)

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.1

まずはプロファイラを使ってどこに時間がかかっているのか調べましょう。 勘で「ここが遅いはず」じゃそれが正しいかどうかさえ分かりません。 遅い場所を見つけたら地道に改善してください。 > また、JSのコードは理屈上同じでも、JSの動作を圧縮する ファイルサイズが小さくなるだけで、動作が軽くなるのとは違います。 ロード時間が短くなるなどメリットはあるのでできるならやった方が良いですが。 > ご存知でしたら、お教えください。 Googleで「JavaScript 圧縮」で検索したら出てきました。

goonejp_4
質問者

補足

ご回答ありがとうございます。、 で、プロファイラというのをはじめて知ったので、 Googleで 「("プロファイラ" OR "profiler" ) javascript ("internet explorer" OR IE OR "インターネットエクスプローラ")」 で検索したのですが(CMSはIE8にしか対応してないため) ※ ↓検索結果↓ https://www.google.co.jp/#sclient=psy-ab&hl=ja&source=hp&q=%28%22%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%A9%22+OR+%22profiler%22+%29+javascript+%28%22internet+explorer%22+OR+IE+OR+%22%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%97%E3%83%AD%E3%83%BC%E3%83%A9%22%29&oq=%28%22%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%A9%22+OR+%22profiler%22+%29+javascript+%28%22internet+explorer%22+OR+IE+OR+%22%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%97%E3%83%AD%E3%83%BC%E3%83%A9%22%29&aq=f&aqi=&aql=&gs_sm=3&gs_upl=10854l85850l1l86846l54l54l8l0l0l0l108l2972l45.1l46l0&gs_l=serp.3...10854l85850l1l86847l54l54l8l0l0l0l108l2972l45j1l46l0&psj=1&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&fp=c45acc9488e32671&biw=1467&bih=556 これを使ってカスタマイズするといのは、工数が結構かかるものなんでしょうか? ※CMSカスタマイズのために同僚が書いているJSについて、 自分は中身をよく見てない(というか見てもわからない)ので、客観的に 「工数がこのくらい」とはいえませんが、 感覚的でかまわないので工数はどのくらいかかりますか? また、何%くらい動作が軽くなりますか?(JSの中身次第だとは思いますが) //----------------------------------------------------------- あと個人的な興味なのですが、この「JSのプロファイラ」というのは世間的によく使われているのでしょうか? //----------------------------------------------------------- まあ、同僚に「JSのプロファイラ使ってみては?」と言ってみればすむはなしかもしれないですが、同僚も「プロファイラ」に詳しくないかも。 おすすめの、JST用プロファイラというのはどれでしょうか? //----------------------------------------------------------- 以上、私自身の個人的関心もあって、質問攻めにしてしまいましたが、 部分的でもかまわないので、さらなるご回答をいただけたら幸いです。 以上、よろしくお願い申し上げます。

関連するQ&A

  • 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

  • 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://xxx.my-sv.net/js/jquery-1.4.2.min.js ちなみに以下のようにJavaScriptファイルを開こうとするとブラウザは真っ白なのですが、 http://xxx.my-sv.net/js/jquery-1.4.2.min.js テキストファイルに変更したものだと中身を見ることができました。 http://xxx.my-sv.net/js/jquery-1.4.2.min.txt ブラウザはFireFox3.0.11とIE8.0の両方でダメでした。 なぜJavaScriptファイルだけ読み込めないのでしょうか。 ご教授お願いいたします。 ※ちなみに、別のレンタルサーバーにアップロードしたら問題なく読み込めました。 しかし、そこにはDBがなかったので、なるべく今のレンタルサーバーを使いたいのです。。

  • JavaScriptプラグインが読み込めません

    「easySlider1.7」というJavaScriptプラグインを使い、サイト内の画像をスライドさせようとしています。 MacのデスクトップにおいたフォルダのHTMLと同じ階層にeasyslider1.7というフォルダをおき、<head>内に <script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js" ></script> <script type="text/javascript" src="easyslider1.7/js/jquery.js"></script> と記述し、 <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto:true }); }); </script> で動作させようとしているのですが、 ブラウザで試すと動かず、コンソールには ReferenceError: Can't find variable: jQuery TypeError: Result of expression '$("#slider").easySlider' [undefined] is not a function. と出てきます。 上段の”jQuery”はeasySlider1.7.js内に記述されているものです。 ちなみにgoogleAPIのjQueryをロードしても同じエラーが出ました。 何が原因なのでしょうか。ご回答宜しくお願いします。

  • javascriptライブラリの使い方

    aa.js bb.js cc.js の3つのjavascriptを使ったサイトを作成中です。 ヘッダーに <script src="aa.js" type="text/javascript"></script> <script src="bb.js" type="text/javascript"></script> <script src="cc.js" type="text/javascript"></script> と記載し、「aa.js bb.js cc.js 使う前提のスクリプト」をサイト上に記載しているのですが、aa.js bb.js cc.js のそれぞれが重いため、サイト記載のスクリプトがaa.js、bb.js、cc.jsより先に読み込まれてしまい、思ったような表示が出来ません。 (cc.jsが読み込まれないままの状態でサイトのスクリプトを読み終わってしまう) そこで調べてみると、下記のようなライブラリを発見しました。 http://notnil-creative.com/blog/archives/1361 このライブラリ(script.js)を使うと、通常は以下のように書くJavascriptの読み込みが、 <script src="jquery.js"></script> <script src="my-jquery-plugin.js"></script> <script src="my-app-that-uses-plugin.js"></script> 下記のように書くことができるそうです。 $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) この書き方で、ページのレンダリングを阻害せず、非同期にJavascriptを読み込むことができ、なおかつ「jQueryが読み込まれてからjQueryプラグインを読み込み、そのあとウェブサイト用のスクリプトを読み込む」というような依存関係のある複数のJavascriptファイルの読み込みにも対応できちゃいます。 という優れものであり、私の要求にぴったりと思いました。 早速、http://notnil-creative.com/blog/archives/1361のページからscript.jsをダウンロードしたのですが、使い方がわかりません。 例ではヘッダーに $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) と記載すればOKと書いてあります。 ただ、この記入方法で動くようにするためには、$scriptがscript.jsに連動していることを記載すべき だと思いますが、javascriptでそのような例を見たことがなく困惑しています。 このスクリプトの使い方(ヘッダーの記入方法)について、ご教授頂けませんでしょうか? 宜しくお願い致します。

  • 横幅に応じて読込javascriptを変更したい

    ■前提 ・TwitterBootstrapを利用してレスポンシブサイトを作成しています ■質問 ・現状、こういう感じで常に「★★.js」を読み込んでいるのですが、 <script type="text/javascript" src="★★.js"></script> 例えば、ブラウザ横幅が500px以下の際は、「★★.js」を読み込まないよう条件指定するには、どうすれば良いでしょうか? ・「js」読み込む際の条件指定は、「javascript」でやるのでしょうか? それとも、「PHP」とかでも出来るのでしょうか? ※やりたいことが出来れば、方法は何でも良いです ※jQuery利用してもしなくてもどちらでも良いです

  • 【javascript】2つ同時に上手く動かない

    javascript初心者です。 現在作成している画面に2つの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を自分でカスタマイズしたら挙動がおかしくなってしまいました。 下記のサイトなのですが、 http://minefuyu-yamashita.com フォトギャラリーページで、写真が4つと5つ並んでいるものに限って、 ▼写真4つの場合 http://minefuyu-yamashita.com/photo/category/%E6%B2%96%E7%B8%84%E6%9C%AC%E5%B3%B6 ▼写真5つの場合 http://minefuyu-yamashita.com/photo2/category/%E5%A4%9C 次の写真を参照するボタンリンクをクリックすると、写真が右へ移動したまま、戻ってこないという現象が起きました。 原因はわかっていて、元データの下記リンク先の、 ▼元データ http://www.css-lecture.com//template/2008/1121/ 元データでは、写真表示が5個になっているいるのですが、これを7個に表示するというようにjsの中の数字を書き換えてしまったためです。 ▼元データjs http://www.css-lecture.com//template/2008/1121/js/jquery.scrollable... どの部分の数値を変えてたのかというと、 下記リンク先javascriptの52行目辺りにある、 ▼書き換えたjs http://www.minefuyu-yamashita.com/photosite/js/jquery.mousewheel.js var opts = { size: 7, horizontal:false, ctiveClass:'active', speed: 300, onSeek: null, のsize: 7,の数字を、5→7に変えてしまったためです。 この数字を5に戻せば、大丈夫なのですが、このサイトのデザイン上、どうしても7個で見せたいのです。数字を7のまま、その他のどこをどのように書き直せばこれがきちんと動くのかわかりません。 ちなみに、当方はjavascriptはほぼ分かりません。 いつも適当にコード内の数値を変えたりしてるぐらいのカスタマイズ能力です。 今回も自分でjsの中の他の数字をいろいろと変えてみましたが、誤作動は直りませんでした。 どなたかご教授願います!

  • Jqueryのjavascriptが読み込まれません

    はじめまして。 Jqueryのsuperfishを使用したサイトを作っているのですが、javascriptファイルが読み込まれていないような状態になっています。 具体的には 1)ローカル環境では問題なく読み込まれている 2)サーバにアップすると、同階層の別ページ(A.htmlとします)では機能しているのに、特定のページ(B.html)では読み込まれていない ※A.htmlとB.htmlで同じ効果(superfishによるアコーディオンナビ実装)を得たい 3)A.htmlの<head>内javascriptに関する記述とB.html内同箇所の記述は全く同じ 4)B.html内の他の単独のjavascriptは問題なく読み込まれる という状況です。 この場合どのような原因が考えられるのでしょうか。 javascriptについては全くの初心者であり、どうにも解決できず、困っています。 ちなみに使用しているjqueryはjquery-1.2.6.min.jsです。 (大元であるA.htmlは違う方にコーディングしてもらい、そのデータを元にB.htmlをコーディングする作業をしています) jquery-1.2.6.min.jsもしくはsuperfish.js内に動かすhtmlへのパスが記載されているのかとも思いましたが、知識不足で該当の箇所が見つけられず…。 ご意見を頂ければ幸いです。 どうぞよろしくお願い致します。

  • JavaScriptでキャッシュクリアする方法はありますか?

    現在、入力された条件によりデータを抽出するプログラムを作っています。が、IEで実行すると前回入力した条件のまま、データが抽出されてしまいます。 NNでは正常に表示されるため、キャッシュのせいかと思っているのですが、 JavaScriptでブラウザのキャッシュをクリアする方法はありませんか? ブラウザ>ツール>インターネットオプション>一時ファイル削除 しか手がないのでしょうか? 大変困っているので回答をよろしくお願いします。

  • JavaScript(ライブラリ)のキャッシュについて

    jQueryやprototypeなどのJavaScriptライブラリを使用して、ホームページに色々な効果をつけています。 その1つで、ナビゲーション箇所に「アコーディオンメニュー」を実装したのですが、ページ遷移する度に読み込みが遅いためか、メニューが全部展開(開いた)状態になってしまいます。 その後3秒~5秒ほどでアコーディオンが閉じた状態になります。 不恰好で困っています。 トップページなど入り口のページはあきらめるとして、他のページに遷移したときは、上記の「メニューが展開する」状態を回避する策はないでしょうか? jquery.js accordion.js というようにサイトのすべてのページに読み込みをしています。 JavaScriptについては「外部ファイルにするとキャッシュが残る」というように聞いたことがありますが、それは一度閲覧したサイトを次回、訪れた際にキャッシュが残っているということでしょうか? それともトップページで一度読み込みをすれば、他のページに遷移したときにトップページで既に読み込みをしたjsファイルがキャッシュされており、引き継がれる(再読み込みをしない)、ということでしょうか? 「アコーディオンがいちいち展開する」ことから、初めて訪れるページは、トップページでもサブページでも、同じjsファイルにもかかわらずいちいち読み込みいくということなのかな・・・と思っているのですが。 JavaScript、JavaScriptライブラリを混同しているような内容で、的はずれな質問をしてしまっているのかもしれませんが、当方、あまり知識を持ち合わせておらず、どうぞご容赦ください。

専門家に質問してみよう