javascript - first - jquery selector




¿Los eventos vinculantes en jQuery son muy caros o muy económicos? (2)

Acabo de escribir una función $ (). Bind ('evento') y me preocupa que este tipo de llamada sea muy costosa si jQuery tiene que ejecutar cada elemento en el DOM para vincular este evento.

O tal vez, es casi tan eficiente como podría ser un evento. Los documentos jQuery que he leído no dejan esto en claro. Alguna opinion?


Básicamente, no vas a hacer nada mejor. Todo lo que hace es llamar a attachEventListener () en cada uno de los elementos seleccionados.

En el tiempo de análisis solo, este método es probablemente más rápido que configurar controladores de eventos inline en cada elemento.

En general, consideraría que esta es una operación muy económica.


Hay dos cosas que pueden hacer que su código de enlace de evento sea lento: el selector y el número de enlaces. El más crítico de los dos es el número de enlaces, pero el selector podría afectar su rendimiento inicial.

En lo que respecta a los selectores, asegúrese de no utilizar selectores de nombre de clase puro como .myclass . Si sabes que la clase de myclass estará siempre en un elemento <div> , haz que tu selector sea div.myclass ya que ayudará a jQuery a encontrar los elementos que coincidan más rápido. Además, no aproveche jQuery, lo que le permite otorgarle enormes cadenas de selección. Todo lo que puede hacer con los selectores de cadenas también lo puede hacer a través de funciones, y esto es intencional, ya que (marginalmente, es cierto) es más rápido hacerlo de esta manera ya que jQuery no tiene que sentarse para analizar la cadena para averiguar qué usted quiere. Entonces, en lugar de hacer $('#myform input:eq(2)'); podrías hacer $('input','#myform').eq(2); . Al especificar un contexto, tampoco estamos haciendo que jQuery mire donde no lo tenga, lo cual es mucho más rápido. Más sobre esto aquí .

En cuanto a la cantidad de enlaces: si tiene una cantidad relativamente mediana de elementos, entonces debería estar bien: cualquier cosa hasta 200, 300 coincidencias de elementos potenciales funcionarán bien en los navegadores modernos. Si tiene más que esto, puede que quiera buscar Delegación de evento.

¿Qué es la Delegación de evento? Básicamente, cuando ejecutas código como este:

$('div.test').click(function() {
    doSomething($(this));
});

jQuery está haciendo algo como esto detrás de escena (vinculando un evento para cada elemento emparejado):

$('div.test').each(function() {
    this.addEventListener('click', function() {
        doSomething(this);
    }, false);
});

Esto puede volverse ineficiente si tienes una gran cantidad de elementos. Con la delegación de eventos, puede reducir la cantidad de enlaces reducidos a uno. ¿Pero cómo? El objeto de evento tiene una propiedad de target que le permite saber en qué elemento actuó el evento. Entonces podrías hacer algo como esto:

$(document).click(function(e) {
    var $target = $(e.target);
    if($target.is('div.test')) { // the element clicked on is a DIV
                                 // with a class of test
       doSomething($target);
    }
});

Afortunadamente no tienes que codificar lo anterior con jQuery. La función en live , que se anuncia como una manera fácil de vincular eventos a elementos que aún no existen, es realmente capaz de hacer esto mediante el uso de la delegación y comprobación de eventos en el momento en que ocurre una acción si el destino coincide con el selector que se le especifique . Esto tiene el efecto secundario, por supuesto, de ser muy útil cuando la velocidad es importante.

La moraleja de la historia? Si le preocupa la cantidad de enlaces que su script acaba de reemplazar .bind con .live y asegúrese de tener selectores inteligentes.

Tenga en cuenta, sin embargo, que no todos los eventos son compatibles con .live . Si necesita algo que no es compatible con él, puede consultar el plugin livequery , que es en vivo con esteroides.







events