Lo mal que lo hace jQuery degradar el rendimiento cuando se utiliza una gran cantidad de selectores, o lo hace?

Question

Quiero solicitar un evento click () para todos los enlaces en una página cuando el href de que los puntos de enlace a un archivo con una extensión específica. La lista de extensiones de aplicación es de alrededor de 30 y puede crecer un poco en el futuro (pero nunca será de más de 100).

Mi primera inclinación es estructurar la unión al igual que el evento:

$("a[href$=avi],
   a[href$=ppt],
   a[href$=rtf],

// ...snip a bunch more of these....

   a[href$=pdf],
   a[href$=xml]").click(function() {
      // Do something
 });

Es esto una locura?

Answer 1

Me gustaría seleccionar todos los enlaces y luego filtrarla dentro de la función de clic, por ejemplo, así:

$('a').click(function() {
    var ext = /[^.]+$/.exec($(this).attr('href'));
    switch(ext) {
        case 'avi':
        case 'ppt':
        ...
        case 'xml':
            // Do something
            break;
    }
});

ahorra una gran cantidad de desplazamiento y es mucho más bonita también.

Lo malo con su enfoque es que jQuery probablemente maneja cada uno de su selector de forma independiente, por lo que después de que termine la búsqueda del primer selector, se olvida por completo qué más se encuentra y se busca en todo el documento de nuevo para la siguiente selección. Con este método jQuery sólo se tiene que buscar una vez para todos los enlaces, y el uso de switch de los casos dentro de la función es probablemente tan rápido que no tiene que molestarse con problemas de rendimiento.

Answer 2

Te voy a dar una pista - casi definitivamente. Hice algo como este y que era muy doloroso. Probé otro enfoque, el almacenamiento de los resultados de cada selector en una matriz y luego hacer .click (array) $ () fue mucho más rápido (especialmente en IE6 / P3 900 MHz)

Dicho esto, usted debe referencia y encontrar la manera más rápida para su aplicación. encuentre un ordenador viejo de mierda con IE6, o conseguir una máquina virtual con IE6, y probar el de temporización en la que. la sintonización de selección (y ver cuáles son lentos y cómo puedo evitar llamar a ellos) es mi primera parada en Javascript optimización.

Answer 3

Me gustaría considerar el uso de una función de filtro en lugar de un conjunto de selectores:

$('a').filter( function() {
           return $(this).attr('href').match( /(avi|ppt|...|xml)$/ ) != null;
       })
      .click( function() {
           // do something
       });