Mode de rendu des tableaux

Pour ceux qui doutes Microsoft en parle dans son article sur les performances, mais ce point là est généralement bien accepté car la différence de performance est parfois flagrante. Sitepoint en parle aussi d’ailleurs : Le mode de rendu des tableaux impacte les performances.

Rendu fixe ou dynamique

Les tableaux HTML ont deux modes de rendu. Le premier mode utilise un calcul simple pour déterminer la taille horizontale des différentes cellules. On regarde la taille appliquée à la colonne, ou éventuellement à la première cellule de la colonne. Les cellules fusionnées ou sans taille explicite se répartissent à égalité la place restante. On parle d’un cadre fixe.

Le second mode rendu utilise un algorithme bien plus complexe. Il utilise le contenu de chaque cellule pour décider quelle taille elle prendra. On prend en compte la quantité de contenu, la taille souhaitable pour la cellule, et la taille minimum. L’algorithme est complexe, il nécessite de travailler sur des parties complexes du rendu de chaque cellule, il nécessite de recalculer le rendu complet du tableau dès qu’un contenu change dans une cellule ou au fur et à mesure que le HTML est téléchargé. On parle là d’un cadre automatique, ou dynamique.

Les performances

Vous vous doutez bien que le navigateur ne fait pas le même travail dans les deux cas, et pas avec les mêmes performances. Malheureusement c’est ce second mode de rendu, le dynamique, qui est utilisé par défaut. Utilisez la directive CSS table-layout:fixed et d’un coup votre navigateur sera soulagé.

Vous ne verrez pas la différence pour un petit tableau de chiffres mais si vous utilisez les tableaux pour déterminer l’agencement général de la page, si vous imbriquez des tableaux les uns dans les autres, si vous utilisez de très grands tableaux de données avec des centaines de lignes et colonnes, ou si vous utilisez du contenu complexe dynamique dans vos cellules, vous sentirez peut être la différence de performance.