2008年5月9日金曜日

jQueryとjGlycy

jQueryプラグイン呼び出し用ライブラリjGlycyを使ってみた。


使ってみて、どうしても重い気がするので、速度の違いを比較してみた。
比較はFirebugのプロファイラを使用


対象は以下。2chの板一覧をtreeviewでツリー構造にし、更に各板のリンクにはクリックで
イベントが発生するようにしている。(urlは#数字と適当)

jglycyを使って呼び出し。


ヘッドのスクリプトタグにwindow.onloadを記述し呼び出す。id/classを利用


bodyの閉じタグの後にスクリプトタグ埋め込み、即実行。


/**
* jquery.myOnClick
*
**/
(function($){
$.fn.extend({
myOnClick: function(options){
var opt = $.extend({
msg: 'yes'
}, options ||
{});
$(this).click(function(event){
id = event.target.hash.split('#')
console.log(id);
});
}
});
})(jQuery);


・結果(って5回しかやってないけど)
jglycy
Profile (3375ms, 89201 calls)
Profile (6796.875ms, 135056 calls)
Profile (3421.875ms, 89551 calls)
Profile (3390.625ms, 89401 calls)
Profile (3312.5ms, 88801 calls)

onload
Profile (4859.375ms, 105592 calls)
Profile (2609.375ms, 60308 calls)
Profile (2078.125ms, 59637 calls)
Profile (4812.5ms, 105730 calls)
Profile (2718.75ms, 60011 calls)

footer
Profile (5046.875ms, 105396 calls)
Profile (5312.5ms, 105451 calls)
Profile (2781.25ms, 59340 calls)
Profile (2578.125ms, 59131 calls)
Profile (2390.625ms, 59752 calls)

onload と footer は大して違わない、ちょっとonloadのほうが早い?誤差の範囲だとおもうけど、onloadの分遅くなると思ってたので意外。
jglycy は確実に遅いと思われる。2割前後遅くなってる感じ

回数少なすぎ&軽すぎるようにも思うので、もう少し時間のかかる処理を回数こなしてみたい。プロファイルの詳細の読み方がよく分からないので調べつつ、、、

invokeElement avg:3171msとかなってるので、各要素にイベントを登録するのに時間かかってるのが敗因か・・・

というわけで、やっぱり重いのでjglycyはやめる方向かなぁ。
使い勝手は悪くないので、どうしたら軽くできるか考えるのも面白いかも



あ、opt.msg使ってない・・・


---ちょっと追記
よく考えたらアンカーに登録しなくてもいいんだと思いついて変更。
親要素にイベント登録してみた。



Profile (2859.375ms, 59243 calls)
Profile (2375ms, 59185 calls)
Profile (2984.375ms, 59335 calls)
Profile (2218.75ms, 59288 calls)
Profile (2546.875ms, 59382 calls)

大して変わらない・・・jGlycyの各要素に1回1回登録以外は大して違いはないのか・・・