作者grence (多想兩分鐘 = =")
看板Ajax
標題Re: [問題] 註冊Click事件的效能問題
時間Thu Mar 31 01:27:01 2011
※ 引述《nightspirit (鞭策自己社清流夜靈)》之銘言：
: 最近寫程式有點疑惑，如果針對連結去做Click事件的綁定，
: 那麼是用一個匿名function配Switch Case好，
: 還是分開綁定不同的匿名function比較好呢？
: HTML
: <a href="#" id="a" class="btn">按鈕一</a>
: <a href="#" id="b" class="btn">按鈕二</a>
: A作法
: $(".btn").click(function(){
: switch(this.id){
: case 'a':
: // do something
: break;
: case 'b':
: // do something
: break;
: }
: });
: B作法
: $("#a").click(function(){// do something});
: $("#b").click(function(){// do something});
: 就效能/記憶體來說，不曉得那種寫法會得到比較好的效果？
JavaScript 很少看到討論記憶體…除了某破瀏覽器有名的 memory leak
天曉得瀏覽器怎麼做資源回收，若有人願意分享還請補充。
但是只看速度…還是想到幾個變因；
．selector：速度 id > class，這是肯定的。
．事件綁定
$(".btn").click(function(){// do something})
v.s.
$("#a").click(function(){// do something})
$("#b").click(function(){// do something})
==
var a=0;
for(var i=0; i<50; i++)a++;
var b=0;
b++; b++; b++; b++; b++; b++; /*.....*/
不用迴圈會比較快
$(".btn").click 隱含用迴圈跑到每個 dom去綁事件←不確定 jQuery有沒有什麼優化
==
如果函數可以重複使用，另外宣告，不要用匿名函數。
function fn(){// do something}
$("#a").click(fn);
$("#b").click(fn);
．函數執行速度：
一個用 switch結合多個動作的 function ←想不到怎麼模擬大量的情況
v.s.
多個單一動作的 function ←用迴圈模擬大量的情況，跟一行一行宣告、綁定又不一樣
一個大 function肯定比較慢；另外，switch並不快。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 180.176.89.159
1F：推 nightspirit:謝謝解惑~ 這樣我大概了解要怎麼做優化了 :P 03/31 02:02
我只是記錄我想到的東西，如果沒有頭緒可以從這幾點實驗看看；
效能這事…我想只能多方嚐試了，畢竟瀏覽器也一直在改版……
2F：推 mesak:$('a.btn') or $('a.btn' , $('#btngroup') ) 這種模式會比 03/31 21:52
3F：→ mesak:較快一點 03/31 21:52
※ 編輯: grence 來自: 180.176.89.159 (03/31 22:56)