Question

我已经读过一些选择器可以被使用querySelectorAll()。这是一个例子。

$('a.button:animated'); // Does not use querySelectorAll()
$('a.button').filter(':animated');  // Uses it and faster.

我有这个选择器：

 $( 'input[name="annoncedby"]:radio' ).on('change',function(){
   ....
 }

我是这样用的：

  $( 'input[name="annoncedby"]').filter(':radio' ).on('change',function(){
   ....
   }

但它不快，怎么能更快地做到这一点？

Answer 1

这些优化背后的想法是，如果使用standards-based query selectors，则不需要嘶嘶声，如果您需要使用sizzle-only selector，则将其添加到其自己的子句中，并且JQuery非常聪明，可以进行优化。

此代码完全绕过JQuery，确保最高性能：

＆＃13;

"use strict";

//  various ways to select the element
var radios = document.querySelectorAll('[name="annoncedby"]');
//var radios = document.querySelectorAll('input[name="annoncedby"]');
//var radios = document.querySelectorAll('input[name="annoncedby"][type="radio"]');

for (var i in radios) {
  radios[i].addEventListener('change',function(event){
    alert( this.value );
  });  
}

＆＃13;

<form>
  <input type="radio" name="annoncedby" value="daryl" />  
  <input type="radio" name="annoncedby" value="pete" />
</form>

＆＃13;

Answer 2

另一种方法是使用委托的事件处理程序，附加到所有单选按钮的祖先。

这将提供更快的初始事件连接，并且在事件时没有明显的速度降低：

$('#someparentid').on('change', 'input[name="annoncedby"]:radio', function(){ .... });

它的工作原理是应用单个事件处理程序，它监听change事件以冒泡到祖先元素，然后将jQuery选择器应用于泡泡链中的元素然后将函数应用于导致事件的任何匹配元素。由于事件响应仅以用户界面速度进行，因此使用此方法没有真正的缺点。

为了让您了解事件注册的速度差异，我已从@Musa更新了JSPerf测试。 HTML的唯一补充是将处理程序连接到的父元素。

JSPerf： http://jsperf.com/queryselectorvssizzle/2

优化jquery选择器

2 个答案: