• ベストアンサー

JavaScriptのパフォーマンスについて

JavaScriptのパフォーマンスについて質問です。 いくつもの関数の間で、変数を利用する際、 関数の引数にして受け渡すことが一番パフォーマンスが良いと思います。 ただ、もしそれができない場合、 ・グローバル変数にして、複数の関数で利用することと、 ・HTMLのINPUT（type="hidden"）などに置いておいて、DOM操作で取得すること どちらの方が、クライントのパフォーマンスが良いのでしょうか。

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

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

一般的な話としては、 DOMアクセスは非常に高コストな処理なので可能な限り避けるべきです。 （パフォーマンス最適化を考えるならDOMアクセス数削減は真っ先に候補に挙げてもいいくらい。） グローバル変数へのアクセスは、ローカル変数へのアクセスと比べると スコープチェーンをたどる必要がある分確かに遅いですが、 DOMアクセスのコストに比べれば差は小さいです。 あとは、パフォーマンスについて何かをするときは、 本当に効果があるか（プロファイラなどで）実際に確認するようにしてください。 机上だけでは見当違いのことをしている可能性もあります。

kwyjibo
質問者

お礼

早々のご解答ありがとうございます。 やはり、DOM操作はまず避けるべき対象なんですね。 それと、効果があるのか実際に試して確認することの大切さもご指摘いただきありがとうございました。

その他の回答 (2)

  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.3

・その2択しか存在しない ・ほんの少しでも速いほうを選べ という条件であればグローバル変数です。 ただ、現実を踏まえるべきです。 両差の違いはごくわずかです。数万回、数百万回繰り返すくらいでないと 差を検知することすらできないと思います。 数十回や数百回単位しか繰り返さない処理では そんなことを意識しても無駄です。 理論的な速度差にこだわるより、現実に差が出るかどうかを踏まえ、 差がないのであれば、むしろ気をつけるべきなのは 人間が読みやすい・理解しやすいコードであるかどうかであり、 その点を意識するほうがはるかに大切なことです。

kwyjibo
質問者

お礼

ご解答ありがとうございます。 わずかなパフォーマンスの向上よりも、可読性を意識する方が大切なんですね。

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

2択ならグローバル変数の方が速いと思いますが、なぜ2択に絞ってしまうのかがわかりません。また「もしそれができない場合」となる状況も想像できません。クロージャとか使えないってことでしょうか？ もしくは、グローバル変数とは言葉のあやで、参照後に消去されるローカル変数の対義語として使用しているだけなのでしょうか？

kwyjibo
質問者

お礼

ご解答ありがとうございます。 クロージャーについての知識が足りないので、先ほどの2択しか思いつきませんでした。 またグローバル変数というのは、ローカル変数の対義語として、使用しています。 クロージャーについて、勉強してみます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavascriptでHTMLをパースするライブラリの使い方

    javascriptでHTMLをパースして、DOMに変換してくれるライブラリを探していたら以下のサイトにたどり着きましたが使い方がわかりません。 http://ejohn.org/blog/pure-javascript-html-parser/ サイトの中段あたりに、 「DOM Document Creator」 というところのサンプルのように、 <script src="htmlparser.js"></script> で外部ファイルをちゃんと読み込んで、 var dom = HTMLtoDOM("<p>Data: <input disabled>"); のようにすると、 domという変数にHTMLtoDOMの引数がDOMに変換されて 格納されるはずなんですが・・・ FirefoxでHTMLtoDOM is not defined とエラーがでてしまいます。 見識ある方、このライブラリを使用する方法を教えていただきたいです。

  • javascript DOM

    javascript DOMについて DOMはドキュメントオブジェクトモデルの略だと思いますが、DOMそのものというのはブラウザ画面に映っているオブジェクトそのものという解釈で良いのでしょうか？ というのもjavascriptには「document.write()」というメソッドがあると思いますがdocumentはブラウザ画面そのものを指していて、writeは書く。直訳するとブラウザ画面に書くになると思いますが DOMもdocumentはブラウザ画面、オブジェクトはブラウザに移っているオブジェクト（<input type="button">など）、モデルは良くわからないのですが HTMLの画面に映っているタグ自体はDOMと呼ぶのでしょうか？

  • mixiアプリでjavascriptで取得した変数をPHP変数にするに

    mixiアプリでjavascriptで取得した変数をPHP変数にするには？ いつもお世話になっております。 mixiアプリで利用者のIDを取得する方法は、 document.getElementById("id").innerHTML = id; で行うことができたのですが、これはHTML内に、 　　<span id="id"></span> と記載した場合のみIDが表示されるようになっています。 これをPHPの変数(例：$id)などとして扱うことはできないでしょうか？ 任意の場所に<?php echo $id; ?>と書けばIDが表示される仕組みにしたいと考えています。 (最終目的としてはinputのvalueにmixiIDを代入し、次ページへ変数を渡せたいのです) <input type="hidden" name="id" value="◆◆"> ◆◆の部分にIDを代入させたいです 以上よろしくお願いいたします。

  • javascriptで困っています。教えてください

    JavaScriptで配列をPOST送信しようとしています。 <form>や<input>を作っておいてではなく、javascriptで生成する関数からしたいと思っています。以下のコードでうまくいきません。 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var ar = new Array(5); ar[0] = 111; ar[1] = 222; ar[2] = 333; ar[3] = 444; ar[4] = 555; function sampleForm(value){ var form = document.createElement('form'); document.body.appendChild( form ); var input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','hidden_input'); input.setAttribute('value', value); form.appendChild(input); form.setAttribute('action','send.php'); form.setAttribute('method','post'); form.submit(); } </script> </head> <body> <a href=“javascript:sampleForm(ar)”>クリックしたら“samplepost”をPOST送信</a> </body> </html> send.php-------------------------------- <?php $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null; print "num: " . $num; ?>

  • javascriptで取得した値を、FORMで送信する

    いつもお世話になっております。 jspからwindow.openを使い、別ウインドウを表示しました。 別ウインドウでの質問です。 javascriptで前のページ(jsp)の情報を受け取り、それを次のページ(jsp)へFORM(POST)で送りたいのですが、うまくいきません。 ご教授下さい。 <HTML> <HEAD> <script type="text/javascript"> <!-- function sent() { var num = window.opener.document.aaa.number01.value; ここで前ウィンドウの情報を取得しています return num; } function sub() { document.bbb.submit(); } // --> </script> </HEAD> <BODY onload="sub()"> <form name="bbb" METHOD="POST" action="http://okwave.jp"> <input type="hidden" name="timeid" value=""> <input type="hidden" name="number00" value="1"> <input type="hidden" name="number01" value="sent()"> <!--<input type="hidden" name="number01" value="204038054776">--> 当たり前ですが、コメントにしている部分にすると次のページでうまくいきます。 </form> </BODY> </HTML>

  • javascriptのフォームデータをCGIで複数行取得

    javascript内の変数を複数行のフォームでCGIに渡したいのです。 その際のコードが document.write("<form name='form1' action='xxx.cgi'　method='post' enctype='text/plain'>"+ 　　　　　　　　　　"<input type='hidden' name='state' value=''>"+ 　　　　　　　　　　"<input type='hidden' name='state2' value=''>"+ 　　　　　　　　　　"</form>"+ 　　　　　　　　　　"<input type='button value='送信' onClick='tocgi(a,b)'>"); 　　　　　　tocgi(n1,n2){ 　　　　　　document.form1.state.value=n1; 　　　　　　document.form1.state2.value=n2; 　　　　　　document.form1.submit(); 　　　　　　 } なのですが、a、bの値がそれぞれ10、20だった時、一行目のフォームデータは出力されるのですが、２行目が出力されないのです。実行結果でいうとstate=10ですね。引数を一つにしても同じでした。何がいけないのか、全然わかりません…。それとも、CGIのコードの書き方に問題があるのでしょうか。でも、CGIの方は変えずに単純にHTMLで記述すると上手くいくみたいなんですよね。どなたかわかる方がいたら助けて下さい！

    • 締切済み
    • CGI
  • javascriptで取得した値をテキストボックスに・・・

    IE5.5です。 javascriptで取得した値をテキストボックスに格納したいのですが、 うまくいきません。 <SCRIPT language="javascript"> var varVal=true </script> <form> document.write("<input type='hidden' name='myVal' vaue="+varVal+">"); </form> javascriptが初心者でよくわからないのですが、 例えば <input type="hidden" name="myVal" value=varValに格納された値> といった書き方もできるのでしょうか？ よろしくご教授願います。

  • PHPでJavascriptの引数の扱い方

    はじめまして。宜しくお願い致します。 環境：Linux(Redhat 9), apache2, PHP4.3.6 [やりたいこと] 下記↓ソース内容↓より、input=button と input=text が幾つかある。 個々のボタンが押されたら、PHPにて"個々"の内部処理を行う。 内部処理終了後は、個々のテキストにインクリメントした値が画面表示される。 HTML＋Javascript にて、カウンター部分は一応完成しています。 ↓ソース内容↓ <html> <head> <script language="JavaScript"> <!-- function ccc(obj0) { cnt = obj0.value; cnt++; obj0.value = cnt; } // --> </script> </head> <body> <form name="ose"> <input type="text" name="view0" readonly size=5 maxlength=3> <input type="button" value="押せ0" onClick="ccc(view0)"><br> <input type="text" name="view1" readonly size=5 maxlength=3> <input type="button" value="押せ1" onClick="ccc(view1)"> </form> </body> </html> コレをPHPに書き換えると、上手くいきません。 ↓PHPに書き換えた場合↓ <script type="text/javascript"> <!-- function ccc($obj0) { cnt = $obj0.value; cnt++; $obj0.value = cnt; } // --> </script> 引数に付いている "$"マークをJavascript側で認識しないのだろう、と考えています。 出来れば、PHPで単体の関数として使用したい為、模索中です。 ※現在は、別の関数の中に上記の『↓HTML＋Javascriptの場合↓』を無理矢理入れて使用しています。(別の関数：HTMLをPHPファイルに書き込む) 別の関数内に入れてても問題は無しです。 但、上記のJavascriptを使用しないソース達にも書き込んでしまうので、ちょとやだなーと。 いい方法があったら教えて下さい。

    • ベストアンサー
    • PHP
  • JavaScriptにおいてPOSTで送信されたデータを取得出来ますか

    <form action="自分" method="POST"> <input type="hidden" name="abc" value="1"> <input type="submit" name="OK" value="OK"> </form> 上記のように、POST渡しで送信したとき、Javascriptにて、hiddenのデータを取得することができるのでしょうか？ 出来るのであればその方法を教えてくださいませんか。 よろしくお願いします。

  • JavaScript DOMについて

    JavaScriptの勉強を始めて、１か月程度の初心者です。 JavaScriptを使って、計算したり、カレンダーを作ったり、 HTMLの要素の内容を変更させたり、削除したり、 スタイルシートのプロパティ？を変更して、背景色を変えたり、要素を移動したり、 イベントを使用したりと、出来ることは増えてきて、勉強するのが楽しくなってきたのですが、 いまだにDOM操作についていまいち理解できていません。 具体的にDOMとはどこからどこまでなんでしょうか？ JavaScriptに組み込まれているオブジェクト（Date,Math、String、Array） 以外のものは、すべてDOM操作と言う事でしょうか？ イベントハンドラだとか、タイマ機能？（windowオブジェクトのsetTimeout（）メソッド）なども DOMと言う事でしょうか？ どなたかわかりやすく説明してもらえると嬉しいです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する