Problemi di prestazioni di IE6 con l'aggiunta di className su più elementi (plug-in jQuery tableHover)

Question

In un'applicazione che scrivo che utilizza una grande tabella di numeri HTML, il design richiede che la riga e la colonna della cella al passaggio del mouse vengano evidenziate.

Sviluppo tutto il JS per questo progetto usando jQuery 1.3.x e ho trovato il plug-in tableHover che fa esattamente ciò di cui ho bisogno.

Ma:

su IE6 le prestazioni di questo plugin diminuiscono quando il numero di elementi della cella sale fino a un punto in cui la pagina non risponde quasi.

Ho pensato che i problemi risiedessero nel plugin e in realtà ho riscritto l'intera funzionalità da zero, solo per scoprire che ho gli stessi problemi di prestazioni.

Dopo aver eseguito il debug del codice ora so che la selezione di una grande quantità di elementi e l'applicazione di className ( jQuery.addClass () ) è estremamente lenta su IE6.

Ho provato a usare jQuery.css () invece con solo colore di sfondo , le prestazioni sono migliori, ma ancora una volta, quando il numero di celle della tabella aumenta le prestazioni scende a uno stato inutilizzabile e su tutti gli altri browser le prestazioni di jQuery.css () sono molto più lente di jQuery.addClass () .

Il problema principale qui è che non esiste un genitore comune a una colonna di una tabella, quindi per definire lo stile di una colonna è necessario attraversare l'intera tabella, selezionare ogni riga e trovare il nth-child td . il mio codice jQuery per questo sembra così:

//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);

Non incollerò qui tutto il mio codice perché è irrilevante per il problema. L'unica risposta che sto cercando è: esiste un metodo noto per fare ciò di cui ho bisogno con un margine di prestazione migliore? Non cerco & Quot; Chrome & Quot; velocità delle prestazioni, solo qualcosa di più veloce di " non responsive " ;.

Thnaks

Tom.

Answer 1

Ho gestito jquery di prestazioni complesse su tabelle molto grandi in IE6 . Ecco cosa posso offrirti in termini di aiuto:

• codifica il maggior numero possibile di dati nell'html. ad esempio, codificare il numero di riga e i numeri di col nella classe TD o l'attributo name
• aggiungi un listener del mouse all'intera intera , quindi utilizza event.target per ottenere i TD
• analizza la posizione della cella che stai passando dal punto n. 1
• di nuovo, probabilmente dovrai aggiungere un sacco di classi, ma avere una classe per ogni colonna e ogni riga, in questo modo puoi selezionare sia l'intera riga che l'intera colonna con 2 selettori di classe e aggiungere css a loro
• cache il più possibile . se l'utente si sposta da una cella all'altra, controlla se è in una riga che hai già evidenziato. penso che questo sia praticamente garantito, quindi avrai 1/2 delle operazioni di selezione
• memorizza nella cache intere colonne selezionate, quindi non è necessario selezionare due volte, lo stesso per le righe
• controlla questa reattività plugin ho scritto, potresti volerlo usare.
• inoltre, c'è altro post che ho scritto sull'argomento di scrivere plugin jquery veloci.

Answer 2

Riduci il numero di modifiche a className e successivi riduzioni lasciando che il motore di corrispondenza CSS del browser faccia il lavoro per te. Ad esempio, per una tabella 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>

Ora tutto ciò che devi fare è impostare className nella tabella esterna su " sel-row- (num) sel-col- (num) " e tutte le celle verranno aggiornate contemporaneamente, il che sarà molto più veloce del looping e dell'impostazione delle classi.

Per un numero molto elevato di colonne / righe, la quantità di dati nel foglio di stile può diventare scomoda. Puoi aggirare un po 'questo cambiando dinamicamente le regole nel foglio di stile attraverso l'elenco document.styleSheets, ma questo richiede un po' di lavoro cross-browser con cui jQuery non ti aiuterà. O per una tabella con, diciamo, molte righe ma poche colonne, puoi mettere la classe della riga selezionata direttamente sulla riga e fare solo evidenziare la colonna in questo modo, che è ancora solo 2-3 cambi di classe.

(Sarebbe bello se potessimo usare il selettore CSS-nth-child come hai fatto nel selettore jQuery, ma il supporto del browser non è ancora presente.)

Answer 3

Mi chiedo se nella ricerca di una migliore reattività da jQuery, non stai vedendo la foresta per gli alberi?

Perché non includere un elemento <colgroup> nella parte superiore della tabella (in modo esplicito o, se necessario, aggiungendolo in modo dinamico con jQuery) e quindi assegnare un valore di colore di sfondo alla colonna corrispondente all'indice della cella selezionata ?

IE6 supporta l'elemento <=>, ma solo in proprietà limitate. Tuttavia, il colore di sfondo è uno di quelli supportati, quindi questo dovrebbe vedere un miglioramento significativo delle tue prestazioni.

Answer 4

Avrei dovuto notare questo: sono uno sviluppatore CSS / HTML molto migliore di uno Javascript, ho provato tutti i metodi non di script che conosco prima di scavare in JS.

In realtà sono partito da colgroup , lo uso persino per le larghezze di colonna sulla stessa tabella, ma sono impostati gli elementi colgroup e col visivamente dietro gli elementi della tabella, quindi se tbody , tr , td o qualsiasi altro elemento nella tabella ha uno sfondo (che nel mio caso, molti di loro hanno), colgroup non verrà mostrato su questi elementi e non ha risposto al posizionamento o ad altre manipolazioni CSS avanzate che ho cercato di applicare su di esso.