最近新しく発刊された某書籍でJavaScriptで要素のCSSの値を数値で取得するところが気になった。
みなさんは普段どうやられているのかわかりませんが、要素elmを取ったとして、widthの値を数値で取る時、
var width = parseInt(elm.style.width)
と私はやります。書籍では、
var width = eval(elm.style.width.replace(‘px’, ”))
ってやってた。う～ん、まぁこの方法もアリだとは思うんですけど。
前者だとisNaNのチェックが必要になる分手間かな、とも思ったのですが、後者は結局undefinedのチェックをしないといけないわけで。どっちも一緒かもしれないですね。
時間があったので1000回繰り返す速度計測してみた。どうでもいいだろうけど。
window.onload = function() {
var div = document.getElementById(‘test’), w, w2;
var st = (new Date()).getTime();
for (var i = 0; i < 1000; i++) {
w = parseInt(div.style.width);
w = (isNaN(w)) ? div.style.width : w;
}
var ed = (new Date()).getTime();
var time = ed – st;
alert(‘result : ‘ + w + ‘ , type : ‘ + typeof w + ‘ , time : ‘ + time);
var st2 = (new Date()).getTime();
for (var i = 0; i < 1000; i++) {
w2 = eval(div.style.width.replace(‘px’, ”));
w2 = (typeof w2 == ‘undefined’) ? ” : w2;
}
var ed2 = (new Date()).getTime();
var time2 = ed2 – st2;
alert(‘result2 : ‘ + w2 + ‘ , type : ‘ + typeof w2 + ‘ , time : ‘ + time2);
}
どっちも無ければ空値を返すようにしました。結果は表にするのも面倒なので大体の平均値を。
Firefox3.5 前者 ： 6～8ms 、 後者 ： 9～14ms
IE8 前者 ： 15～16ms(max 31ms) 、 後者 ： 15～16ms(max 31ms)
２つしかやってないけど、ややparseIntの方が早いかな？IEはどっちでも同じみたい。意味不明。
好みの問題だと言えばそうかもしれませんが、コンパイラを起動させるevalはあまり使うべきではないかと思います、個人的に。evalなんてresponseTextをJSONに変換する時くらいしか使わないけどなぁ。セキュリティ面でもよろしくない、と「JavaScript:The Good Parts」でも書かれてたし。
parseIntも遅いだろうけど、eval + String.replace()よりは早いってことかな。IE以外は。
CSSセットや値の取得なんて一番頻繁にやる部分だからできるだけ高速化しておきたいところですね。
