Question

我遇到过一种情况，即单一处理程序有助于简化项目。这对性能有影响吗？特别是当调用鼠标移动事件时，条件太多会对性能产生影响吗？

var myHandler = function(e){
    if (e.type == 'mousemove'){

    } else if (e.type == 'mouseover'){

    } else if (e.type == 'mouseout'){

    } else if (e.type == 'mousedown'){

    } else if (e.type == 'mouseup'){

    }        
};

$('#Element').bind('mouseover mouseout mousedown mouseup mousemove', myHandler);

Answer 1

如果您确实需要处理所有这些事件，并且按照事件被触发的频率（如您已经拥有的那样）对if-else语句进行排序，那么性能损失是微不足道的，即最多4次短字符串比较。以下代码尝试对10,000,000个固定大小的字符串比较的性能进行基准测试：

$(function (){
Function.prototype.benchmark = function(name, times, args){

var iteration;
var start = new Date();
for (iteration=0; iteration<times; iteration++) {
        var result = this.apply(this, args);
}

var end = new Date();

alert(name + " : " + (end-start));
}
 function test(args){
     return args[0] == "thisistest";
 }
function overhead(args){
 }
test.benchmark("string comparison", 10000000,["thisistesT"]);
//run same without the string comparison
overhead.benchmark("overhead", 10000000,["thisistesT"]);
});

由于浏览器不是我PC上的唯一应用程序，因此执行结果会有所不同，但是，我很少在Chrome中获得低于100毫秒的结果（请记住这是10,000,000次迭代）。

无论如何，虽然你的表现不会受到将多个事件绑定到单个函数的影响，但我真的怀疑这会简化你的项目。有很多if-else语句通常被认为是一种不好的做法和设计缺陷。

如果这样做，以便您可以通过将它们置于函数的共同范围内来共享处理程序之间的状态，那么最好使用以下内容：

$(function (){
  var elementSelector = "#Element";
  var i = 0; //shared
  var events = {
    mouseover : function(){alert("mouseOver " + elementSelector + i++);},
    mouseout : function(){alert("mouseOut " + elementSelector  + i++);}
    // define the rest of the event handlers...
  };

  var $target = $(elementSelector);
  for(var k in events){
     $target.bind(k, events[k]);
  }
});

Answer 2

关于性能（加上代码可读性）的另一个注意事项，switch明显快于else if s。

var myHandler = function(e){
    switch(e.type){
        case 'mousemove':

            break;
        case 'mouseover':

            break;
        case 'mouseout':

            break;
        case 'mousedown':

            break;
        case 'mouseup':

            break;
    }
};

有关更多详情，您可以查看Performance of if-else, switch or map based conditioning

jQuery事件绑定到单个处理程序

2 个答案: