Archive for the ‘jQuery’ Category
2010年05月17日
elem指定とID指定のjQueryセレクタパフォーマンス実験を行いました。
“先にJavascriptでelementをとってそれをjQueryの$セレクタに囲むやつ”
vs
“直接jQueryのidセレクタでとるやつ”。
コードで言うと
$(document.getElementById(“foo”))
vs
$(“#foo”)
普通前者が勝だろうと思うだろう、
どれくらいの差かを確認したくて。
一万回ループでとった結果です。
- IE8: 187 vs 344
- IE6: 203 vs 453
- Firefox×(3.6.3): 21 vs 63
- Chrome(4.1.xx): 9 vs 39
デモページへ
var t0 = new Date();
for (var i=0; i<10000; i++){
$(document.getElementById("foo"));
}
var t1 = new Date();
for (var i=0; i<10000; i++){
$("#foo");
}
var t2 = new Date();
alert("直接elementを渡す時間は：" + (t1-t0) + " , ID指定でとる時間は："+ (t2-t1));
Tags: JavaScript, jQuery, Performance
Posted in jQuery | 1 Comment »
2010年04月26日
下記のURLで試してみればすぐ分かりますが、
表題の通りblockUIで制御したところは解除した後にマウスのカーソルがおかしいです。
IE,FirefoxとChromeでテストした結果、Firefoxは無事のようです。
http://malsup.com/jquery/block/position.html
jquery.blockUI.jsを開いてreset()のfunctionのところに以下のコードを追加
data.el.style.cursor = 'default';
第三者のソースに手を加えるのはあまりやりたくないけど。
Forbidden
Tags: jQuery, jQuery Plugin
Posted in jQuery | No Comments »
2010年04月19日
よく出来ていると思います。
勉強になります。
siblings: function( elem ) {
return jQuery.sibling( elem.parentNode.firstChild, elem );
},
children: function( elem ) {
return jQuery.sibling( elem.firstChild );
},
そしてjQuery.sibling()の中身です！
nodeTypeが1の場合はelementノードの意味です。
nはループに使われて、elemは除外する要素です。
例えばsiblings()の場合は自分自身を除外しています。
for文の書き方も覚えとこう、、
javaでのIteratorのhasNext()関数みたいな動きをしていますね。
sibling: function( n, elem ) {
var r = [];
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}
return r;
}
Tags: jQuery, Snippet
Posted in jQuery | No Comments »
2010年04月04日
表題の通り、IE6 + jQuery1.3.2の状態でbindする時に
jQueryのnamespaceを使うと確実にメモリリークが発生します。
jQuery1.4.2では発生しないことを確認しました。
$("#foo").bind("change.abc", function(){});
上記”change.abc”のabcがnamespaceです。
それをなくすことでメモリリークは解消されます。
イベントハンドラの中身とは関係ありません。
$("#foo").bind("change", function(){});
これはjQueryのbugとして上げられましたが、
完全に修正できなかったみたいです。
http://dev.jquery.com/ticket/4241で
当時の担当者のコメントを見ると
I had a really difficult time getting a reliable test case to verify this actually solves the memory leak. r6321 appears to have fixed this issue
「時間ないからちゃんとテストしてない、r6321の対応で解決できたように見える」と、
ずいぶん適当な回答ですよね。。。
Tags: IE, IE8, jQuery, トラブル
Posted in jQuery | 1 Comment »
2010年03月26日
DOM操作を避けてjQueryのパフォーマンスを改善する掟です。
こんなコードがあるとしましょう。
var list = [....]; // 長さ100の配列とする
for (var i in list) {
var li = document.createElement("li");
$(li)
.attr("id", "li" + i)
.text(list[i]);
$("ul").append(li);
}
var list = [....]; // 長さ100の配列とする
var li = "";
for (var i in list) {
li += "<li id='li" + i "'>" + list[i] + "</li>";
}
$("ul").html(li);
- document.createElementの代わりにHTMLの文字列を作る
- jQueryオブジェクトに属性やテキストを設定するのではなく、直接HTML文字列に書く
- for文内毎回appendの代わりにhtml()を使う
実際のプロジェクトでやってみたら10倍以上は速くなりました。
とは言ってもこれはIE6でのパフォーマンスで、
FirefoxやIE8だと悪い例のコードても遅いとは実感できないくらいでした。
ちなみに
$(li).attr(…).val(…).text(…)の方は読みやすいので結構気に入ったんですけど。。。
Tags: jQuery, Performance, Tips
Posted in jQuery | No Comments »
2010年03月10日
jQuery 1.4.2ではこれは治ったようです。
jQuery最新版をお使いの方は下記のようなバグはもう発生しません。
※jQuery 1.3.2で発生する問題※
<select>
<option id="foo"> </option>
<option>11</option>
<option>22</option>
</select>
<tr id="bar"> </tr>
var optionText = $("#foo").text();
// firefoxは0、IEは1
alert("select optionタグの をtrimした後のlength: " + $.trim(optionText).length);
var trText = $("#bar").text();
// firefoxは0、IEも0！
alert("trタグの をtrimした後のlength: " + $.trim(trText).length);
selectのoptionタグのテキストにある“ ”に
$.trimをかけて見ると
Firefoxはちゃんとtrimしてlengthが0になったが、
IEはtrimできずlengthが1のままです。
しかしtrタグのテキストにある” ”をtrimすると
IEも正しくtrimしてlengthが0になるんです。。。
jQuery最新版(1.4.2)を使うDEMO
Tags: JavaScript, jQuery
Posted in JavaScript, jQuery | No Comments »
2010年03月03日
こんなHTMLがあるとします。
idに[]が付いてますね。
<input id="foo[0]" type="text" />
<input id="foo[1]" type="text" />
<input id="foo[2]" type="text" />
こういうIDに括弧が付いたモノに対して
普通の#付きのjQueryセレクタでは選択できません。
$("#foo[0]"); // 取れません
属性フィルタ[attribute=value]でとるのが正解です。
$("[id='foo[0]']");
0311更新：
もし具体的なタグがわかってあれば、
それを指定することでパフォーマンスを向上できます。
上記の例で言うと
$("input[id='foo[0]']");
このほうが速いです。
Tags: jQuery
Posted in jQuery | No Comments »
2010年01月15日
指定した値が配列中にあれば、そのインデックスを返します。
配列に存在しなければ戻り値は”-1″になりますので注意してください。
var array = ["a", "b", "c"];
if ($.inArray("d", array) == -1) {
// d is not in array
}
下記のコードは間違いですよ。。。
if ($.inArray("d", array)) {}
パラメータで渡された値が配列であるかどうかを判別します。
戻り値はtrueかfalseです。
Tags: jQuery, Snippet
Posted in jQuery | No Comments »
2010年01月07日
jQueryでマウス右クリックを無効にする方法です。
“contextmenu”のイベントはjQueryのドキュメントには乗ってませんが、
それのハンドラでreturn falseすることで簡単に実現できます。
$("document").bind("contextmenu", function(){
return false;
});
Tags: jQuery, Snippet, Tips
Posted in jQuery | No Comments »
2009年12月27日
Tags: jQuery, Tips
Posted in jQuery | No Comments »
