- 締切済み
このコードを処理速度向上させることはできますか？
このコードを処理速度向上させることはできますか？ <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function className(str){ var alltag = document.getElementsByTagName("*"); var ary = []; for(var i=0;i<alltag.length;i++){ if("."+alltag[i].className == str){ ary.push(alltag[i]); } } return ary; } window.$ = function(str){ var ID = str.match(/^#(\w+)/), CLASS = str.match(/^\.(\w+)/), TAG = str.match(/^(\w+)|(\*)/), node = str.match(/^doc/)? document: TAG? document.getElementsByTagName(RegExp.$1==""?RegExp.$2:RegExp.$1): ID? document.getElementById(RegExp.$1): CLASS? navigator.appVersion.toLowerCase().indexOf("msie")? className(str): document.getElementsByClassName(RegExp.$1): null; this.style = function(css){ css = css.split(/\:|\;/); if(ID){ for(var j=0;j<css.length;j++) node.style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; }else{ for(var i=0;i<node.length;i++){ for(var j=0;j<css.length;j++) node[i].style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; } } } return this; } window.onload = function(){ var st = new Date().getTime(); for(var i=0;i<10000;i++){ $('#wrap').style("color:#00f; background:#f00; border-left:10px solid #000;"); $('div').style("border-right:10px solid #000; width:100px; height:100px; margin:10px;"); $('.cl').style("border-top:10px solid #000; background:#00f;"); } var end = new Date().getTime(); alert(end-st); } //]]> </script> <title></title> </head> <body> <div id="wrap">aaaaa</div> <div class="cl">bbb</div> <div class="cl">ccc</div> </body> </html> 他にも、もっとこうしたほうが…等ありましたら教えてください。どうか宜しくお願いします。
- 3104kita
- お礼率47% (95/202)
- JavaScript
- 回答数12
- ありがとう数16
- みんなの回答 （12）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
n.cssText += ';' + css; .match() //戻り値が・・・ .test() indexOf() の違い ず～～と、かいとうをまっていると、だんだんレスがつくよ！
- babu_baboo
- ベストアンサー率51% (268/525)
おはよう！ にちようは、れすがつきにくいよ！ ところで、prototype.js の function $() みたいなことがしたいの？ if("."+alltag[i].className == str){～ これの、"."って必要？ というかそもそも、class="abc def ghi" のようにふくすうしていできるのだけど １つだけちぇっく？ そくどをかんがえるのだったら ary.push(alltag[i]); を ary[ary.length]=alltag[i]; にが、じゃっかんはやいかな？どうでもいいけど かんすう $ だけど、 もし、str のさいしょが # ではじまっていたら、すぐにぶんきすればよいものを むだに CLASS とか TAG だとかさがしてむだ。 なんだか、まだまだいっぱいありそう せめて、「.style.cssText」 をぐぐって。 ばぶぅ～
補足
お久しぶりです。覚えていますでしょうか？今からちょうど一年くらい前に、当時三項演算子も知らなかったような僕に、丁寧にシューティングゲームの作り方について教えていただきました。その節はどうもありがとうございました。 あれから、javascript(というかPC)と離れてしまっていて(PCの勉強は趣味でやっているので)、あのゲームは結局完成に至らず終いでした…。 最近また勉強を始めたので、いつか完成させてブログの方にお礼を言いに行こうと思っていたのですが、まさかまた回答をもらうことになるとは思いませんでした…^^; それでこの質問の件ですが、仰る通りprototype.jsやjQuery.jsのような感じのものを自分で作ってみようと思いました。 １、cssTextの件について… $('#wrap').style(…); // $('.cl').style(…); //#wrapは上書きされる。 $('div').style(…); //.clは上書きされる。 となってしまうので、思うようなメソッドにならないんです。 ２、"."って必要？の件について… 単純に、strには".classname"が入っているので、"."+としたのですが、もっと効率的なアプローチがあるのでしょうか？ class="abc def ghi"のように複数指定は…確かにそうでした…^^; ３、もし、str のさいしょが # ではじまっていたら… わざわざnode変数にNodeを格納して、メソッドごとに条件分岐させるよりも、 $ = function(){ //ここでnode変数は作らない if(str.match(/^#(\w+)/))){ this.hoge1 = function(){ document.getElementById('id')… } this.hoge2 = function(){ document.getElementById('id')… } }else if(str.match(/^\.(\w+)/)){ this.hoge1 = function(){ … } this.hoge2 = function(){ … } } } のような分岐ということですか？ ４、ary[ary.length]=alltag[i]; 同じような方法で速度を２０回ほど計ってみたところ。全くくらい変わりませんでした。一般にpushは遅いということでしょうか？
- 1
- 2
補足
.match() .test() indexOf() の違い調べました。 そして.match()は消して.test()とindexOf()を使用することにしました。 なんだかわざわざ面倒な処理を書いていた自分にガッカリです…。 n.cssText += ';' + css;ですが、 this.style = function(css){ if(ID){ node.style.cssText += ';' + css; }else{ for(var i=0;i<node.length;i++){ node[i].style.cssText += ';' + css; } } } とすることにより出来ました。なるほどって感じです。 ですが処理速度に関しては、IE6とIE7とFxでは若干早くなり(10％upくらい…？)、他のブラウザでは相当遅くなってしまいました…。Operaに関しては致命的(５倍以上)に遅いです。IE8はほぼ変わらずです。 IE6とIE7とFxのみこの処理に分岐させてみようかと思います。