CSS Performance Profiler?

Question

Je travaille actuellement sur un site, et quelque part dans ma masse de feuilles de style, quelque chose tue les performances dans IE. Existe-t-il de bons profileurs CSS? J'aimerais un outil capable d'identifier les règles qui réduisent les performances.

Avant que vous ne posiez la question, j'ai désactivé JavaScript, l'opacité et les règles d'ombre box / shadow de texte. La page est encore nerveuse. : / Si je désactive tous les CSS, ça fonctionne très bien.

J'ai besoin d'un outil qui puisse profiler la page et signaler les goulots d'étranglement CSS.

Answer 1

Donc, j'ai enfin réussi à écrire une fonction JavaScript qui indexé l'ensemble de mes classes CSS sur la page et ensuite individuellement basculé, pendant le défilement de la page. Immédiatement pin-pointu errants de la classe, et à partir de là, j'ai été en mesure de déterminer errants de la propriété. S'avère qu' border-radius sur un élément qui contient de nombreux enfants (par exemple, un corps de niveau div) effectue incroyablement mal sur IE9.

J'ai commencé un dépôt github pour mon CSS test de stress: https://github.com/andyedinborough/stress-css

À partir de là, vous pouvez installer un bookmarklet pour facilement exécuter le test sur n'importe quelle page.

Answer 2

Le plugin Page Speed de Google a une section qui analyse votre CSS et vous informe sur les sélecteurs inefficaces, peut-être commencer par là?

hth

Note: Je sais que c'est un plugin Firefox, mais ça devrait aider à optimiser un peu :)

Answer 3

Hmm, jamais entendu parler d'un tel outil.

Si vous trouvez pas, choses à regarder dehors pour manuellement comprendra

• Tout filter des déclarations (le classique alpha=opacity - et d'autres- IE a un certain nombre de très graphique avancée des filtres qui sont extrêmement coûteux)

• Énorme éléments (comme des milliers de pixels de large)

• Énorme images de fond - peut-être les supprimer tous d'un moment?

Je soupçonne fortement le premier point - transparences alpha peut être un terrible rendu goulot d'étranglement, en particulier sur des systèmes plus anciens.

Answer 4

J'ai également des problèmes de performances sur un projet Web sur lequel je travaille actuellement. Il fonctionne bien dans Firefox, Chrome, même IE8. Dans IE9, il s'enlise.

Après quelques travaux de détective, j'ai découvert que l'élimination de toutes les lignes CSS Box-Shadow améliorait considérablement les performances. J'avais des ombres sous forme de bannières, de tableaux, de boîtes et de tabulations, chacune avec juste une quantité subtile d'ombre et de flou, mais apparemment suffisante pour que IE9 devienne de mauvaise humeur.

Answer 5

Opera expérimente le profilage CSS dans son profileur.

Il peut être activé en suivant les étapes de cette page . Ouvrez ensuite le profileur, lancez le profilage et actualisez la page que vous souhaitez analyser. Arrêtez le profilage une fois le rendu terminé, les résultats seront affichés.