Comment coder le code HTML pour un rendu rapide dans IE

Question

La mise en page et le rendu du contenu HTML peuvent prendre un certain temps si le code HTML est suffisamment complexe. Je n'ai pas trouvé de bonnes pratiques pour définir le code HTML afin d'aider le moteur de rendu (spécialement dans Internet Explorer) afin que les retraits de pages soient plus rapides. Un tel ensemble de bonnes pratiques existe-t-il?

Mon problème spécifique actuel est que mes données tabulaires (dans un élément de table) provoquent un ralentissement de la mise en page et rendent les mises à jour DOM (effets de survol) et les animations très lentes. Je suis sûr que ce n'est pas la performance JavaScript. J'ai vérifié la page en utilisant dynaTrace AJAX. Le processeur devient trop occupé lorsque je passe la souris sur les éléments, mais il n'y a pas de JS en cours d'exécution. Et le survol est réalisé en ajoutant/supprimant une classe aux éléments TR. J'ai également essayé YSlow dans Firefox, il ne montre aucun problème particulier. Ce n'est pas non plus lié au réseau. (Firefox affiche la page plus rapidement, mais ce n'est pas parce que son moteur JS est plus rapide)

Existe-t-il un outil pour profiler le dessin et la disposition dans IE, pour que je puisse trouver d'où vient le problème? Et qu'est-ce qui peut rendre le dessin si lent, pour que je puisse les éviter en code HTML?

Answer 1

Internet Explorer est connu pour être lent avec le rendu de grandes tables HTML.

Consultez cet article agréable sur MSDN: Building High Performance HTML Pages et plus particulièrement à la section sur les tables:

• Définissez la table-layout attribut CSS fixe sur la table.
• Définissez explicitement les objets col pour chaque colonne.
• Définissez l'attribut WIDTH sur chaque col.

Ensuite, il y a aussi un blog sur la belle IEBlog à propos de la table rendu: Table Rendering. Cela se résume à ceci: Essayez de rendre le contenu dans les tables moins complexe, c'est-à-dire définir une largeur fixe et ne pas avoir trop d'action de rendu dynamique en cours. IE charge d'abord le contenu, puis doit calculer la largeur correcte pour le contenu == lent.