Problèmes de performances IE6 liés à l'ajout d'un nom de classe sur plusieurs éléments (plug-in jQuery tableHover)

StackOverflow https://stackoverflow.com/questions/1402617

Question

Dans une application que j'écris et qui utilise un grand tableau HTML de nombres, la conception nécessite la mise en surbrillance de la ligne et de la colonne de la cellule survolée.

Je développe tous les fichiers JS pour ce projet à l'aide de jQuery 1.3.x et j'ai trouvé le plug-in tableHover qui fait exactement ce dont j'ai besoin.

Mais:

Sous IE6, les performances de ce plugin diminuent lorsque le nombre d'éléments de cellules augmente et que la page ne répond presque plus.

Je pensais que le problème résidait dans le plugin et j'ai en fait réécrit toutes ses fonctionnalités, pour découvrir que j'ai les mêmes problèmes de performances.

Après le débogage du code, je sais maintenant que sélectionner un grand nombre d'éléments et appliquer className ( jQuery.addClass () ) est extrêmement lent sur IE6.

J'ai essayé d'utiliser jQuery.css () avec seulement couleur d'arrière-plan , les performances sont meilleures, mais là encore, lorsque le nombre de cellules de tableau augmente, passe à un état inutilisable et, sur tous les autres navigateurs, les performances de jQuery.css () sont bien inférieures à celles de jQuery.addClass () .

Le principal problème ici est qu’il n’existe pas de parent commun à une colonne de table. Par conséquent, pour styliser une colonne, il faut parcourir la totalité du tableau, sélectionnez chaque ligne, puis recherchez le bon nth-child td . mon code jQuery pour celui-ci ressemble à ça: 

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

Je ne collerai pas l'intégralité de mon code ici parce que cela n'a aucune incidence sur le problème. La seule réponse que je recherche est la suivante: existe-t-il une méthode connue pour faire ce dont j'ai besoin avec une meilleure marge de performance? Je ne cherche pas & Quot; Chrome & Quot; vitesse de performance, juste quelque chose de plus rapide que & "; non sensible &";

Thnaks

Tom.

Était-ce utile?

La solution

Dans IE6 , j'ai traité des problèmes de performances complexes avec des requêtes très volumineuses. Voici ce que je peux vous offrir en termes d’aide:

  • encodez autant de données dans le code HTML que possible. par exemple, codez le numéro de ligne et les numéros de colonne dans l'attribut de classe ou de nom de TD
  • ajoutez un écouteur de souris à la table entière , puis utilisez event.target pour obtenir les TD
  • analyser l'emplacement de la cellule que vous survolez au point de formulaire n ° 1
  • encore une fois, vous devrez probablement ajouter une tonne de classes, mais vous aurez une classe pour chaque colonne et chaque ligne, de cette façon vous pourrez sélectionner la ligne entière et la colonne entière avec 2 sélecteurs de classe, et y ajouter le css
  • cachez autant que possible . si l'utilisateur se déplace d'une cellule à une autre, vérifiez s'il est déjà en surbrillance dans une rangée. Je pense que cela est pratiquement garanti, vous aurez donc la moitié des opérations de sélecteur
  • met en cache les colonnes entières que vous avez sélectionnées, vous n'avez donc pas à en sélectionner deux, comme pour les lignes
  • vérifiez cette réactivité plugin J'ai écrit, vous pouvez l'utiliser.
  • De même, il existe un autre post que j'ai écrit sur le sujet de l'écriture de plugins jquery rapides.

Autres conseils

Réduisez le nombre de modifications className et de redistributions ultérieures en laissant le moteur de correspondance CSS du navigateur effectuer le travail à votre place. Par exemple, pour une table 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>

Maintenant, tout ce que vous avez à faire est de définir className sur la table externe sur & "sel-row- (num) sel-col- (num) &"; et toutes les cellules seront mises à jour simultanément, ce qui sera beaucoup plus rapide que la mise en boucle et la définition de classes.

Pour un très grand nombre de colonnes / lignes, la quantité de données dans la feuille de style peut devenir trop lourde. Vous pouvez contourner ce problème un peu en modifiant de façon dynamique les règles de la feuille de style dans la liste document.styleSheets, mais cela nécessite un travail multi-navigateurs que jQuery ne vous aidera pas. Ou bien, pour une table comportant, par exemple, plusieurs lignes mais peu de colonnes, vous pouvez placer la classe de ligne sélectionnée directement sur la ligne, et ne faire que mettre en évidence la colonne de cette manière, ce qui ne représente encore que 2-3 modifications de classe.

(Ce serait bien si nous pouvions utiliser le sélecteur de nième enfant CSS3 comme vous l'avez fait dans le sélecteur jQuery, mais le support du navigateur n'y est pas encore.)

Je me demande si, à la recherche d'une meilleure réactivité de jQuery, vous ne voyez pas la forêt pour les arbres?

Pourquoi n'incluez-vous pas un élément <colgroup> en haut de votre tableau (explicitement ou, si nécessaire, en l'ajoutant dynamiquement avec jQuery), puis affectez une valeur de couleur d'arrière-plan à la colonne correspondant à l'index de la cellule sélectionnée ?

IE6 prend en charge l'élément <=>, mais uniquement dans des propriétés limitées. Toutefois, la couleur d'arrière-plan est l'une de celles prises en charge, ce qui devrait entraîner une amélioration significative de vos performances.

J'aurais dû noter ceci - je suis un développeur CSS / HTML bien meilleur qu'un Javascript, j'ai essayé toutes les méthodes sans script que je connais avant de plonger dans JS.

J'ai commencé à partir de colgroup . Je l'utilise même pour les largeurs de colonne de la même table, mais les éléments colgroup et col sont définis. visuellement derrière les éléments du tableau, donc si tbody , tr , td ou tout autre élément du tableau a un arrière-plan (qui dans mon cas, beaucoup d'entre eux a), colgroup ne s'affichera pas sur ces éléments, et il n'a pas réagi au positionnement ni à aucune autre manipulation CSS avancée que j'ai tenté d'appliquer sur celui-ci.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top