Problemas de rendimiento de IE6 al agregar className en varios elementos (complemento jQuery tableHover)

Question

En una aplicación que escribo que usa una gran tabla de números HTML, el diseño requiere que la fila y la columna de la celda suspendida estén resaltadas.

Desarrollo todo el JS para este proyecto usando jQuery 1.3.x, y encontré el complemento tableHover que hace exactamente lo que necesito.

Pero:

en IE6, el rendimiento de este complemento se reduce a medida que el número de elementos de celda aumenta hasta un punto donde la página casi no responde.

Pensé que el problema radica en el complemento y de hecho reescribí toda su funcionalidad desde cero, solo para descubrir que tengo los mismos problemas de rendimiento.

Después de depurar el código ahora sé que seleccionar una gran cantidad de elementos además de aplicar className ( jQuery.addClass () ) es extremadamente lento en IE6.

Intenté usar jQuery.css () en su lugar con solo color de fondo , el rendimiento es mejor, pero de nuevo, cuando el número de celdas de tabla aumenta el rendimiento cae a un estado inutilizable, y en todos los demás navegadores, el rendimiento de jQuery.css () es mucho más lento que jQuery.addClass () .

El principal problema aquí es que no hay un elemento primario común para una columna de la tabla, por lo que para diseñar una columna es necesario recorrer toda la tabla, seleccionar cada fila y luego encontrar el nth-child correcto td . mi código jQuery para este se ve así:

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

No pegaré todo mi código aquí porque es irrelevante para el problema. La única respuesta que estoy buscando es: ¿Existe un método conocido para hacer lo que necesito en un mejor margen de rendimiento? No estoy buscando & Quot; Chrome & Quot; velocidad de rendimiento, algo más rápido que " no responde " ;.

Thnaks

Tom.

Answer 1

He tratado con jquery complejo de rendimiento en tablas muy grandes en IE6 . Esto es lo que puedo ofrecerle en términos de ayuda:

• codifique tantos datos en el html como sea posible. por ejemplo, codifique el número de fila y los números de columna en la clase de TD o atributo de nombre
• agregue un detector de mouse a la tabla completa y luego use event.target para obtener los TDs
• analiza la ubicación de la celda en la que estás pasando el punto # 1
• nuevamente, probablemente tendrá que agregar una tonelada de clases, pero tiene una clase para cada columna y cada fila, de esa manera puede seleccionar tanto la fila completa como la columna completa con 2 selectores de clase, y agregarles CSS a ellas
• caché tanto como sea posible . Si el usuario se mueve de una celda a otra, verifique si está en una fila que ya haya resaltado. Creo que esto está garantizado, por lo que tendrá la mitad de las operaciones del selector
• almacena en caché las columnas completas que has seleccionado, para que no tengas que seleccionar dos veces, lo mismo para las filas
• vea esta capacidad de respuesta plugin escribí, es posible que desee utilizarlo.
• también, hay otro publicación que escribí sobre el tema de escribir complementos rápidos de jquery.

Answer 2

Reduzca el número de cambios de className y los reflujos posteriores permitiendo que el motor de coincidencia CSS del navegador haga el trabajo por usted. Por ejemplo, para una tabla 3x3:

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

Ahora todo lo que necesita hacer es establecer className en la tabla externa a " sel-row- (num) sel-col- (num) " y todas las celdas se actualizarán a la vez, lo que será mucho más rápido que hacer bucles y establecer clases.

Para una gran cantidad de columnas / filas, la cantidad de datos en la hoja de estilo puede volverse difícil de manejar. Puede solucionar esto un poco cambiando dinámicamente las reglas en la hoja de estilo a través de la lista document.styleSheets, pero esto requiere un trabajo cruzado en el navegador con el que jQuery no lo ayudará. O para una tabla con, por ejemplo, muchas filas pero pocas columnas, puede colocar la clase de fila seleccionada directamente en la fila, y solo resaltar la columna de esta manera, que todavía son solo 2-3 cambios de clase.

(Sería bueno si pudiéramos usar el selector nth-child CSS3 como lo hizo en el selector jQuery, pero el soporte del navegador aún no está allí).

Answer 3

Me pregunto si al buscar una mejor capacidad de respuesta de jQuery, ¿no estás viendo el bosque por los árboles?

¿Por qué no incluye un elemento <colgroup> en la parte superior de la tabla (explícitamente o, si es necesario, agregándolo dinámicamente con jQuery) y luego asigna un valor de color de fondo a la columna que coincida con el índice de la celda seleccionada ?

IE6 admite el elemento <=>, pero solo en propiedades limitadas. Sin embargo, el color de fondo es uno de los admitidos, por lo que esto debería ver una mejora significativa en su rendimiento.

Answer 4

Debería haber notado esto: soy mucho mejor desarrollador de CSS / HTML que Javascript, probé todos los métodos que no son de script que conozco antes de profundizar en JS.

En realidad comencé desde colgroup , incluso lo uso para anchos de columna en la misma tabla, pero los elementos colgroup y col están configurados visualmente detrás de los elementos de la tabla, por lo que si tbody , tr , td o cualquier otro elemento de la tabla tiene un fondo (que en mi caso, muchos de ellos tienen), colgroup no se mostrará sobre estos elementos, y no respondió al posicionamiento ni a ninguna otra manipulación avanzada de CSS que intenté aplicar en él.